소셜 로그인(NextAuth.js) 완벽 가이드

npm install next-auth

import NextAuth from "next-auth"
import Google from "next-auth/providers/google"

const handler = NextAuth({
  providers: [
    Google({
      clientId: process.env.GOOGLE_OAUTH_ID!,
      clientSecret: process.env.GOOGLE_OAUTH_SECRET!,
    })
  ],
  // 보안을 위한 필수 비밀 키
  secret: process.env.NEXTAUTH_SECRET,
})

export { handler as GET, handler as POST }

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

export default function AuthContext({ children }) {
  return <SessionProvider>{children}</SessionProvider>;
}

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

export default function Header() {
  const { data: session } = useSession();
  return (
    <header>
      {session ? (
        <button onClick={() => signOut()}>로그아웃</button>
      ) : (
        <button onClick={() => signIn('google')}>구글로 로그인</button>
      )}
    </header>
  );
}

const handler = NextAuth({
  pages: {
    signIn: '/auth/login', // 커스텀 로그인 페이지 경로
  },
  // ... providers 설정
});