🔐 WebAuthn Authentication Demo
Compare discoverable passkeys vs traditional username-based authentication
✨ Discoverable Passkeys
Modern passwordless authentication - no username needed!
🚀 RECOMMENDED
- No username or password to remember
- One-click sign in after setup
- Passkey stored on your device
- Works across all your devices (with sync)
Step 1: Create Your Passkey
THEN
Step 2: Sign In Without Username
How it works: Click the button above and your
browser will show all passkeys for this site. Select yours to sign
in instantly - no username needed!
👤 Username-Based Authentication
Traditional WebAuthn with username requirement
🔒 CLASSIC METHOD
- Requires username for sign in
- Passkey linked to specific username
- Good for shared devices
- Familiar authentication flow
Step 1: Register with Username
THEN
Step 2: Sign In with Username
Note: You must enter your username first, then
authenticate with your device's biometric or PIN.
🔍 Debug Information
📝 Registration Flow
1
POST
/api/webauthn/registration/start - Request
No data yet
2
/api/webauthn/registration/start - Response
No data yet
3
API
navigator.credentials.create()
No data yet
4
Authenticator Response
No data yet
5
POST
/api/webauthn/registration/finish - Request
No data yet
6
/api/webauthn/registration/finish - Response
No data yet
🔓 Authentication Flow
1
POST
/api/webauthn/authentication/start - Request
No data yet
2
/api/webauthn/authentication/start - Response
No data yet
3
API
navigator.credentials.get()
No data yet
4
Authenticator Response
No data yet
5
POST
/api/webauthn/authentication/finish - Request
No data yet
6
/api/webauthn/authentication/finish - Response
No data yet