概要

Auth0認証でコールバックURLがアプリケーション設定と一致しない場合のエラーです。

エラーメッセージ

``` Callback URL mismatch. http://localhost:3000/api/auth/callback is not in the list of allowed callback URLs. ```

原因

1. Allowed Callback URLsの設定漏れ: Auth0ダッシュボードで未登録
2. プロトコルの不一致: http vs https
3. ポート番号の違い: 開発と本番でポートが異なる
4. パスの不一致: /callback vs /api/auth/callback

解決策

1. Auth0ダッシュボードで設定

``` Auth0 Dashboard > Applications > Your App > Settings

Allowed Callback URLs: http://localhost:3000/api/auth/callback, https://myapp.com/api/auth/callback, https://staging.myapp.com/api/auth/callback

Allowed Logout URLs: http://localhost:3000, https://myapp.com, https://staging.myapp.com

Allowed Web Origins: http://localhost:3000, https://myapp.com ```

2. 環境変数を正しく設定

```bash

.env.local

AUTH0_BASE_URL=http://localhost:3000 AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com AUTH0_CLIENT_ID=your-client-id AUTH0_CLIENT_SECRET=your-client-secret AUTH0_SECRET=your-secret-key ```

3. Next.js Auth0 SDKの設定

```typescript // pages/api/auth/[…auth0].ts import { handleAuth } from ‘@auth0/nextjs-auth0’;

export default handleAuth();

// または細かく設定 export default handleAuth({ login: handleLogin({ returnTo: ‘/dashboard’, }), callback: handleCallback({ redirectUri: process.env.AUTH0_CALLBACK_URL, }), }); ```

4. 本番環境でのHTTPS強制

```typescript // middleware.ts import { NextResponse } from ’next/server’;

export function middleware(request) { // HTTP → HTTPS リダイレクト if (process.env.NODE_ENV === ‘production’ && request.headers.get(‘x-forwarded-proto’) !== ‘https’) { return NextResponse.redirect( https://${request.headers.get('host')}${request.nextUrl.pathname} ); } } ```

5. ワイルドカードの使用（開発環境）

``` Allowed Callback URLs: http://localhost:*/api/auth/callback ```

よくある間違い

• 末尾のスラッシュの有無
• www有り/無しの違い
• Vercelのプレビュー環境URLを忘れる

関連エラー

• OAuth2: access_denied
• JWT: Invalid signature