Next.js - forbidden() Function

---

---

The forbidden() Function

The Next.js forbidden() function throws an error that renders a Next.js 403 error page. This function is useful for restricting access to certain routes based on user roles or authentication status. If a user is not authorized to access a route, you can use the forbidden function to prevent them from viewing the page.

Syntax

Following is the syntax of forbidden() function:

import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
    const session = await verifySession()
    
    // Check if the user has the 'admin' role
    if (session.role !== 'admin') {
        forbidden()
    }
    
    // Render the admin page for authorized users
    return <></>
}

Parameters

The forbidden() function does not take any parameters.

Return Value

The forbidden() function throws an error that renders a Next.js 403 error page.

Enable forbidden() Function

The forbidden() function is an experimental feature in Next.js and needs to be enabled in the next.config.ts file. To enable the forbidden function, set the experimental.authInterrupts flag to true in the next.config.ts file.

// File - next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
}
 
export default nextConfig

Example 1

You can use forbidden() to restrict access to certain routes based on user roles. This ensures that users who are authenticated but lack the required permissions cannot access the route. In the example below, we use the forbidden function to restrict access to the admin page based on the user's role.

import { verifySession } from '@/app/lib/dal'
import { forbidden } from 'next/navigation'
 
export default async function AdminPage() {
  const session = await verifySession()
 
  // Check if the user has the 'admin' role
  if (session.role !== 'admin') {
    forbidden()
  }
 
  // Render the admin page for authorized users
  return (
    <main>
      <h1>Admin Dashboard</h1>
      <p>Welcome, {session.user.name}!</p>
    </main>
  )
}

Example 2

The forbidden() function can be used to handle authorization errors in your application. In the example below, we use the forbidden function to restrict access to a protected route based on the user's authentication status.

import { verifySession } from '@/app/lib/dal'

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

  // Check if the user is authenticated
  if (!session) {
    forbidden()
  }

  // Render the protected page for authenticated users
  return (
    <main>
      <h1>Protected Page</h1>
      <p>Welcome, {session.user.name}!</p>
    </main>
  )
}