Next.js 앱 라우터에서 Auth.js를 사용한 사용자 인증-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Next.js 앱 라우터에서 Auth.js를 사용한 사용자 인증

Susan Sarandon

Nov 12, 2024 am 03:05 AM

초기 설정

설치하다

npm install next-auth@beta

로그인 후 복사

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

로그인 후 복사

구성

NextAuthConfig 설정

// src/auth.ts
import NextAuth from "next-auth"

export const config = {
  providers: [],
}

export const { handlers, signIn, signOut, auth } = NextAuth(config)

로그인 후 복사

src 폴더
에 넣어야 합니다.

공급자는 Auth.js에서 사용자 로그인에 사용할 수 있는 서비스를 의미합니다. 사용자가 로그인할 수 있는 방법은 4가지가 있습니다.

내장 OAuth 제공자(예: Github, Google 등...) 사용
맞춤형 OAuth 공급자 사용
이메일 사용
자격증명 사용

https://authjs.dev/reference/nextjs#providers

경로 처리기 설정

// src/app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

로그인 후 복사

이 파일은 Next.js App Router를 사용하여 경로 핸들러를 설정하는 데 사용됩니다.

미들웨어

// src/middleware.ts
import { auth } from "@/auth"

export default auth((req) => {
　　// Add your logic here
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],　//  It's default setting
}

로그인 후 복사

src 폴더 안에 작성하세요.
src 폴더 외부에 작성하면 미들웨어가 작동하지 않습니다.

미들웨어는 요청이 완료되기 전에 코드를 실행할 수 있게 해주는 기능입니다. 이는 애플리케이션 전체에서 경로를 보호하고 인증을 처리하는 데 특히 유용합니다.

Matcher는 미들웨어가 적용되어야 하는 경로를 지정하는 구성 옵션입니다. 필요한 경로에서만 미들웨어를 실행하여 성능을 최적화하는 데 도움이 됩니다.
예시 매처: ['/dashboard/:path*'] 대시보드 경로에만 미들웨어를 적용합니다.

https://authjs.dev/getting-started/session-management/protecting?framework=express#nextjs-middleware

서버 측 구성 요소에서 세션 가져오기

// src/app/page.tsx
import { auth } from "@/auth"
import { redirect } from "next/navigation"

