NextAuth, 를 사용한 소셜 로그인 기능 구현 순서

먼저, NextAuth 설치

pnpm add next-auth

1️⃣ NextAuth 설정 파일 (app/api/auth/[...nextauth].ts)

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import FacebookProvider from "next-auth/providers/facebook";

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID!,
      clientSecret: process.env.FACEBOOK_CLIENT_SECRET!,
    }),
  ],
  callbacks: {
    async session({ session, token }) {
      session.user.id = token.sub;
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

✔️ GoogleProvider, FacebookProvider → 소셜 로그인 Provider 추가
✔️ callbacks.session → 로그인 후 세션 정보를 설정
✔️ NEXTAUTH_SECRET → 보안을 위한 암호화 키

2️⃣ NextAuth 설정 파일 (app/api/auth/[...nextauth].ts)

"use client";

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

const LoginButton = () => {
  return (
    <div className="flex flex-col gap-2">
      <button
        onClick={() => signIn("google")}
        className="bg-red-500 text-white px-4 py-2 rounded"
      >
        Google 로그인
      </button>
      <button
        onClick={() => signIn("facebook")}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Facebook 로그인
      </button>
    </div>
  );
};

export default LoginButton;

✔️ signIn("google") → 구글 로그인 실행
✔️ signIn("facebook") → 페이스북 로그인 실행

3️⃣ 로그인 페이지 (app/(auth)/login/page.tsx)

"use client";

import LoginButton from "@src/components/LoginButton";

const LoginPage = () => {
  return (
    <div className="flex h-screen flex-col items-center justify-center">
      <h1 className="text-2xl font-bold mb-4">로그인</h1>
      <LoginButton />
    </div>
  );
};

export default LoginPage;

4️⃣ 로그인 후 대시보드 페이지 (app/dashboard/page.tsx)

"use client";

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

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

  if (!session) {
    return <p>로그인이 필요합니다.</p>;
  }

  return (
    <div className="flex h-screen flex-col items-center justify-center">
      <h1 className="text-2xl font-bold">환영합니다, {session.user?.name}님!</h1>
      <button
        onClick={() => signOut()}
        className="mt-4 bg-gray-500 text-white px-4 py-2 rounded"
      >
        로그아웃
      </button>
    </div>
  );
};

export default Dashboard;

✔️ useSession() → 현재 로그인 상태 확인
✔️ signOut() → 로그아웃 기능

5️⃣ 환경변수 설정 (.env.local)

GOOGLE_CLIENT_ID=구글에서_발급받은_client_id
GOOGLE_CLIENT_SECRET=구글에서_발급받은_client_secret
FACEBOOK_CLIENT_ID=페이스북에서_발급받은_client_id
FACEBOOK_CLIENT_SECRET=페이스북에서_발급받은_client_secret
NEXTAUTH_SECRET=임의의_랜덤_문자열
NEXTAUTH_URL=http://localhost:3000

✔️ 환경변수를 설정해 보안 강화
✔️ NEXTAUTH_SECRET → 보안 강화를 위해 필수