NextAuth를 통해 로그인을 구현해 볼 예정이다.
우선 이메일, 패스워드 방식을 이용한 Credentials를 먼저 사용 할 것이다.
본인은 Next App Router 방식을 사용 할 예정이다.

세팅

우선 NextAuth를 설치한다.

yarn add next-auth

그 다음 폴더를 만들어 주어야 한다.
App Router에서는 app/api/auth/[...nextauth]/route.ts
이렇게 폴더를 만들어 주어야 한다.

API Router를 사용하기 위해서 파일의 이름을 route.ts(js)로 명명해준다.

import NextAuth from 'next-auth/next'

const handler = NextAuth({})

export { handler as GET, handler as POST }

as 구문을 이용하여 export를 해주어야 GET, POST 핸들러를 사용할 수 있다.

Credentials 적용하기

우선 우리는 이메일과 패스워드 방식을 적용할 것이기 때문에 Credentials을 사용할 예정이다.
추후에 네이버 로그인, 카카오 로그인을 구현 할 예정이다.

// route.ts
import NextAuth from 'next-auth/next';
import CredentialsProvider from 'next-auth/providers/credentials';

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      // The name to display on the sign in form (e.g. "Sign in with...")
      name: 'Credentials',
      // `credentials` is used to generate a form on the sign in page.
      // You can specify which fields should be submitted, by adding keys to the `credentials` object.
      // e.g. domain, username, password, 2FA token, etc.
      // You can pass any HTML attribute to the <input> tag through the object.
      credentials: {
        username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
        password: { label: 'Password', type: 'password' },
      },
      async authorize(credentials, req) {
        // Add logic here to look up the user from the credentials supplied
        const user = { id: '1', name: 'J Smith', email: 'jsmith@example.com' };

        if (user) {
          // Any object returned will be saved in `user` property of the JWT
          return user;
        } else {
          // If you return null then an error will be displayed advising the user to check their details.
          return null;

          // You can also Reject this callback with an Error thus the user will be sent to the error page with the error message as a query parameter
        }
      },
    }),
  ],
});

export { handler as GET, handler as POST };

Credentials Provider에는 여러가지 옵션이 들어간다.
credentials 부분이 로그인 폼의 내용이다.

authorize 함수에서는 이메일과 패스워드를 체크하여 맞으면 user 객체를 return하고 아니면 null을 return 한다.

yarn dev 로 실행을 하고 http://localhost:3000/api/auth/signin 에 들어가면 기본적으로 form 을 제공해준다.