NextAuth.js 요약

NextAuth.js란 ?

NextAuth.js는 OAuth, 이메일 인증, 크리덴셜 기반 인증 등 다양한 인증 방식을 지원하며, 사용자 세션 관리, 보안 강화 기능을 제공합니다.

특히 Next.js와의 궁합이 좋아 빠르고 쉽게 인증을 통합할 수 있습니다.

 

---

프로젝트 설정

먼저 Next.js와 TypeScript 프로젝트를 초기화하고 NextAuth.js를 설치하겠습니다.

프로젝트 초기화

npx create-next-app@latest my-nextauth-app --typescript
cd my-nextauth-app
npm install next-auth @types/next-auth

 

NextAuth.js 설정

NextAuth.js를 설정하려면 /pages/api/auth/[...nextauth].ts 파일을 생성해야 합니다.

이 파일은 인증 관련 API 핸들러를 정의하는 곳입니다.

/pages/api/auth/[...nextauth].ts

import NextAuth, { AuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || "",
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || "",
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      // 사용자 세션에 토큰 추가
      session.user.id = token.sub;
      return session;
    },
    async jwt({ token, user }) {
      // JWT에 사용자 정보 추가
      if (user) {
        token.id = user.id;
      }
      return token;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
};

export default NextAuth(authOptions);

 

환경 변수 설정

Google OAuth를 사용하려면 클라이언트 ID와 비밀 키를 설정해야 합니다.

이를 위해 Google Cloud Console에서 프로젝트를 생성하고 OAuth 클라이언트를 생성합니다.

이후, .env.local 파일에 다음 내용을 추가합니다

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=your-nextauth-secret

 

클라이언트에서 인증 상태 확인

NextAuth.js는 클라이언트에서 인증 상태를 확인하거나 로그인/로그아웃을 처리하는 데 필요한 훅과 함수를 제공합니다.

로그인 버튼 구현

// components/AuthButton.tsx
import { signIn, signOut, useSession } from "next-auth/react";

const AuthButton = () => {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        <p>안녕하세요, {session.user?.name}님!</p>
        <button onClick={() => signOut()}>로그아웃</button>
      </div>
    );
  }

  return <button onClick={() => signIn("google")}>Google로 로그인</button>;
};

export default AuthButton;

 

_app.tsx에서 SessionProvider 추가

// pages/_app.tsx
import { SessionProvider } from "next-auth/react";
import type { AppProps } from "next/app";

export default function App({
  Component,
  pageProps: { session, ...pageProps },
}: AppProps) {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}