🏡 숙박 예약 플랫폼: NextAuth 사용자 인증 구현하기 (4)

---

본 글은 패스트캠퍼스 – Next.js 실무 강의 중 Part 8. Next.js 13으로 숙박 예약 플랫폼 만들기를 수강하며 학습한 내용을 정리한 것입니다. 🙏🏻

---

👋🏻 NextAuth 사용자 인증 구현하기

▪️ NextAuth란?

NextAuth.js는 OAuth 기반의 인증 플로우를 쉽게 구성할 수 있는 라이브러리다. 간단한 설정만으로도 소셜 로그인, 세션 관리, 사용자 정보 저장까지 구현할 수 있으며, Next.js와의 호환성도 뛰어나다.

• NextAuth.js 공식문서

주요 특징

• 간편한 설정: 최소한의 설정만으로 로그인 기능 빠르게 구성 가능
• 다양한 인증 제공자: Google, Naver, Kakao 등 소셜 로그인 지원
• 보안 기능 내장: 세션, JWT, CSRF 등 자동 처리
• DB 연동 가능: 사용자 계정·세션 정보 저장 및 활용 가능
• Next.js 완전 호환: CSR과 SSR 모두에서 안정적으로 작동

콜백(callback) 함수 제공
NextAuth는 인증 흐름을 세부적으로 제어할 수 있도록 콜백 함수(callbacks)를 제공한다. 인증 결과 처리, 리디렉션, 세션·JWT 데이터 구성 등 다양한 시점에 개입할 수 있다.

callbacks: {
  signIn,     // 로그인 성공 여부 결정
  redirect,   // 로그인 후 리디렉션 경로 설정
  session,    // 세션에 전달할 데이터 수정
  jwt         // JWT 토큰 발급/갱신 시 데이터 조작
}

JWT vs 세션 기반 인증 방식
NextAuth는 세션 기반과 JWT 기반 인증 방식을 모두 지원한다.

🔐 JWT vs 세션 기반 인증 방식 차이

• JWT (JSON Web Token)
• 클라이언트에 저장되는 무상태(stateless) 토큰
• 요청마다 토큰을 헤더에 포함시켜 사용자 식별
• 서버 세션이 필요 없어 확장성이 좋음
• 단 토큰이 탈취될 경우 위험하므로 만료 시간과 저장 위치에 주의해야 함

• 세션 (Session)
• 사용자 상태를 서버에서 직접 관리
• 클라이언트에는 세션 ID만 저장
• 비교적 안전하지만 서버 자원이 소모됨
• 클러스터 환경에서는 Redis 등으로 세션 공유 필요

---

▪️ NextAuth 기본 설정

• NextAuth.js - Getting Started

1. 패키지 설치

yarn add next-auth

2. 환경변수 추가

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=복잡하고_예측불가능한_랜덤문자열

3. 인증 핸들러(Route) 파일 생성
App Router 기준으로 app/api/auth/[...nextauth]/route.ts 경로에 파일을 생성한다.

4. 인증 공급자 및 옵션 설정
생성한 route 파일 내부에 Google, Naver 등 원하는 provider를 등록하고 콜백 및 세션 설정을 추가한다.

5. route.ts 파일에서 인증 공급자 등록
생성한 route 파일 내부에 Google, Naver 등 원하는 provider를 등록하고 콜백 및 세션 설정을 추가한다. clientId, clientSecret은 환경변수에서 불러온다.

GoogleProvider({
  clientId: process.env.GOOGLE_CLIENT_ID || '',
  clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
})

6. SessionProvider로 인증 정보 전역 적용
클라이언트 환경에서 로그인 상태를 전역에서 사용할 수 있도록 SessionProvider를 설정한다. app/providers.tsx 또는 layout.tsx 등 최상위 컴포넌트에 등록한다

import { SessionProvider } from 'next-auth/react'

💡 로그인 상태 확인과 세션 관리
로그인 여부나 사용자 정보를 확인하려면 useSession() 훅을 사용하면 된다.
status로 인증 상태를 판단하고 session 객체로 사용자 정보에 접근할 수 있다.

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

