SecurityLive

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.

JWT Refresh Token OAuth 2.0 2FA TOTP Magic Link WebAuthn Passkeys FIDO2 NextAuth HttpOnly Cookie CSRF Security

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.