#### **본문에 들어가기 전에** 이전 게시글을 읽으면 도움이 될 수도 있다. >
### **Credentials** Auth.js에서 아이디/비밀번호 또는 외부 인증 방식을 지원하는 **인증 방식의 이름이다.** ### **Credentials Provider** Credentials 인증 방식을 구현하기 위해 **providers 배열에 추가하는 객체이다**. > Credentials Provider 임포트 경로는 **`next-auth/providers/credentials`** 이다 #### **credentials 필드** Credentials Provider 에서 로그인 폼의 입력 필드를 정의하는 객체로 Next.js 에서는 **`/api/auth/signin`** 경로로 자동으로 렌더링된다. 각 필드는 다음과 같은 속성을 허용한다. * `label`: Input label * `type`: HTML input type (`text`, `password`, etc.) * `placeholder`: Placeholder text > 이러한 필드들은 자격 증명 인수를 통해 authorize 함수에도 전달된다. ```JavaScript // Credentials Provider Credentials({ // credentials 필드 credentials: { email: { type: "email", label: "Email", placeholder: "johndoe@gmail.com", }, password: { type: "password", label: "Password", placeholder: "*****", }, }, }) ``` #### **authorize 함수** Credentials Provider 에 정의된 authorize 는 사용자 지정 로그인 방식을 처리하고 제공된 자격 증명이 유효한지 여부를 판단한다. 실제 인증 로직을 작성한다고 생각하면 된다.
#### **예시 코드 정리** ```JavaScript import NextAuth from "next-auth" import Credentials from "next-auth/providers/credentials" // 암호화 방식 -> 다른 방식도 많다 import bcrypt from "bcryptjs" export const { handlers, auth } = NextAuth({ providers: [ Credentials({ credentials: { email: {}, password: {} }, async authorize(c) { // 유저 인증 const user = c.email === "test@test.com" ? { id: "1", email: c.email, password: await bcrypt.hash("1234", 10) } : null if (!user) return null const ok = await bcrypt.compare(c.password, user.password) return ok ? { id: user.id, email: user.email } : null }, }), ], }) ``` #### Signin Form 테스트용 로그인 페이지 ```JavaScript import { signIn } from "@/auth" export function SignIn() { return ( ) } ```
#### Validating credentials 자격 증명은 항상 서버 측에서 검증해야 합니다. 예를 들어 Zod와 같은 스키마 유효성 검사 라이브러리를 활용하자 ``` npm install zod ``` ```JavaScript // zod.ts import { object, string } from "zod" export const signInSchema = object({ email: string({ required_error: "Email is required" }) .min(1, "Email is required") .email("Invalid email"), password: string({ required_error: "Password is required" }) .min(1, "Password is required") .min(8, "Password must be more than 8 characters") .max(32, "Password must be less than 32 characters"), }) ``` ```JavaScript // auth.ts import NextAuth from "next-auth" import { ZodError } from "zod" import Credentials from "next-auth/providers/credentials" import { signInSchema } from "./lib/zod" // Your own logic for dealing with plaintext password strings; be careful! import { saltAndHashPassword } from "@/utils/password" import { getUserFromDb } from "@/utils/db" export const { handlers, auth } = NextAuth({ providers: [ Credentials({ // You can specify which fields should be submitted, by adding keys to the `credentials` object. // e.g. domain, username, password, 2FA token, etc. credentials: { email: {}, password: {}, }, authorize: async (credentials) => { try { let user = null const { email, password } = await signInSchema.parseAsync(credentials) // logic to salt and hash password const pwHash = saltAndHashPassword(password) // logic to verify if the user exists user = await getUserFromDb(email, pwHash) if (!user) { throw new Error("Invalid credentials.") } // return JSON object with the user data return user } catch (error) { if (error instanceof ZodError) { // Return `null` to indicate that the credentials are invalid return null } } }, }), ], }) ```
#### 참고 자료 > [Auth.js(v5) Credentials 공식 문서](https://authjs.dev/getting-started/authentication/credentials)