カスタムエラーページ
Auth.js は、ユーザー認証フロー（サインイン、サインアウトなど）中に問題が発生した場合に、カスタムエラーページを表示するように設定できます。
Auth.js の /api/auth/error ページをオーバーライドするには、AuthConfig にカスタムページを定義する必要があります
./auth.ts
const authConfig: NextAuthConfig = {
...
pages: {
error: "/error",
}
...
};サンプルアプリを使用して、app/error/page.tsx を作成することで、シンプルなカスタムエラーページを作成してみましょう
app/error/page.tsx
export default function AuthErrorPage() {
return <>Oops</>
}Auth.js は、以下のエラーをエラークエリパラメータとして URL にカスタムエラーページに転送します
| クエリパラメータ | URL 例 | 説明 |
|---|---|---|
Configuration | /auth/error?error=Configuration | サーバー設定に問題があります。オプションが正しいか確認してください。 |
AccessDenied | /auth/error?error=AccessDenied | 通常、signIn コールバックまたはリダイレクトコールバックを介してアクセスを制限した場合に発生します。 |
Verification | /auth/error?error=Verification | Email プロバイダーに関連しています。トークンの有効期限が切れているか、既に使用されています。 |
Default | /auth/error?error=Default | キャッチオール。上記のいずれにも一致しない場合に適用されます。 |
これで、カスタムエラーページを更新できます
app/error/page.tsx
"use client"
import { useSearchParams } from "next/navigation"
enum Error {
Configuration = "Configuration",
}
const errorMap = {
[Error.Configuration]: (
<p>
There was a problem when trying to authenticate. Please contact us if this
error persists. Unique error code:{" "}
<code className="rounded-sm bg-slate-100 p-1 text-xs">Configuration</code>
</p>
),
}
export default function AuthErrorPage() {
const search = useSearchParams()
const error = search.get("error") as Error
return (
<div className="flex h-screen w-full flex-col items-center justify-center">
<a
href="#"
className="block max-w-sm rounded-lg border border-gray-200 bg-white p-6 text-center shadow hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
>
<h5 className="mb-2 flex flex-row items-center justify-center gap-2 text-xl font-bold tracking-tight text-gray-900 dark:text-white">
Something went wrong
</h5>
<div className="font-normal text-gray-700 dark:text-gray-400">
{errorMap[error] || "Please contact us if this error persists."}
</div>
</a>
</div>
)
}これで、エラーが発生すると、Auth.js はユーザーをカスタムエラーページにリダイレクトします
