Next.js 인증-JS 튜토리얼-php.cn

Next.js Authentication

Next.js 15부터 특히 고급 서버 구성 요소, Actions API 및 미들웨어 기능을 통해 인증 처리가 더욱 강력하고 유연해졌습니다. 이 기사에서는 서버 구성 요소, 미들웨어, 작업 및 세션 관리와 같은 필수 주제를 다루면서 Next.js 15 애플리케이션에서 인증을 구현하는 모범 사례를 살펴보겠습니다.

Next.js 15는 서버 측 렌더링 기능을 향상시키고 특히 서버 구성 요소 및 Actions API의 맥락에서 인증 처리를 위한 새로운 도구를 도입합니다. 서버 구성 요소를 사용하면 중요한 데이터를 클라이언트에 노출하지 않고도 서버에서 인증을 안전하게 관리할 수 있으며 Actions API를 사용하면 원활한 서버 통신이 가능합니다. 미들웨어는 경로를 보호하고 사용자 권한을 동적으로 확인하여 인증 흐름을 더욱 안전하고 사용자 친화적으로 만드는 데 도움이 됩니다.

인증 설정

시작하려면 앱에 적합한 인증 전략을 선택하세요. 일반적인 접근 방식은 다음과 같습니다.

JWT(JSON 웹 토큰): 토큰이 클라이언트에 저장되는 상태 비저장 앱에 이상적입니다.
세션 기반 인증: 서버에 세션 저장이 있는 앱에 적합합니다.
OAuth: 타사 제공업체(Google, GitHub 등)와의 통합용.

1. 인증을 위해 next-auth 설치

OAuth가 필요한 애플리케이션의 경우 Next.js는 next-auth와 잘 통합되어 세션 및 토큰 관리가 단순화됩니다.

npm install next-auth

로그인 후 복사

/app/api/auth/[...nextauth]/route.ts를 사용하여 Next.js 15 설정에서 구성하세요.

// /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!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

export default NextAuth(authOptions);

로그인 후 복사

인증을 위해 서버 구성 요소 사용

Next.js 15에서는 서버 구성 요소를 사용하여 서버에서 구성 요소를 렌더링하고 데이터에 대한 액세스를 안전하게 제어할 수 있습니다.

서버 구성 요소에서 사용자 세션 가져오기: 이렇게 하면 클라이언트 측 상태에 대한 종속성이 줄어들고 클라이언트에서 민감한 데이터가 노출되는 것을 방지할 수 있습니다. 서버 구성 요소에서 직접 사용자 세션 데이터를 가져올 수 있습니다.
서버 구성요소의 서버측 인증 확인 예:

   // /app/dashboard/page.tsx
   import { getServerSession } from "next-auth/next";
   import { authOptions } from "../api/auth/[...nextauth]/route";
   import { redirect } from "next/navigation";

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

     if (!session) {
       redirect("/auth/signin");
     }

     return (
       <div>
         <h1>Welcome, {session.user?.name}</h1>
       </div>
     );
   }

로그인 후 복사

여기서 getServerSession은 사용자의 세션 데이터를 서버에서 안전하게 가져옵니다. 유효한 세션이 없으면 리디렉션 기능이 사용자를 로그인 페이지로 보냅니다.

작업으로 인증 처리

Next.js 15의 Actions API는 클라이언트에서 직접 서버 기능과 상호 작용하는 방법을 제공합니다. 이는 로그인, 로그아웃 및 등록 작업에 특히 유용합니다.

예: 로그인 작업 생성

npm install next-auth

로그인 후 복사

구성 요소에서 로그인 작업 사용

// /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!,
    }),
  ],
  pages: {
    signIn: "/auth/signin",
  },
};

export default NextAuth(authOptions);

로그인 후 복사

loginAction은 서버 작업으로 안전하게 정의되며 클라이언트는 민감한 데이터를 노출하지 않고 이를 실행할 수 있습니다.

인증 가드를 위한 미들웨어 구현

Next.js 15의 미들웨어는 페이지를 로드하기 전에 서버에서 인증 상태를 확인하여 경로를 보호하는 강력한 방법을 제공합니다.

경로 보호를 위한 미들웨어 예

/dashboard, /profile 등의 페이지를 보호하려면 middleware.ts에 미들웨어를 생성하세요.

   // /app/dashboard/page.tsx
   import { getServerSession } from "next-auth/next";
   import { authOptions } from "../api/auth/[...nextauth]/route";
   import { redirect } from "next/navigation";

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

     if (!session) {
       redirect("/auth/signin");
     }

     return (
       <div>
         <h1>Welcome, {session.user?.name}</h1>
       </div>
     );
   }

로그인 후 복사

세션 관리 및 보안 모범 사례

보안 세션을 유지하고 사용자 데이터를 보호하는 것은 모든 인증 흐름에서 매우 중요합니다.

토큰 저장을 위해 HTTP 전용 쿠키 사용:
- localStorage 또는 sessionStorage에 JWT를 저장하지 마세요. XSS 공격을 방지하려면 HTTP 전용 쿠키를 사용하세요.
세션 만료 및 새로 고침 토큰:
- 단기 액세스 토큰과 갱신 토큰을 구현하여 세션의 보안을 유지하세요. 이를 위해 next-auth의 세션 관리 기능을 사용할 수 있습니다.
역할 기반 액세스 제어(RBAC):
- 사용자에게 역할을 할당하고 해당 역할에 따라 작업을 승인합니다. 다음 인증에서는 세션 개체를 사용하거나 미들웨어 및 작업을 통해 이를 수행할 수 있습니다.
사이트 간 요청 위조(CSRF) 보호:
- CSRF 보호를 사용하여 악성 사이트의 무단 요청을 방지하세요. next-auth에는 기본적으로 CSRF 보호가 포함되어 있습니다.
보안 헤더 및 HTTPS:
- 항상 HTTPS를 통해 애플리케이션을 제공하고 Content-Security-Policy, Strict-Transport-Security 및 X-Frame-Options와 같은 보안 헤더를 설정하세요.