if (status === 'authenticated') {
  return <p>Welcome, {session.user.email}</p>
}

return <Link href="/api/auth/signin">Sign in</Link>

💡 인증이 필요한 페이지 보호하기 (Middleware 설정)
NextAuth는 middleware를 통해 특정 경로에 로그인된 사용자만 접근할 수 있도록 제어할 수 있다. (ex. 마이페이지, 개인정보 수정 등)

---

• NextAuth.js - Middleware

1. .env에 NEXTAUTH_SECRET을 반드시 설정
2. /src/middleware.ts 파일 생성 후 아래와 같이 작성

// middleware.ts
export { default } from 'next-auth/middleware'

export const config = {
  matcher: ['/users/mypage', '/users/info', '/users/edit'],
}

---

▪️ NextAuth + Prisma로 사용자 정보 DB에 자동 저장하기

NextAuth는 기본적으로 인증 상태만 관리하지만, PrismaAdapter를 함께 사용하면 사용자 계정, 소셜 계정, 세션 정보를 데이터베이스에 자동으로 저장할 수 있다. 이때 필요한 모델은 User, Account, Session, VerificationToken이며, schema.prisma 파일에 정의한 뒤 prisma migrate로 반영하면 된다.

1. Prisma Adapter 설치

yarn add @auth/prisma-adapter

2. Adapter 적용
next-auth 설정 파일(route.ts)에서 아래처럼 adapter를 등록하면 된다.

import { PrismaAdapter } from '@auth/prisma-adapter'
import prisma from '@/db'

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [...],
  ...
}

3. Prisma 스키마 정의 및 마이그레이션
PrismaAdapter를 사용하려면 next-auth가 요구하는 4가지 모델을 schema.prisma에 정의해야 한다. (전체 스키마 구조는 공식 문서에서 확인할 수 있다.)

• User / Account / Session / VerificationToken
• NextAuth.js - Prisma Adapter

---

▪️ Google 로그인 연동하기

구글 개발자 콘솔에서 클라이언트를 생성하고, 발급받은 Client ID, Client Secret을 .env에 등록한다. NextAuth 설정 파일(route.ts)에서 GoogleProvider를 추가하면 연동이 완료된다.

• Google Cloud
• NextAuth.js - Google Provider

1. Google Cloud 클라이언트 생성
프로젝트 생성 후 사용자 인증 정보 > OAuth 2.0 클라이언트 ID 생성 후 생성된 Client ID와 Client Secret을 .env에 추가한다.

GOOGLE_CLIENT_ID=...
GOOGLE_CLIENT_SECRET=...

승인된 리디렉션 URI에 아래 경로 추가한다.

http://localhost:3000/api/auth/callback/google

---

2. next-auth에 GoogleProvider 등록
app/api/auth/[...nextauth]/route.ts 파일에 아래 코드를 추가한다.

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID || '',
      clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
    }),
  ],
  ...
}

• adapter: PrismaAdapter(prisma)를 사용하면 로그인한 사용자의 정보가 데이터베이스에 자동으로 저장된다. User, Account, Session 테이블에 필요한 정보가 각각 들어가기 때문에 별도로 사용자 정보를 관리하는 로직을 작성하지 않아도 된다.
• 구글 로그인을 적용하려면 GoogleProvider를 추가해야 한다. 구글 개발자 콘솔에서 발급받은 clientId와 clientSecret 값을 설정하면 된다.
• NextAuth는 기본 로그인 화면도 제공한다. 로그인 페이지를 구성한 /users/signin 페이지를 만들어 연결했다.
• 기본적으로 NextAuth는 로그인한 사용자의 이메일과 이름 정도만 세션에 담아준다. DB에 저장된 사용자 ID도 클라이언트에서 사용할 필요가 있어 callback을 설정하여 세션에 user.id 값을 추가로 포함시켰다.

로그인 페이지에서는 signIn() 함수를 사용해 사용자가 로그인 버튼을 클릭하면 OAuth 인증이 시작되도록 구성했다. 로그인에 성공하면, 지정한 callbackUrl(여기서는 메인 페이지 /)로 자동 이동하도록 처리했다.

