検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Next.js App Router での Auth.js によるユーザー認証

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

Susan Sarandon
Susan Sarandonオリジナル
2024-11-12 03:05:01696ブラウズ

目次

初期設定

  • インストール
  • 設定する
    • 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

アダプター:

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

秘密:

  • これは、トークンのハッシュ、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 サイトの他の関連記事を参照してください。

json express String Object if for Session Token using JS console function default this table github database http https router
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：PostBack 経由で JavaScript から ASP.NET 関数を呼び出す方法次の記事：PostBack 経由で JavaScript から ASP.NET 関数を呼び出す方法

関連記事

続きを見る