unauthorized.js

El archivo unauthorized se utiliza para renderizar la interfaz de usuario cuando se invoca la función unauthorized durante la autenticación. Además de permitir personalizar la UI, Next.js devolverá un código de estado 401.

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

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

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

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

Referencia

Props

Los componentes unauthorized.js no aceptan ninguna prop.

Ejemplos

Mostrar UI de inicio de sesión para usuarios no autenticados

Puedes usar la función unauthorized para renderizar el archivo unauthorized.js con una interfaz de inicio de sesión.

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 - No autorizado</h1>
      <p>Por favor inicie 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 inicie sesión para acceder a esta página.</p>
      <Login />
    </main>
  )
}

Historial de versiones

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

unauthorized

Referencia de API para la función `unauthorized`.