An interactive, step-by-step visualization of OAuth 2.0, OpenID Connect, and Identity Assertion Authorization Grant (ID-JAG) flows, demonstrating secure authentication patterns for AI agents.
- 5 Interactive Slides: Each demonstrating different authentication flows
- Step-by-step Navigation: Move forward and backward through each flow
- Visual Tokens: See JWT tokens generated and exchanged in real-time
- Presentation Mode: Keyboard shortcuts for presenting
- Responsive Design: Works on desktop and tablet devices
- OAuth Consent Flow: Basic OIDC authentication with user consent
- App-to-App Integration: Calendar and Zoom OAuth integration
- Delegated API Key: Security concerns with key sharing
- Agent as OAuth Client: The problem with traditional OAuth for AI agents
- Cross-App Access (ID-JAG): The solution using Identity Assertion Authorization Grant
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview- Space / → / PageDown / n: Next step/slide
- ← / PageUp / p: Previous step/slide
- F: Toggle fullscreen
- 1-5: Jump to specific slide
- Esc: Exit fullscreen
- React 18 + TypeScript - Modern component-based UI
- Vite - Lightning-fast dev server and build tool
- Tailwind CSS - Utility-first styling
- Radix UI - Accessible component primitives
- Lucide React - Beautiful icon library
- React 18 with TypeScript
- Vite for blazing fast development
- Tailwind CSS for styling
- Radix UI for accessible components
- Lucide React for icons
Sohail Pathan
- GitHub: @iamspathan
MIT License - feel free to use this for educational purposes!
Made with ❤️ for the OAuth community