mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Delba de OliveiraGitHubJosephgraphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>Closes: https://linear.app/vercel/issue/DOC-4686/clean-up-routing-section Redirects: https://github.com/vercel/front/pull/47151 --------- Co-authored-by: Joseph <[email protected]> Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com>
115 lines
2.5 KiB
Plaintext
115 lines
2.5 KiB
Plaintext
---
|
|
title: unauthorized.js
|
|
description: API reference for the unauthorized.js special file.
|
|
related:
|
|
links:
|
|
- app/api-reference/functions/unauthorized
|
|
version: experimental
|
|
---
|
|
|
|
The **unauthorized** file is used to render UI when the [`unauthorized`](/docs/app/api-reference/functions/unauthorized) function is invoked during authentication. Along with allowing you to customize the UI, Next.js will return a `401` status code.
|
|
|
|
```tsx filename="app/unauthorized.tsx" switcher
|
|
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>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/unauthorized.js" switcher
|
|
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`](/docs/app/api-reference/functions/unauthorized) function to render the `unauthorized.js` file with a login UI.
|
|
|
|
```tsx filename="app/dashboard/page.tsx" switcher
|
|
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>
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/dashboard/page.js" switcher
|
|
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>
|
|
}
|
|
```
|
|
|
|
```tsx filename="app/unauthorized.tsx" switcher
|
|
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>
|
|
)
|
|
}
|
|
```
|
|
|
|
```jsx filename="app/unauthorized.js" switcher
|
|
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
|
|
|
|
| Version | Changes |
|
|
| --------- | ----------------------------- |
|
|
| `v15.1.0` | `unauthorized.js` introduced. |
|