forbidden

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

Para comenzar a usar forbidden, activa 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,
  },
}

forbidden 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 { forbidden } from 'next/navigation'

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

  // Verifica si el usuario tiene el rol 'admin'
  if (session.role !== 'admin') {
    forbidden()
  }

  // Renderiza la página de admin para usuarios autorizados
  return <></>
}

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

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

  // Verifica si el usuario tiene el rol 'admin'
  if (session.role !== 'admin') {
    forbidden()
  }

  // Renderiza la página de admin para usuarios autorizados
  return <></>
}

Bueno saber

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

Ejemplos

Protección de rutas basada en roles

Puedes usar forbidden para restringir el acceso a ciertas rutas según los roles de usuario. Esto asegura que usuarios autenticados pero sin los permisos requeridos no puedan acceder a la ruta.

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

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

  // Verifica si el usuario tiene el rol 'admin'
  if (session.role !== 'admin') {
    forbidden()
  }

  // Renderiza la página de admin para usuarios autorizados
  return (
    <main>
      <h1>Panel de Administración</h1>
      <p>¡Bienvenido, {session.user.name}!</p>
    </main>
  )
}

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

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

  // Verifica si el usuario tiene el rol 'admin'
  if (session.role !== 'admin') {
    forbidden()
  }

  // Renderiza la página de admin para usuarios autorizados
  return (
    <main>
      <h1>Panel de Administración</h1>
      <p>¡Bienvenido, {session.user.name}!</p>
    </main>
  )
}

Mutaciones con Acciones del Servidor

Al implementar mutaciones en Acciones del Servidor, puedes usar forbidden para permitir solo a usuarios con un rol específico actualizar datos sensibles.

'use server'

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

export async function updateRole(formData: FormData) {
  const session = await verifySession()

  // Asegura que solo admins pueden actualizar roles
  if (session.role !== 'admin') {
    forbidden()
  }

  // Realiza la actualización de rol para usuarios autorizados
  // ...
}

'use server'

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

export async function updateRole(formData) {
  const session = await verifySession()

  // Asegura que solo admins pueden actualizar roles
  if (session.role !== 'admin') {
    forbidden()
  }

  // Realiza la actualización de rol para usuarios autorizados
  // ...
}

Historial de versiones

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

forbidden.js

Referencia de API para el archivo especial forbidden.js.