---

▪️ Naver·Kakao 로그인 연동하기

• NAVER Developers
• kakao developers

네이버와 카카오 소셜 로그인도 함께 구현했다. 각 플랫폼의 개발자 사이트(NAVER Developers, Kakao Developers)에 앱을 등록한 뒤, 발급받은 Client ID, Secret, Redirect URI 설정 후 provider 옵션에 작성해주면 구글 로그인과 동일한 방식으로 연동할 수 있다.

다만 플랫폼마다 반환되는 데이터 구조가 조금씩 달라 prisma의 스키마도 그에 맞게 조정이 필요하다. 예를 들어 카카오의 경우 refresh_token_expires_in과 같은 필드가 따로 전달되기 때문에 해당 값을 저장하고자 한다면 Account 모델에 해당 필드를 추가해줘야 한다. 이처럼 각 소셜 로그인 제공자의 반환 값에 따라 스키마를 조정해야 하므로, 공식 문서를 참고해 필드 정의를 명확히 해두는 것이 중요하다.

실제로 Supabase에 생성된 사용자 및 로그인 관련 테이블은 아래와 같다. 소셜 로그인(Google, Naver, Kakao 등)을 진행한 후 사용자 정보가 User, Account, Session 테이블에 자동으로 저장되는 것을 확인할 수 있었고, Prisma Adapter를 통해 NextAuth와의 연동도 문제없이 잘 작동했다. 🤩

---

▪️ 세션 기반 마이페이지 구성하기

로그인한 사용자의 정보를 서버에서 안전하게 조회할 수 있도록 API를 구현했다.
getServerSession()을 통해 현재 세션 정보를 가져오고, 인증된 사용자라면 Prisma를 사용해 사용자 정보와 연결된 소셜 계정(Account) 정보까지 함께 조회한다.

응답은 NextResponse.json()으로 반환하며 인증되지 않은 경우에는 401 Unauthorized 상태 코드와 함께 에러 메시지를 전달한다.

클라이언트 측에서는 useSession() 훅을 활용해 로그인된 사용자 정보를 가져오고, 마이페이지 상단에 사용자 이름과 이메일을 표시했다.

마이페이지에는 사용자 정보를 상세히 보여주는 개인정보 페이지를 따로 구성했다.
이 페이지는 React Query를 활용해 서버에서 사용자 데이터를 비동기적으로 불러오며 enabled 옵션을 설정해 로그인된 경우에만 API가 호출되도록 했다.

const { data: user } = useQuery('user', fetchUser, {
  enabled: status === 'authenticated',
})

불러온 정보는 이름, 이메일, 프로필 이미지, 주소, 전화번호, 로그인한 SNS 등으로 구성되며 페이지 하단에는 로그아웃 기능도 함께 제공한다. signOut() 함수 호출 시 세션이 종료되고, 메인 페이지(/)로 자동 이동된다.

---

▪️ 사용자 정보 수정 폼 구현하기

• tailwindcss Form Layouts
  기본적인 폼 UI는 Tailwind CSS에서 제공하는 Form Layout 예제를 참고해 구현했다. 그리드 기반으로 구성된 입력 필드와 섹션 제목 스타일링 등은 유틸리티 클래스를 그대로 활용해 빠르게 구축할 수 있었다.

조회된 사용자 정보는 useEffect를 통해 useState로 구성된 폼 상태(name, email, phone, address)에 초기값으로 할당했다.
API 호출 시에는 refetchOnMount: false 옵션을 사용해 리렌더링 시 중복 호출을 방지했다.

사용자가 필드를 수정하면 onChange 이벤트에서 각 필드의 상태를 업데이트하고, '수정하기' 버튼 클릭 시 axios.put()으로 /api/users에 수정된 데이터를 전송한다.

요청이 성공하면 react-hot-toast로 성공 메시지를 띄우고, useRouter().replace()를 통해 다시 개인정보 페이지(/users/info)로 이동시킨다.