Next.js App Router での Auth.js によるユーザー認証-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Next.js App Router での Auth.js によるユーザー認証

Susan Sarandon

Nov 12, 2024 am 03:05 AM

プリズマのセットアップ
資格情報
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

ログイン後にコピー

アダプター:

認証システムをデータベースまたはデータストレージソリューションに接続するモジュール。

秘密:

これは、トークンのハッシュ、Cookie の署名/暗号化、暗号キーの生成に使用されるランダムな文字列です。
これはセキュリティにとって非常に重要であるため、秘密にしておく必要があります。
この場合、環境変数 AUTH_SECRET を使用して設定されます。

ページ:

このオブジェクトを使用すると、認証ページの URL をカスタマイズできます。
この例では、signIn: '/login' は、サインインページがデフォルトの '/api/auth/signin' ではなく '/login' ルートにあることを意味します。

セッション:

これにより、セッションの処理方法が構成されます。
戦略: 「jwt」は、データベースセッションではなくセッション管理に JSON Web トークンが使用されることを意味します。

コールバック:

これらは認証フローのさまざまなポイントで呼び出される関数であり、プロセスをカスタマイズできます。

jwt コールバック:

これは、JWT が作成または更新されるときに実行されます。
コードでは、ユーザー情報 (ID、電子メール、名前) をトークンに追加しています。

セッションコールバック:

これはセッションがチェックされるたびに実行されます。
コードは、トークンからセッションオブジェクトにユーザー情報を追加しています。

Google OAuth プロバイダーの追加

Google OAuthアプリケーションの設定

GCP Console から新しい 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 App Router での Auth.js によるユーザー認証の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。