Authentification utilisateur avec Auth.js dans le routeur d'application Next.js-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Authentification utilisateur avec Auth.js dans le routeur d'application Next.js

Susan Sarandon

Nov 12, 2024 am 03:05 AM

Table des matières

Configuration initiale

Installer
Configurer
- Paramètres NextAuthConfig
- Configuration du gestionnaire d'itinéraire
- Middleware
- Obtenir une session dans le composant côté serveur
- Obtenir une session dans le composant côté client
Structure des dossiers

Implémentation de l'authentification : informations d'identification et Google OAuth

Configuration de prisma
Identifiants
Ajouter un fournisseur Google OAuth
- Configuration de l'application Google OAuth
- Définition de l'URI de redirection
- Configurer les variables d'environnement
- Fournisseur d'installation
Création d'une page de connexion et d'inscription
Structure des dossiers

Configuration initiale

Installer

npm install next-auth@beta

Copier après la connexion

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Copier après la connexion

Configurer

Paramètres NextAuthConfig

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

export const config = {
  providers: [],
}

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

Copier après la connexion

Il doit être placé à l'intérieur du dossier src

Fournisseurs signifie dans Auth.js des services qui peuvent être utilisés pour connecter un utilisateur. Il existe quatre manières pour un utilisateur de se connecter.

Utilisation d'un fournisseur OAuth intégré (par exemple Github, Google, etc...)
Utilisation d'un fournisseur OAuth personnalisé
Utiliser le courrier électronique
Utilisation des informations d'identification

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

Configuration du gestionnaire de route

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

Copier après la connexion

Ce fichier est utilisé pour définir le gestionnaire d'itinéraire avec Next.js App Router.

Intergiciel

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

Copier après la connexion

Écrivez dans le dossier src.
S'il est écrit en dehors du dossier src, le middleware ne fonctionnera pas.

Middleware est une fonction qui vous permet d'exécuter du code avant qu'une requête ne soit terminée. Il est particulièrement utile pour protéger les itinéraires et gérer l'authentification dans votre application.

Matcher est une option de configuration permettant de spécifier à quelles routes le middleware doit s'appliquer. Il permet d'optimiser les performances en exécutant le middleware uniquement sur les routes nécessaires.
Exemple de correspondance : ['/dashboard/:path*'] applique le middleware uniquement aux routes du tableau de bord.

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

Obtenir une session dans le composant côté serveur

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

Copier après la connexion

Obtenir une session dans le composant côté client

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

Copier après la connexion

Structure des dossiers

/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

Copier après la connexion

Implémentation de l'authentification : informations d'identification et Google OAuth

Mise en place de prisma

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

Copier après la connexion

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

Copier après la connexion

Informations d'identification

Les

Identifiants, dans le contexte de l'authentification, font référence à une méthode de vérification de l'identité d'un utilisateur à l'aide des informations que l'utilisateur fournit, généralement un nom d'utilisateur (ou un e-mail) et un mot de passe.

Nous pouvons ajouter des informations d'identification dans src/auth.ts.

npm install next-auth@beta

Copier après la connexion

adaptateurs :

modules qui connectent votre système d'authentification à votre base de données ou solution de stockage de données.

secret :

Il s'agit d'une chaîne aléatoire utilisée pour hacher des jetons, signer/crypter des cookies et générer des clés cryptographiques.
C'est crucial pour la sécurité et doit rester secret.
Dans ce cas, il est défini à l'aide d'une variable d'environnement AUTH_SECRET.

pages :

Cet objet permet de personnaliser les URL des pages d'authentification.
Dans votre exemple, signIn : '/login' signifie que la page de connexion se trouvera sur la route '/login' au lieu de la valeur par défaut '/api/auth/signin'.

séance :

Cela configure la façon dont les sessions sont gérées.
stratégie : "jwt" signifie que les jetons Web JSON seront utilisés pour la gestion des sessions au lieu des sessions de base de données.

rappels :

Il s'agit de fonctions appelées à différents stades du flux d'authentification, vous permettant de personnaliser le processus.

rappel jwt :

Ceci s'exécute lorsqu'un JWT est créé ou mis à jour.
Dans votre code, il s'agit d'ajouter des informations utilisateur (identifiant, e-mail, nom) au jeton.

rappel de session :

Ceci s'exécute chaque fois qu'une session est vérifiée.
Votre code ajoute les informations utilisateur du jeton à l'objet de session.

Ajouter un fournisseur Google OAuth

Configuration de l'application Google OAuth

Créer un nouvel ID client OAuth à partir de la console GCP > API et services > Identifiants

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

Une fois créé, enregistrez votre ID client et votre secret client pour une utilisation ultérieure.

Définition de l'URI de redirection

Lorsque nous travaillons en local, définissez http://localhost:3000/api/auth/callback/google

Dans l'environnement de production, remplacez simplement http://localhost:3000 par https://------.

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

Configurer les variables d'environnement

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Copier après la connexion

Fournisseur d'installation

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

export const config = {
  providers: [],
}

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

Copier après la connexion

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

Création d'une page de connexion et d'inscription

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

/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

Copier après la connexion

Structure des dossiers

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn