Benutzerauthentifizierung mit Auth.js im Next.js App Router-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Benutzerauthentifizierung mit Auth.js im Next.js App Router

Susan Sarandon

Nov 12, 2024 am 03:05 AM

Inhaltsverzeichnis

Ersteinrichtung

Installieren
Konfigurieren
- NextAuthConfig-Einstellungen
- Route-Handler-Setup
- Middleware
- Sitzung in serverseitiger Komponente abrufen
- Sitzung in clientseitiger Komponente abrufen
Ordnerstruktur

Authentifizierung implementieren: Anmeldeinformationen und Google OAuth

Prisma einrichten
Anmeldeinformationen
Fügen Sie den Google OAuth-Anbieter hinzu
- Einstellen der Google OAuth-Anwendung
- Umleitungs-URI festlegen
- Umgebungsvariablen einrichten
- Setup-Anbieter
Anmelde- und Anmeldeseite erstellen
Ordnerstruktur

Ersteinrichtung

Installieren

npm install next-auth@beta

Nach dem Login kopieren

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Nach dem Login kopieren

Konfigurieren

NextAuthConfig-Einstellungen

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

export const config = {
  providers: [],
}

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

Nach dem Login kopieren

Es sollte im src-Ordner
abgelegt werden

Anbieter bedeutet in Auth.js Dienste, die zum Anmelden eines Benutzers verwendet werden können. Es gibt vier Möglichkeiten, wie sich ein Benutzer anmelden kann.

Verwendung eines integrierten OAuth-Anbieters (z. B. Github, Google usw.)
Verwendung eines benutzerdefinierten OAuth-Anbieters
E-Mail verwenden
Anmeldeinformationen verwenden

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

Route-Handler-Setup

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

Nach dem Login kopieren

Diese Datei wird zum Festlegen des Routenhandlers mit Next.js App Router verwendet.

Middleware

// 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
}

Nach dem Login kopieren

Schreiben Sie in den src-Ordner.
Wenn die Middleware außerhalb des src-Ordners geschrieben wird, funktioniert sie nicht.

Middleware ist eine Funktion, die es Ihnen ermöglicht, Code auszuführen, bevor eine Anfrage abgeschlossen ist. Es ist besonders nützlich, um Routen zu schützen und die Authentifizierung in Ihrer gesamten Anwendung zu verwalten.

Matcher ist eine Konfigurationsoption zum Angeben, für welche Routen Middleware gelten soll. Es hilft die Leistung zu optimieren, indem Middleware nur auf notwendigen Routen ausgeführt wird.
Beispiel-Matcher: ['/dashboard/:path*'] wendet Middleware nur auf Dashboard-Routen an.

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

Rufen Sie die Sitzung in der serverseitigen Komponente ab

// 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>
  )
}

Nach dem Login kopieren

Rufen Sie die Sitzung in der clientseitigen Komponente ab

// 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>
  );
}

Nach dem Login kopieren

Ordnerstruktur

/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

Nach dem Login kopieren

Authentifizierung implementieren: Anmeldeinformationen und Google OAuth

Prisma einrichten

// 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)

Nach dem Login kopieren

// 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

Nach dem Login kopieren

Anmeldeinformationen

Anmeldeinformationen beziehen sich im Zusammenhang mit der Authentifizierung auf eine Methode zur Überprüfung der Identität eines Benutzers mithilfe von Informationen, die der Benutzer bereitstellt, normalerweise einen Benutzernamen (oder eine E-Mail-Adresse) und ein Passwort.

Wir können Anmeldeinformationen in src/auth.ts hinzufügen.

npm install next-auth@beta

Nach dem Login kopieren

Adapter:

Module, die Ihr Authentifizierungssystem mit Ihrer Datenbank oder Datenspeicherlösung verbinden.

Geheimnis:

Dies ist eine zufällige Zeichenfolge, die zum Hashen von Token, zum Signieren/Verschlüsseln von Cookies und zum Generieren kryptografischer Schlüssel verwendet wird.
Es ist für die Sicherheit von entscheidender Bedeutung und sollte geheim gehalten werden.
In diesem Fall wird es mithilfe einer Umgebungsvariablen AUTH_SECRET festgelegt.

Seiten:

Mit diesem Objekt können Sie die URLs für Authentifizierungsseiten anpassen.
In Ihrem Beispiel bedeutet signIn: „/login“, dass sich die Anmeldeseite an der Route „/login“ und nicht an der Standardroute „/api/auth/signin“ befindet.

Sitzung:

Hier wird konfiguriert, wie Sitzungen gehandhabt werden.
Strategie: „jwt“ bedeutet, dass JSON-Web-Tokens für die Sitzungsverwaltung anstelle von Datenbanksitzungen verwendet werden.

Rückrufe:

Dies sind Funktionen, die an verschiedenen Stellen im Authentifizierungsfluss aufgerufen werden, sodass Sie den Prozess anpassen können.

jwt-Rückruf:

Dies wird ausgeführt, wenn ein JWT erstellt oder aktualisiert wird.
In Ihrem Code werden Benutzerinformationen (ID, E-Mail, Name) zum Token hinzugefügt.

Sitzungsrückruf:

Dies wird immer dann ausgeführt, wenn eine Sitzung überprüft wird.
Ihr Code fügt die Benutzerinformationen vom Token zum Sitzungsobjekt hinzu.

Fügen Sie den Google OAuth-Anbieter hinzu

Einrichten der Google OAuth-Anwendung

Neue OAuth-Client-ID über die GCP-Konsole erstellen > APIs und Dienste > Anmeldeinformationen

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

Speichern Sie nach der Erstellung Ihre Kunden-ID und Ihr Kundengeheimnis zur späteren Verwendung.

Umleitungs-URI festlegen

Wenn wir lokal arbeiten, legen Sie http://localhost:3000/api/auth/callback/google fest

Ersetzen Sie in der Produktionsumgebung einfach http://localhost:3000 durch https://------.

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

Umgebungsvariablen einrichten

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Nach dem Login kopieren

Setup-Anbieter

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

export const config = {
  providers: [],
}

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

Nach dem Login kopieren

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

Erstellen einer Anmelde- und Anmeldeseite

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

Nach dem Login kopieren

// 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
}

Nach dem Login kopieren

// 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>
  )
}

Nach dem Login kopieren

// 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>
  );
}

Nach dem Login kopieren

/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

Nach dem Login kopieren

Ordnerstruktur

// 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)

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonBenutzerauthentifizierung mit Auth.js im Next.js App Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn