unauthorized

La fonction unauthorized génère une erreur qui affiche une page d'erreur 401 dans Next.js. Elle est utile pour gérer les erreurs d'autorisation dans votre application. Vous pouvez personnaliser l'interface utilisateur en utilisant le fichier unauthorized.js.

Pour commencer à utiliser unauthorized, activez l'option de configuration expérimentale authInterrupts dans votre fichier next.config.js :

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
}

export default nextConfig

module.exports = {
  experimental: {
    authInterrupts: true,
  },
}

unauthorized peut être appelée dans les Composants Serveur, les Actions Serveur et les Gestionnaires de Route.

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export default async function DashboardPage() {
  const session = await verifySession()

  if (!session) {
    unauthorized()
  }

  // Afficher le tableau de bord pour les utilisateurs authentifiés
  return (
    <main>
      <h1>Bienvenue sur le Tableau de Bord</h1>
      <p>Bonjour, {session.user.name}.</p>
    </main>
  )
}

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export default async function DashboardPage() {
  const session = await verifySession()

  if (!session) {
    unauthorized()
  }

  // Afficher le tableau de bord pour les utilisateurs authentifiés
  return (
    <main>
      <h1>Bienvenue sur le Tableau de Bord</h1>
      <p>Bonjour, {session.user.name}.</p>
    </main>
  )
}

Bon à savoir

La fonction unauthorized ne peut pas être appelée dans la disposition racine (root layout).

Exemples

Afficher une interface de connexion pour les utilisateurs non authentifiés

Vous pouvez utiliser la fonction unauthorized pour afficher le fichier unauthorized.js avec une interface de connexion.

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export default async function DashboardPage() {
  const session = await verifySession()

  if (!session) {
    unauthorized()
  }

  return <div>Tableau de bord</div>
}

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export default async function DashboardPage() {
  const session = await verifySession()

  if (!session) {
    unauthorized()
  }

  return <div>Tableau de bord</div>
}

import Login from '@/app/components/Login'

export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - Non autorisé</h1>
      <p>Veuillez vous connecter pour accéder à cette page.</p>
      <Login />
    </main>
  )
}

import Login from '@/app/components/Login'

export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - Non autorisé</h1>
      <p>Veuillez vous connecter pour accéder à cette page.</p>
      <Login />
    </main>
  )
}

Mutations avec Actions Serveur

Vous pouvez appeler unauthorized dans les Actions Serveur pour vous assurer que seuls les utilisateurs authentifiés peuvent effectuer des mutations spécifiques.

'use server'

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
import db from '@/app/lib/db'

export async function updateProfile(data: FormData) {
  const session = await verifySession()

  // Si l'utilisateur n'est pas authentifié, retourne un 401
  if (!session) {
    unauthorized()
  }

  // Poursuivre la mutation
  // ...
}

'use server'

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
import db from '@/app/lib/db'

export async function updateProfile(data) {
  const session = await verifySession()

  // Si l'utilisateur n'est pas authentifié, retourne un 401
  if (!session) {
    unauthorized()
  }

  // Poursuivre la mutation
  // ...
}

Récupération de données avec les Gestionnaires de Route

Vous pouvez utiliser unauthorized dans les Gestionnaires de Route pour vous assurer que seuls les utilisateurs authentifiés peuvent accéder au point de terminaison.

import { NextRequest, NextResponse } from 'next/server'
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export async function GET(req: NextRequest): Promise<NextResponse> {
  // Vérifier la session de l'utilisateur
  const session = await verifySession()

  // Si aucune session n'existe, retourne un 401 et affiche unauthorized.tsx
  if (!session) {
    unauthorized()
  }

  // Récupérer les données
  // ...
}

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export async function GET() {
  const session = await verifySession()

  // Si l'utilisateur n'est pas authentifié, retourne un 401 et affiche unauthorized.tsx
  if (!session) {
    unauthorized()
  }

  // Récupérer les données
  // ...
}

Historique des versions

Version	Changements
`v15.1.0`	Introduction de `unauthorized`.

unauthorized.js

Documentation de référence pour le fichier spécial unauthorized.js.