Next.js 기초 <9. Next.js 15에서 사용자 인증 구현 (JWT, OAuth, NextAuth.js)>

넥스트 Next.js

9. Next.js 15에서 사용자 인증 구현 (JWT, OAuth, NextAuth.js) 

 

안녕하세요! 태마입니다.

Next.js 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

넥스트 Next.js

포스팅 시작하겠습니다 :)

---

 

1. 주제 간단 정리

 

1. Next.js 15에서 사용자 인증이 필요한 이유

웹 애플리케이션에서 **사용자 인증(Authentication)**은 필수적인 기능이다.
Next.js 15에서는 JWT, OAuth, NextAuth.js를 활용하여 보안이 강화된 인증 시스템을 구현할 수 있다.

📌 Next.js 15에서 사용 가능한 인증 방식
✔ JWT (JSON Web Token) → 클라이언트 기반 인증 방식, API 인증에 적합
✔ OAuth (Google, GitHub, Facebook 등) → 소셜 로그인 지원
✔ NextAuth.js → Next.js에서 쉽게 인증을 구현할 수 있는 라이브러리
✔ Session 기반 인증 (Cookies, Token) → 보안이 중요한 서비스에서 활용

✅ 인증 방식 비교

인증 방식설명장점단점추천 사용 예시

JWT (JSON Web Token)	토큰 기반 인증	✅ 서버리스 환경에서 사용 가능	❌ 토큰 탈취 시 보안 문제	API 기반 서비스
OAuth (Google, GitHub 등)	소셜 로그인	✅ 사용자 편리성	❌ 외부 서비스에 의존	SNS, SaaS 플랫폼
NextAuth.js	Next.js 전용 인증 라이브러리	✅ 간편한 설정	❌ 커스터마이징 어려움	일반 웹 서비스

📌 Next.js 15에서는 NextAuth.js를 활용하는 것이 가장 쉬운 방법!

---

2. Next.js 15에서 JWT를 활용한 인증 시스템 구현하기

✅ 1) JWT 패키지 설치

$ npm install jsonwebtoken bcryptjs

📌 JWT 토큰을 생성하고 비밀번호 암호화를 위한 jsonwebtoken과 bcryptjs 설치

✅ 2) JWT 생성 함수 (lib/auth.ts)

import jwt from "jsonwebtoken";

const SECRET_KEY = process.env.JWT_SECRET!;

export function generateToken(user: { id: string; email: string }) {
  return jwt.sign({ id: user.id, email: user.email }, SECRET_KEY, { expiresIn: "1h" });
}

export function verifyToken(token: string) {
  try {
    return jwt.verify(token, SECRET_KEY);
  } catch (error) {
    return null;
  }
}

📌 JWT를 생성하고 검증하는 함수 구현!

✅ 3) 로그인 API 구현 (app/api/auth/login/route.ts)

import prisma from "@/lib/prisma";
import bcrypt from "bcryptjs";
import { generateToken } from "@/lib/auth";

export async function POST(req: Request) {
  const { email, password } = await req.json();
  const user = await prisma.user.findUnique({ where: { email } });

  if (!user || !(await bcrypt.compare(password, user.password))) {
    return new Response(JSON.stringify({ error: "Invalid credentials" }), { status: 401 });
  }

  const token = generateToken(user);
  return new Response(JSON.stringify({ token }), { headers: { "Content-Type": "application/json" } });
}

📌 로그인 시 JWT를 발급하여 클라이언트에 전달!

✅ 4) 인증된 사용자 정보 가져오기 (app/api/auth/me/route.ts)

import { verifyToken } from "@/lib/auth";

export async function GET(req: Request) {
  const token = req.headers.get("Authorization")?.split(" ")[1];
  const user = token ? verifyToken(token) : null;

  if (!user) {
    return new Response(JSON.stringify({ error: "Unauthorized" }), { status: 401 });
  }

  return new Response(JSON.stringify(user), { headers: { "Content-Type": "application/json" } });
}

📌 JWT를 검증하여 로그인된 사용자 정보를 반환하는 API!

✅ 5) 클라이언트에서 로그인 요청 (app/login/page.tsx)

"use client";
import { useState } from "react";

export default function LoginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  async function handleLogin(e: React.FormEvent) {
    e.preventDefault();
    const res = await fetch("/api/auth/login", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password }),
    });

    const data = await res.json();
    if (data.token) {
      localStorage.setItem("token", data.token);
    } else {
      alert("로그인 실패");
    }
  }

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="이메일" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="비밀번호" />
      <button type="submit">로그인</button>
    </form>
  );
}

📌 클라이언트에서 로그인 요청을 보내고, 성공하면 JWT를 저장!

---

✅ 여기까지 Next.js 15에서 JWT를 활용한 인증 시스템 구축 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 소셜 로그인을 추가하려면 어떻게 해야 할까?"
✅ 2부에서 NextAuth.js를 활용한 OAuth 로그인 방법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. NextAuth.js란?

NextAuth.js는 Next.js에서 쉽게 OAuth 및 인증 시스템을 구축할 수 있는 라이브러리이다.
Google, GitHub, Facebook 등 다양한 OAuth 제공자를 지원하며, JWT 기반 세션 관리도 가능하다.

✅ 1) NextAuth.js 설치

$ npm install next-auth

📌 NextAuth.js를 설치하여 OAuth 로그인 기능을 추가할 준비 완료!

✅ 2) NextAuth 설정 (app/api/auth/[...nextauth]/route.ts)

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

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
};

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

📌 Google OAuth를 사용하여 간단하게 로그인 구현 가능!

✅ 3) 로그인 버튼 추가 (app/login/page.tsx)

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

export default function LoginPage() {
  return (
    <div>
      <h1>소셜 로그인</h1>
      <button onClick={() => signIn("google")}>Google 로그인</button>
    </div>
  );
}

📌 NextAuth.js를 활용하여 클릭 한 번으로 Google 로그인 가능!

✅ 4) 로그인된 사용자 정보 가져오기 (app/profile/page.tsx)

import { getServerSession } from "next-auth";
import { authOptions } from "../api/auth/[...nextauth]/route";

export default async function ProfilePage() {
  const session = await getServerSession(authOptions);

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

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

📌 서버 사이드에서 로그인된 사용자 정보를 가져와 프로필 페이지에 표시!

 

✅ 여기까지 Next.js 15에서 JWT 및 NextAuth.js를 활용한 사용자 인증 방법을 배웠습니다!
👉 "그렇다면, Next.js 15에서 상태 관리는 어떻게 해야 할까?"
✅ 다음 회차에서 Next.js 15에서 React Context, Redux, Zustand, SWR을 활용한 상태 관리 방법을 배워봅시다!