recherche

Maison >interface Web >js tutoriel >Authentification utilisateur avec Auth.js dans le routeur d'application Next.js

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-12 03:05:01691parcourir

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

// env.local
AUTH_SECRET=GENERATETD_RANDOM_VALUE

Configurer

Paramètres NextAuthConfig 

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

export const config = {
  providers: [],
}

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

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

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
}

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

Le

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

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

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

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)


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

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

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

Fournisseur d'installation 

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

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

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

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)

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!

json express String Object if for Session Token using JS console function default this table github database http https router
Déclaration：
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
Article précédent：Comment appeler des fonctions ASP.NET depuis JavaScript via PostBack ?Article suivant：Comment appeler des fonctions ASP.NET depuis JavaScript via PostBack ?

Articles Liés

Voir plus