export default async function page() {
  const session = await auth()

  if (!session) {
    redirect('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

로그인 후 복사

클라이언트 측 구성 요소에서 세션 가져오기

// src/app/page.tsx
"use client"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"

export default async function page() {
  const { data: session } = useSession()
  const router = useRouter()

  if (!session.user) {
    router.push('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

// src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { SessionProvider } from "next-auth/react"

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

로그인 후 복사

폴더 구조

/src
  /app
    /api
      /auth
        [...nextauth]
          /route.ts  // Route Handler
    layout.tsx
    page.tsx

  auth.ts  // Provider, Callback, Logic etc
  middleware.ts  // A function before request

로그인 후 복사

인증 구현: 자격 증명 및 Google OAuth

프리즈마 설정

// prisma/schema.prisma

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  password      String?
  accounts      Account[]
  sessions      Session[]
}

model Account {
  // ... (standard Auth.js Account model)
}

model Session {
  // ... (standard Auth.js Session model)
}

// ... (other necessary models)

로그인 후 복사

// src/lib/prisma.ts

import { PrismaClient } from "@prisma/client"

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient }

export const prisma = globalForPrisma.prisma || new PrismaClient()

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma

로그인 후 복사

신임장

자격증명은 인증이라는 맥락에서 사용자가 제공하는 사용자의 신원을 확인하는 방법, 일반적으로 사용자 이름(또는 이메일)과 비밀번호를 의미합니다.

src/auth.ts에 자격 증명을 추가할 수 있습니다.

npm install next-auth@beta

로그인 후 복사

어댑터:

인증 시스템을 데이터베이스 또는 데이터 스토리지 솔루션에 연결하는 모듈입니다.

비밀:

토큰 해시, 쿠키 서명/암호화, 암호화 키 생성에 사용되는 임의의 문자열입니다.
보안에 매우 중요하므로 비밀로 유지해야 합니다.
이 경우에는 AUTH_SECRET 환경 변수를 사용하여 설정됩니다.

페이지:

이 개체를 사용하면 인증 페이지의 URL을 사용자 정의할 수 있습니다.
귀하의 예에서 signIn: '/login'은 로그인 페이지가 기본 '/api/auth/signin' 대신 '/login' 경로에 있음을 의미합니다.

세션:

세션 처리 방법을 구성합니다.
전략: "jwt"는 데이터베이스 세션 대신 세션 관리에 JSON 웹 토큰이 사용된다는 의미입니다.

콜백:

인증 흐름의 다양한 지점에서 호출되는 함수로, 프로세스를 맞춤설정할 수 있습니다.

jwt 콜백:

JWT가 생성되거나 업데이트될 때 실행됩니다.
귀하의 코드에서는 사용자 정보(ID, 이메일, 이름)를 토큰에 추가합니다.

세션 콜백:

세션을 확인할 때마다 실행됩니다.
귀하의 코드는 토큰의 사용자 정보를 세션 개체에 추가하고 있습니다.

Google OAuth 제공업체 추가

Google OAuth 애플리케이션 설정

GCP 콘솔에서 새 OAuth 클라이언트 ID 만들기 > API 및 서비스 > 자격 증명

User Authentication with Auth.js in Next.js App Router

생성한 후에는 나중에 사용할 수 있도록 클라이언트 ID와 클라이언트 비밀번호를 저장하세요.

리디렉션 URI 설정

로컬에서 작업할 때는 http://localhost:3000/api/auth/callback/google을 설정하세요

프로덕션 환경에서는 http://localhost:3000을 https://------로 바꾸면 됩니다.

User Authentication with Auth.js in Next.js App Router

환경 변수 설정

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

로그인 후 복사

설치 공급자

// src/auth.ts
import NextAuth from "next-auth"

export const config = {
  providers: [],
}

export const { handlers, signIn, signOut, auth } = NextAuth(config)

로그인 후 복사

https://authjs.dev/getting-started/authentication/oauth

로그인 및 회원가입 페이지 생성

// src/app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers

로그인 후 복사

// src/middleware.ts
import { auth } from "@/auth"

export default auth((req) => {
　　// Add your logic here
}

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],　//  It's default setting
}

로그인 후 복사

// src/app/page.tsx
import { auth } from "@/auth"
import { redirect } from "next/navigation"

export default async function page() {
  const session = await auth()

  if (!session) {
    redirect('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

로그인 후 복사

// src/app/page.tsx
"use client"
import { useSession } from "next-auth/react"
import { useRouter } from "next/navigation"

export default async function page() {
  const { data: session } = useSession()
  const router = useRouter()

  if (!session.user) {
    router.push('/login')
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <img src={session.user.image} alt="User Avatar" />
    </div>
  )
}

// src/app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
import { SessionProvider } from "next-auth/react"

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
        <SessionProvider>
          {children}
        </SessionProvider>
      </body>
    </html>
  );
}

로그인 후 복사

/src
  /app
    /api
      /auth
        [...nextauth]
          /route.ts  // Route Handler
    layout.tsx
    page.tsx

  auth.ts  // Provider, Callback, Logic etc
  middleware.ts  // A function before request

로그인 후 복사

폴더 구조

// prisma/schema.prisma

model User {
  id            String    @id @default(cuid())
  name          String?
  email         String?   @unique
  emailVerified DateTime?
  image         String?
  password      String?
  accounts      Account[]
  sessions      Session[]
}

model Account {
  // ... (standard Auth.js Account model)
}

model Session {
  // ... (standard Auth.js Session model)
}

// ... (other necessary models)

로그인 후 복사

위 내용은 Next.js 앱 라우터에서 Auth.js를 사용한 사용자 인증의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.