unauthorized

Die Funktion unauthorized wirft einen Fehler, der eine Next.js 401-Fehlerseite rendert. Sie ist nützlich für die Behandlung von Autorisierungsfehlern in Ihrer Anwendung. Die Benutzeroberfläche kann mit der Datei unauthorized.js angepasst werden.

Um unauthorized zu verwenden, aktivieren Sie die experimentelle Konfigurationsoption authInterrupts in Ihrer next.config.js-Datei:

import type { NextConfig } from 'next'

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

export default nextConfig

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

unauthorized kann in Server Components, Server Actions und Route Handlers aufgerufen werden.

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

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

  if (!session) {
    unauthorized()
  }

  // Dashboard für authentifizierte Benutzer rendern
  return (
    <main>
      <h1>Willkommen im Dashboard</h1>
      <p>Hallo, {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()
  }

  // Dashboard für authentifizierte Benutzer rendern
  return (
    <main>
      <h1>Willkommen im Dashboard</h1>
      <p>Hallo, {session.user.name}.</p>
    </main>
  )
}

Wissenswertes

Die Funktion unauthorized kann nicht im Root Layout aufgerufen werden.

Beispiele

Mit der Funktion unauthorized kann die Datei unauthorized.js mit einer Login-Oberfläche angezeigt werden.

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

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

export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - Unauthorized</h1>
      <p>Bitte melden Sie sich an, um auf diese Seite zuzugreifen.</p>
      <Login />
    </main>
  )
}

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

export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - Unauthorized</h1>
      <p>Bitte melden Sie sich an, um auf diese Seite zuzugreifen.</p>
      <Login />
    </main>
  )
}

Mutationen mit Server Actions

Sie können unauthorized in Server Actions aufrufen, um sicherzustellen, dass nur authentifizierte Benutzer bestimmte Mutationen durchführen können.

'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()

  // Wenn der Benutzer nicht authentifiziert ist, 401 zurückgeben
  if (!session) {
    unauthorized()
  }

  // Mit der Mutation fortfahren
  // ...
}

'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()

  // Wenn der Benutzer nicht authentifiziert ist, 401 zurückgeben
  if (!session) {
    unauthorized()
  }

  // Mit der Mutation fortfahren
  // ...
}

Datenabfrage mit Route Handlers

Sie können unauthorized in Route Handlers verwenden, um sicherzustellen, dass nur authentifizierte Benutzer auf den Endpunkt zugreifen können.

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> {
  // Sitzung des Benutzers überprüfen
  const session = await verifySession()

  // Wenn keine Sitzung existiert, 401 zurückgeben und unauthorized.tsx rendern
  if (!session) {
    unauthorized()
  }

  // Daten abfragen
  // ...
}

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

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

  // Wenn der Benutzer nicht authentifiziert ist, 401 zurückgeben und unauthorized.tsx rendern
  if (!session) {
    unauthorized()
  }

  // Daten abfragen
  // ...
}

Versionsverlauf

Version	Änderungen
`v15.1.0`	`unauthorized` eingeführt.

unauthorized.js

API-Referenz für die spezielle Datei unauthorized.js.