メインコンテンツまでスキップ

unauthorized

unauthorized 関数は、Next.js の 401 エラーページをレンダリングするエラーをスローします。これは、アプリケーション内での認証エラーを処理するのに役立ちます。UI は unauthorized.js ファイルを使用してカスタマイズできます。

unauthorized を使用するには、next.config.js ファイルで実験的な authInterrupts 設定オプションを有効にします：

next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    authInterrupts: true,
  },
}

export default nextConfig

unauthorized は、Server Components、Server Actions、および Route Handlers で呼び出すことができます。

app/dashboard/page.tsx
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

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

  if (!session) {
    unauthorized()
  }

  // 認証されたユーザーのためにダッシュボードをレンダリングします
  return (
    <main>
      <h1>Welcome to the Dashboard</h1>
      <p>Hi, {session.user.name}.</p>
    </main>
  )
}

Good to know​

Examples​

認証されていないユーザーにログイン UI を表示する​

unauthorized 関数を使用して、ログイン UI を含む unauthorized.js ファイルを表示できます。

app/dashboard/page.tsx
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
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>
  )
}

Server Actions を使用したミューテーション​

特定のミューテーションを実行できるのは認証されたユーザーのみであることを保証するために、Server Actions で unauthorized を呼び出すことができます。

app/actions/update-profile.ts
'use server'

import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'
import db from '@/app/lib/db'

export async function updateProfile(data: FormData) {
  const session = await verifySession()

  // ユーザーが認証されていない場合、401 を返します
  if (!session) {
    unauthorized()
  }

  // ミューテーションを続行します
  // ...
}

Route Handlers を使用したデータの取得​

Route Handlers で unauthorized を使用して、認証されたユーザーのみがエンドポイントにアクセスできるようにすることができます。

app/api/profile/route.ts
import { NextRequest, NextResponse } from 'next/server'
import { verifySession } from '@/app/lib/dal'
import { unauthorized } from 'next/navigation'

export async function GET(req: NextRequest): Promise<NextResponse> {
  // ユーザーのセッションを確認します
  const session = await verifySession()

  // セッションが存在しない場合、401 を返し unauthorized.tsx をレンダリングします
  if (!session) {
    unauthorized()
  }

  // データを取得します
  // ...
}

バージョン履歴​

バージョン変更内容
v15.1.0unauthorized が導入されました