NextAuth: 소셜 로그인 및 세션 처리

2024.05.19

next-auth란

next-auth는 다양한 로그인 방식을 제공하는 인증 라이브러리이다. 다양한 소셜 로그인 방식을 제공하며, 이메일/비밀번호 로그인 방식도 제공한다.

공식 문서에는 다음 3가지 특징이 있다고 한다.

Easy 여러 로그인 방식을 플러그인 형식으로 제공하며, 간단한 설정으로 사용할 수 있다.
Flexible 서버리스용으로 구축되어서 어디에서든 사용할 수 있게 한다.
Secure 서명되고 접두사가 붙은 서버 전용 쿠키, HTTP POST + CSRF 토큰 검증, JWS/JWE/JWK를 사용한 JWT, 탭 동기화, 자동 재검증, 연결 유지 등 기능을 제공한다. 클라이언트측 코드에 의존하지 않는다.

설치하기

database로는 무료로 사용가능한 Firebase를 사용했다. next-auth에서는 firebase adapter를 제공하기에 쉽게 개발을 할 수 있다.

소셜 로그인으로는 Google과 Kakao로그인을 사용했다.

next-auth 설치

pnpm install next-auth firebase-admin @auth/firebase-adapter

api 만들기

app/api/auth/[…nextAuth]/route.ts

import { authOptions } from '@/utils';
import NextAuth from 'next-auth/next';

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

app/utils/authOptions.ts

import { AuthOptions } from 'next-auth';
import { FirestoreAdapter } from '@auth/firebase-adapter';
import { cert } from 'firebase-admin/app';
import { Adapter } from 'next-auth/adapters';
import GoogleProvider from 'next-auth/providers/google';
import KakaoProvider from 'next-auth/providers/kakao';

export const authOptions: AuthOptions = {
  providers: [
    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID!,
      clientSecret: process.env.KAKAO_CLIENT_SECRET!,
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  adapter: FirestoreAdapter({
    credential: cert({
      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY!.replace(/\\n/g, '\n'),
    }),
  }) as Adapter,
  callbacks: {
    session({ session, token, user }) {
      session.id = user.id;
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
};

오류 error Can't resolve 'net' 절대 경로로 api에 사용되는 next-auth파일을 utils폴더에 넣어서 내보내니 client, server에서 둘다 사용가능한 파일이 되었다. nextjs 에서는 server와 client를 나누어 주어서 authOptions를 내보낼때 client 전용 파일과 같이 내보내면 안된다.

./next-auth.d.ts

import NextAuth from 'next-auth';

declare module 'next-auth' {
  interface Session {
    id: string;
  }
}

next-auth에서 session에 id를 추가하기 위한 타입 선언

로그인 세션 사용하기

providers.tsx

'use client';
import { Session } from 'next-auth';
import { SessionProvider } from 'next-auth/react';

interface ProvidersProps {
  children: React.ReactNode;
  session?: Session;
}

export function Providers({ children, session }: ProvidersProps) {
  return <SessionProvider session={session}>{children}</SessionProvider>;
}

위 Provider를 루트 레이아웃에 추가하여 사용한다.

로그인과 로그아웃

loginHanlder.tsx

import { signIn } from 'next-auth/react';

type LoginType = 'google' | 'kakao';

export const loginHandler = (variant: LoginType) => {
  signIn(variant, { callbackUrl: '/' });
};

loginHanlder.tsx

import { signOut } from 'next-auth/react';

// ...생략
reutnr (
  <button onClick={() => signOut()}>로그아웃</button>
)

세션 처리

client에서 로그인하고 session 확인하기

import { loginHandler } from '@/utils';
import { signOut, useSession } from 'next-auth/react';

const { data: session, status } = useSession();

<button onClick={() => loginHandler('google')}>구글 로그인</button>
<button onClick={() => loginHandler('kakao')}>카카오 로그인</button>
<button onClick={() => signOut()}>로그아웃</button>

server에서 사용하는 방법 (비로그인시 페이지 자체를 접근을 막을 수 있다)

import { getServerSession } from "next-auth";
import { authOptions } from "@/utils/server";

export default async function Page() {
  const session = await getServerSession(authOptions);

  if (!session) {
    return redirect;
  }

  return; //... 생략
}