Passkeys (WebAuthn) Authentication Implementation on Website
Passkeys — FIDO2/WebAuthn standard for passwordless authentication. User logs in via device biometrics (Touch ID, Face ID, Windows Hello) or hardware key (YubiKey). No passwords, no SMS — a cryptographic key pair is stored in the secure device storage.
Passkeys are supported in Chrome 108+, Safari 16+, Firefox 122+. iOS 16+ and Android 9+ synchronize keys via iCloud Keychain and Google Password Manager.
WebAuthn Architecture
Registration process: Server generates challenge, browser passes it to device. Device checks biometrics, creates key pair, returns public key and attestation. Server stores public key.
Authentication process: Server generates challenge, browser passes it to device. Device signs challenge with private key. Server verifies signature with public key.
The private key never leaves the device. Server stores only the public key.
Server Library
Passkeys registration and verification require a WebAuthn library. For Node.js: @simplewebauthn/server. For PHP: web-auth/webauthn-lib.
Passkey Registration
Step 1: Challenge from Server
Server generates a random challenge and sends it to the client along with registration options.
Step 2: Browser Creates Key Pair
The browser uses the WebAuthn API to create a key pair on the device. User confirms with biometrics.
Step 3: Server Verifies and Saves Public Key
Server receives the public key and stores it for future authentication.
Passkey Authentication
Get challenge:
Server generates and sends a challenge.
Browser signs challenge:
Device uses stored private key to sign the challenge.
Verify on server:
Server checks the signature against the stored public key.
Database Schema
Tables needed: webauthn_credentials to store public keys and attestation data, webauthn_challenge for temporary challenges.
Discoverable Credentials
Modern Passkeys support mode without email entry — browser offers all available keys:
On the server, user identifier is extracted from the response.
Device Management
Show list of registered Passkeys with device name, last use date, and delete button. After deletion, user cannot log in with that key.
Fallback
Always provide alternative login method in case all devices are lost: email+password or Magic Link.
Timeline
| Stage | Time |
|---|---|
| Setup, configuration | 1 day |
| Registration: backend + frontend | 2 days |
| Authentication: backend + frontend | 2 days |
| Device management + fallback | 1 day |
| Testing on real devices | 1–2 days |
Total: 7–9 working days.