suchen

Heim >Web-Frontend >js-Tutorial >Benutzerauthentifizierung mit Auth.js im Next.js App Router

Benutzerauthentifizierung mit Auth.js im Next.js App Router

Susan Sarandon
Susan SarandonOriginal
2024-11-12 03:05:01694Durchsuche

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

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Konfigurieren

NextAuthConfig-Einstellungen 

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

export const config = {
  providers: [],
}

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

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

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
}

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

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

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

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)


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

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

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

Setup-Anbieter 

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

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

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

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)

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!

json express String Object if for Session Token using JS console function default this table github database http https router
Stellungnahme：
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
Vorheriger Artikel：Wie rufe ich ASP.NET-Funktionen aus JavaScript über PostBack auf?Nächster Artikel：Wie rufe ich ASP.NET-Funktionen aus JavaScript über PostBack auf?

In Verbindung stehende Artikel

Mehr sehen