OIDC Debugging Tool

An interactive OIDC/OAuth2 debugging and educational tool built with Next.js. Configure Auth0 settings dynamically and step through OAuth2/OIDC flows, inspecting every HTTP request and response along the way.

Flows

• Auth Code + PKCE - Step through the full Authorization Code flow with PKCE, inspecting each redirect, callback, and token exchange
• Client Credentials - Execute a machine-to-machine token request and inspect the request/response
• Device Flow - Walk through the Device Authorization Grant with polling
• Token Vault - Explore Auth0 Federated Credentials / Token Vault connections using the Auth0 SDK
• JWT Inspector - Paste any JWT to decode and inspect its header, payload, and signature

Setup

1. Install dependencies:

   npm install

2. Copy the environment example and configure it:

   cp .env.example .env.local

   Edit .env.local and set AUTH0_SECRET (generate with openssl rand -hex 32) and APP_BASE_URL.

3. Start the dev server:

   npm run dev

4. Open http://localhost:3000 and configure your Auth0 domain, client ID, and client secret on the Config page.

Tech Stack

• Next.js 16 (App Router, Turbopack)
• TypeScript
• Tailwind CSS v4 + shadcn/ui
• @auth0/nextjs-auth0