8단계: 사용자 인증과 NextAuth 도입

사용자 인증과 NextAuth 도입

Next.js는 NextAuth.js 라이브러리를 통해 로그인, 소셜 인증, 세션 관리 등을 간편하게 구현할 수 있습니다.

8-1. NextAuth란?

Next.js 전용 인증 라이브러리
Google, GitHub, Email 등 다양한 로그인 지원
JWT 기반 세션 관리
API Routes(/pages/api/auth)를 통해 백엔드 없이도 인증 가능

8-2. 설치 및 초기 설정

npm install next-auth

# API 라우트 파일 생성
touch pages/api/auth/[...nextauth].js

// pages/api/auth/[...nextauth].js
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

.env.local 설정:

GOOGLE_CLIENT_ID=xxx
GOOGLE_CLIENT_SECRET=yyy
NEXTAUTH_URL=http://localhost:3000

8-3. 로그인/로그아웃 버튼 구현

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

export default function AuthButton() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        <p>환영합니다, {session.user.name}!</p>
        <button onClick={() => signOut()}>로그아웃</button>
      </>
    );
  }

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

8-4. 세션 사용 예시

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

export default function Profile() {
  const { data: session } = useSession();

  if (!session) return <p>로그인 필요</p>;

  return (
    <div>
      <p>이름: {session.user.name}</p>
      <p>이메일: {session.user.email}</p>
    </div>
  );
}

8-5. _app.js에 SessionProvider 등록

// pages/_app.js
import { SessionProvider } from 'next-auth/react';

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

세션 정보를 모든 페이지에서 사용할 수 있도록 구성

8-6. 보호 페이지 구현 (로그인 필요 시 리다이렉트)

// pages/protected.js
import { getSession } from 'next-auth/react';

export async function getServerSideProps(context) {
  const session = await getSession(context);
  if (!session) {
    return {
      redirect: { destination: '/api/auth/signin', permanent: false },
    };
  }
  return { props: { session } };
}

SSR에서 세션이 없으면 로그인 페이지로 이동

요약

NextAuth는 소셜 인증 및 세션 처리를 쉽게 구현할 수 있는 Next.js 인증 솔루션입니다.
Google 인증은 환경변수 설정과 API 라우트 설정만으로 구현 가능
useSession 훅으로 로그인 상태 확인 가능
_app.js에 SessionProvider 등록 후 모든 컴포넌트에서 사용 가능
보호 페이지는 getSession을 이용해 SSR에서 접근 제한 가능

심화학습

Q1. NextAuth에서 로그인한 사용자 데이터를 DB에 저장하려면 어떤 설정이 추가되어야 할까?

A: Prisma 등 Adapter를 설정하고, 로그인 시 callbacks를 활용해 사용자 정보를 DB에 저장하거나 가공할 수 있습니다.

Q2. 소셜 로그인 외에 자체 이메일/비밀번호 인증을 만들려면 어떤 전략이 필요할까?

A: CredentialsProvider를 사용하고, authorize 함수에서 사용자의 이메일/비밀번호를 검증하는 로직을 추가하면 됩니다.

Q3. 로그인 세션을 로컬 스토리지가 아닌 쿠키 기반으로 유지하려면 어떤 구조가 필요할까?

A: NextAuth는 기본적으로 쿠키 기반 세션을 사용합니다. 보안 옵션 설정(cookies, session.strategy, jwt)을 통해 세부 제어가 가능합니다.