Authentication
This feature demonstrates the five authentication patterns found in most modern applications. JWT with a short-lived access token and a refresh token in an HttpOnly cookie with automatic rotation; OAuth 2.0 via NextAuth with a Google provider; TOTP with a scannable QR Code and backup codes; passwordless Magic Link over email; and WebAuthn/Passkeys for biometric login via FIDO2. Every sub-screen is interactive — you watch the token being generated, the real QR Code, the link being sent, and your device's own biometrics being used to authenticate.
Technologies
- NextAuth.js
- JWT
- OTPLIB
- WebAuthn API
- Next.js API Routes
- TypeScript
Architecture
- Next.js API
- Short-lived Access Token
- Refresh Token in an HttpOnly cookie
- OAuth Authorization Code Flow
- TOTP
- WebAuthn/FIDO2 with asymmetric keys
Concepts
- Access Token + Refresh Token
- Token Rotation
- OAuth 2.0
- TOTP
- Magic Link
- WebAuthn/Passkeys (FIDO2)
- HttpOnly cookies
- LocalStorage
- CSRF Protection
Demo area
The demo is 100% functional — try it now.
PWA & Smart Cache
Native installation, multi-strategy caching per resource type, and real connectivity detection: the pillars that hold up a good PWA.
3D & Advanced Animations
Interactive real-time 3D rendering demo: an orbitable scene with PBR materials, a full solar system with a camera that chases the focused planet, an 8,000-particle galaxy with a hand-written GLSL shader, and a scroll-driven journey through the author's own tech stack.