unauthorized

La función unauthorized lanza un error que muestra una página de error 401 de Next.js. Es útil para manejar errores de autorización en tu aplicación. Puedes personalizar la interfaz de usuario utilizando el archivo unauthorized.js.

Para comenzar a usar unauthorized, habilita la opción experimental authInterrupts en tu archivo next.config.js:

import type { NextConfig } from 'next'

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

export default nextConfig

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

unauthorized puede invocarse en Componentes del Servidor (Server Components), Acciones del Servidor (Server Actions) y Manejadores de Ruta (Route Handlers).

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

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

  if (!session) {
    unauthorized()
  }

  // Renderiza el dashboard para usuarios autenticados
  return (
    <main>
      <h1>Bienvenido al Panel</h1>
      <p>Hola, {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()
  }

  // Renderiza el dashboard para usuarios autenticados
  return (
    <main>
      <h1>Bienvenido al Panel</h1>
      <p>Hola, {session.user.name}.</p>
    </main>
  )
}

Bueno saber

La función unauthorized no puede llamarse en el layout raíz (root layout).

Ejemplos

Puedes usar la función unauthorized para mostrar el archivo unauthorized.js con una interfaz de login.

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

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

export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - No autorizado</h1>
      <p>Por favor inicia sesión para acceder a esta página.</p>
      <Login />
    </main>
  )
}

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

export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - No autorizado</h1>
      <p>Por favor inicia sesión para acceder a esta página.</p>
      <Login />
    </main>
  )
}

Mutaciones con Acciones del Servidor

Puedes invocar unauthorized en Acciones del Servidor para asegurar que solo usuarios autenticados puedan realizar mutaciones específicas.

'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 el usuario no está autenticado, retorna un 401
  if (!session) {
    unauthorized()
  }

  // Procede con la mutación
  // ...
}

'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 el usuario no está autenticado, retorna un 401
  if (!session) {
    unauthorized()
  }

  // Procede con la mutación
  // ...
}

Obtención de datos con Manejadores de Ruta

Puedes usar unauthorized en Manejadores de Ruta para asegurar que solo usuarios autenticados puedan acceder al endpoint.

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> {
  // Verifica la sesión del usuario
  const session = await verifySession()

  // Si no existe sesión, retorna un 401 y renderiza unauthorized.tsx
  if (!session) {
    unauthorized()
  }

  // Obtiene los datos
  // ...
}

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

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

  // Si el usuario no está autenticado, retorna un 401 y renderiza unauthorized.tsx
  if (!session) {
    unauthorized()
  }

  // Obtiene los datos
  // ...
}

Historial de versiones

Versión	Cambios
`v15.1.0`	Se introdujo `unauthorized`.

unauthorized.js

Referencia de API para el archivo especial unauthorized.js.