unauthorized.js

This feature is currently experimental and subject to change, it's not recommended for production. Try it out and share your feedback on GitHub.

Last updated April 23, 2026

The unauthorized file is used to render UI when the unauthorized function is invoked during authentication. Along with allowing you to customize the UI, Next.js will return a 401 status code.

app/unauthorized.tsx

JavaScriptTypeScript

import Login from '@/app/components/Login'
 
export default function Unauthorized() {
  return (
    <main>
      <h1>401 - Unauthorized</h1>
      <p>Please log in to access this page.</p>
      <Login />
    </main>
  )
}

Reference

Props

unauthorized.js components do not accept any props.

Examples

Displaying login UI to unauthenticated users

You can use unauthorized function to render the unauthorized.js file with a login UI.

app/dashboard/page.tsx

JavaScriptTypeScript

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>
}

app/unauthorized.tsx

JavaScriptTypeScript

import Login from '@/app/components/Login'
 
export default function UnauthorizedPage() {
  return (
    <main>
      <h1>401 - Unauthorized</h1>
      <p>Please log in to access this page.</p>
      <Login />
    </main>
  )
}

Version History

[

unauthorized

API Reference for the unauthorized function.

](../../functions/unauthorized/index.md)

Was this helpful?