08 / 24

Describe unauthorized.js.

Difficulty: 6/10
App Router, Authentication, Error Handling

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.

  1. 1

    unauthorized.js components do not accept any props.

  2. 2

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

Scenario Questions

0-2 years experience

  1. 1Imagine you're building a dashboard page in Next.js 15 and want to show a clean login prompt if the user's session is missing. How would you use `unauthorized.js` and the `unauthorized()` function to trigger this state instead of manually redirecting them?
  2. 2If you have an `unauthorized.js` file at the root of your App Router, what happens when a nested route calls `unauthorized()`? How does Next.js decide which UI to render if you also have a nested `unauthorized.js` in a subfolder?

2-5 years experience

  1. 1We recently migrated to Next.js 15 and added an `unauthorized.js` file to handle expired sessions. However, our QA team noticed that when a user gets unauthorized, the main sidebar layout disappears completely. Why might this be happening, and how would you restructure your route groups or layouts to keep the sidebar visible while showing the unauthorized state?
  2. 2Suppose you are fetching data in a Server Component. You check the user's token, find it's expired, and call `unauthorized()`. How does this interact with your global `error.js` or `not-found.js`? How do you ensure the user gets the specific 401 UI instead of a generic error page?

5-8 years experience

  1. 1When designing the auth flow for a large Next.js application, you have to choose between intercepting unauthorized requests in `middleware.ts` (redirecting to `/login`) versus throwing `unauthorized()` inside Server Components to render `unauthorized.js`. What are the performance, UX, and caching implications of both approaches?
  2. 2We have a highly dynamic page with multiple nested, suspended Server Components fetching data in parallel. If one of these deeply nested components triggers `unauthorized()`, how does Next.js handle the streaming response? How do you prevent a single failed component from tearing down the entire page's UI?

8+ years experience

  1. 1We are planning a migration of a legacy Next.js Pages Router application with custom Express-style auth middleware to Next.js 15 App Router. How would you architect a standardized, type-safe authorization boundary strategy across hundreds of routes using `unauthorized.js`, ensuring consistent UX and preventing sensitive data leaks during partial rendering?
  2. 2In a multi-tenant SaaS platform built on Next.js, different tenants require custom login pages and unauthorized states. How would you design a routing and layout architecture that leverages `unauthorized.js` dynamically across subdomains, while keeping the core auth boundary logic centralized and maintainable?

Follow-up Questions

  • How does `unauthorized.js` differ from `forbidden.js` in Next.js 15?
  • Can you trigger `unauthorized()` from a Client Component, and if so, how?
  • What HTTP status code does Next.js actually return to the browser when `unauthorized.js` is rendered during SSR?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.