[Next-auth]

🔒 Next Auth

Next.js 애플리케이션에서 간단하고 확장 가능한 사용자 인증을 구현하기 위한 라이브러리
여러 인증 공급자와 세션 기반 및 JWT 기반의 인증을 지원

JWT 와 Session 방식의 차이

JWT: 클라이언트측에서 사용자 인증에 필요한 정보를 암호화 한 웹 토큰 저장

Session: 서버측에 사용자의 상태 정보를 저장하고 관리. 클라이언트는 세션 ID 만 가지고 있음

Prisma 를 사용하고 있다면 Prisma adapter 사용하여 손쉽게 연결 가능
Next-auth 회원가입 시 유저정보를 prisma 로 supabase에 저장
https://authjs.dev/getting-started/adapters/prisma

---

공용 인증 시작 전
중복된 계정으로 로그인하는경우 예외처리해주어야함
(e.g.) Gmail: test@gmail.com / Kakao: test@gmail.com
allowDangerousEmailAccountLinking: true 추가해주기

32byte 의 랜덤문자열 생성하고 NEXTAUTH_SECRET 환경변수에 저장
[Convert]::ToBase64String([System.Text.Encoding]::UTF8.GetBytes([guid]::NewGuid().ToString() + [guid]::NewGuid().ToString())).Substring(0, 32)

구글 인증 시작하기

https://console.cloud.google.com/apis/credentials
1. OAuth 동의 화면탭 설정
2. 사용자 인증 정보탭에서 OAuth 클라이언트 ID 설정
3. 설정된 GOOGLE_CLIENT_ID 와 GOOGLE_CLIENT_SECRET 환경변수에 저장

네이버 인증 시작하기

https://developers.naver.com/main/
1. 네이버 로그인 배너 클릭 > 오픈 API 이용 신청 > 서비스 URL 에 호스트 추가
2. Callback URL 에 ~/api/auth/callback/naver 추가
3. 클라이언트 아이디 및 시크릿 키 NAVER_CLIENT_ID, NAVER_CLIENT_SECRET 환경변수에 저장

카카오 인증 시작하기

https://developers.kakao.com/
※ Prisma Schema 의 Account 모델에 refresh_token_expires_in 필드를 옵셔널하게 추가해 주어야함
1. 내 애플리케이션 > 앱 설정 > 앱 키 REST API 키를 KAKAO_CLIENT_ID 환경 변수에 저장
2. 내 애플리케이션 > 제품 설정 > 카카오 로그인 > 보안 발급받고 코드를 KAKAO_CLIENT_SECRET 환경 변수에 저장하고 카카오 로그인탭 들어가서 활성화 및 redirect url ~/api/auth/callback/kakao 설정
3. 동의항목 탭에서 개인정보 수집할 정보들 설정 (email 은 받지 못해서 prisma schema email 부분 optional 로 줌)

api/auth/[...nextauth]/route.ts 전체 코드

export const authOption: NextAuthOptions = {
  session: {
    strategy: "jwt" as const,
    maxAge: 60 * 60 * 24,
    updateAge: 60 * 60 * 2,
  },
  adapter: PrismaAdapter(prisma) as any,
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
    }),
    NaverProvider({
      clientId: process.env.NAVER_CLIENT_ID || "",
      clientSecret: process.env.NAVER_CLIENT_SECRET || "",
    }),
    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID || "",
      clientSecret: process.env.KAKAO_CLIENT_SECRET || "",
    }),
  ],
  ],
  pages: {
    signIn: "/users/signin",
  },
  callbacks: {
    // useSession 의 data 에서 id 도 불러와지도록 설정
    session: ({ session, token }) => ({
      ...session,
      user: {
        ...session.user,
        id: token.sub,
      },
    }),
    jwt: async ({ user, token }) => {
      if (user) {
        token.sub = user.id;
      }
      return token;
    },
  },
};
const handler = NextAuth(authOption);

export { handler as GET, handler as POST };

// signInPage.tsx
signIn("google 혹은 naver 혹은 kakao", { callbackUrl: "/" });

---

로그인 유무 체크하여 url 접속 허용

//middleware.ts

export { default } from "next-auth/middleware";

// 로그인 정보 없이 /mypage 로 들어온 경우 로그인 페이지로 리다이렉트
export const config = { matcher: ["/mypage"] };