지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

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

Susan Sarandon
풀어 주다： 2024-11-12 03:05:01
원래의
641명이 탐색했습니다.

목차

초기 설정

  • 설치
  • 구성
    • NextAuthConfig 설정
    • 경로 처리기 설정
    • 미들웨어
    • 서버측 구성요소에서 세션 가져오기
    • 클라이언트 측 구성 요소에서 세션 가져오기
  • 폴더 구조

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

  • 프리즈마 설정
  • 자격증명
  • Google OAuth 제공업체 추가
    • Google OAuth 애플리케이션 설정
    • 리디렉션 URI 설정
    • 환경변수 설정
    • 설정 제공업체
  • 로그인 및 회원가입 페이지 만들기
  • 폴더 구조

초기 설정

설치하다 

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：dev.to
이전 기사：PostBack을 통해 JavaScript에서 ASP.NET 함수를 호출하는 방법은 무엇입니까? 다음 기사：jQuery에서 창 크기 조정이 완료된 후 함수를 트리거하는 방법은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
2
1890
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
10
2053
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1724
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1626
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1639
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