Passkeys i WebAuthn

Passkeys — co to jest i jak zastępują hasła?

Passkeys: standard uwierzytelniania bez hasła. FIDO2 / WebAuthn. Apple, Google, Microsoft, 1Password, Bitwarden. Jak działa: zamiast hasła — klucz kryptograficzny. Private key na urządzeniu (secure enclave). Public key na serwerze. Logowanie: biometria (TouchID, FaceID, Windows Hello). Klucz prywatny nigdy nie opuszcza urządzenia. Zalety: brak phishingu (domain-bound). Brak reuse hasła. Brak brute force. Brak data breach passcode. Kryptografia asymetryczna. Synchronizacja: iCloud Keychain (Apple). Google Password Manager. 1Password, Bitwarden (cross-platform). QR code dla innego urządzenia. Wsparcie 2024: Apple — iOS 16+, macOS 13+. Android — Android 9+. Windows — Windows 11 (Hello). Chrome, Safari, Firefox, Edge. Obsługa: navigator.credentials.create() — rejestracja. navigator.credentials.get() — logowanie. Typy: Platform passkey — bound do urządzenia+OS. Roaming passkey — hardware key (YubiKey). Synced passkey — cloud-synced (iCloud, Google). Użytkownicy bez passkeys: fallback do hasła. Stopniowe wdrożenie. Passkeys co login page wyświetla automatycznie. Statystyki: Google: 900M accounts z passkeys (2024). GitHub: passkeys dostępne. Microsoft: passwordless domyślnie. Coraz więcej serwisów.

WebAuthn API — implementacja rejestracji i logowania?

WebAuthn: W3C standard. Browser API. Część FIDO2 ekosystemu. Rejestracja — frontend: const credential = await navigator.credentials.create({publicKey: {challenge: Uint8Array.from(serverChallenge), rp: {name: 'Moja Aplikacja', id: 'example.com'}, user: {id: Uint8Array.from(userId), name: 'user@email.com', displayName: 'Jan Kowalski'}, pubKeyCredParams: [{type: 'public-key', alg: -7}, {type: 'public-key', alg: -257}], authenticatorSelection: {authenticatorAttachment: 'platform', residentKey: 'preferred', userVerification: 'preferred'}, timeout: 60000, attestation: 'none'}}). Wyślij do serwera: credential.id, credential.rawId, credential.response. Logowanie — frontend: const assertion = await navigator.credentials.get({publicKey: {challenge: Uint8Array.from(serverChallenge), rpId: 'example.com', allowCredentials: [{type: 'public-key', id: credentialId}], userVerification: 'preferred', timeout: 60000}}). Weryfikacja na serwerze: @simplewebauthn/server — npm. SimpleWebAuthn: najpopularniejsza biblioteka. verifyRegistrationResponse(). verifyAuthenticationResponse(). Challenge: jednorazowy, serwer generuje. Przechowywany tymczasowo (session/redis). Replay attack prevention. Resident keys (discoverable credentials): usernameless login. Browser pokazuje dostępne klucze. autocomplete='webauthn' na input. Mediation: navigator.credentials.get({mediation: 'conditional'}) — inline picker.

SimpleWebAuthn — biblioteka passkeys w Next.js?

@simplewebauthn/browser + @simplewebauthn/server: najprostsza implementacja. TypeScript. Full WebAuthn support. Instalacja: npm install @simplewebauthn/browser (frontend). npm install @simplewebauthn/server (backend). Next.js App Router implementacja: Rejestracja Server Action: import {generateRegistrationOptions, verifyRegistrationResponse} from '@simplewebauthn/server'. const options = await generateRegistrationOptions({rpName: 'Moja App', rpID: process.env.NEXT_PUBLIC_RP_ID, userID: isoUint8Array.fromUTF8String(userId), userName: email, attestationType: 'none', excludeCredentials: existingPasskeys, authenticatorSelection: {residentKey: 'preferred', userVerification: 'preferred'}}). Zapisz challenge w session. Zwróć options. Frontend rejestracja: import {startRegistration} from '@simplewebauthn/browser'. const attResp = await startRegistration(options). Wyślij attResp do Server Action. Weryfikacja serwer: const verification = await verifyRegistrationResponse({response: attResp, expectedChallenge, expectedOrigin: 'https://example.com', expectedRPID: 'example.com', requireUserVerification: true}). Zapisz credentialID, publicKey, counter w DB. Logowanie: generateAuthenticationOptions(). startAuthentication(). verifyAuthenticationResponse(). Biblioteki auth z passkeys: Auth.js v5 (next-auth): WebAuthn provider. credentials: [{id, transports}] w user. Lucia auth: manual WebAuthn. Clerk: wbudowane passkeys. better-auth: WebAuthn adapter.

Passkeys UX — jak projektować flow rejestracji i logowania?

Conditional UI (autofill): input type='email' autocomplete='username webauthn'. navigator.credentials.get({mediation: 'conditional'}). Przeglądarka automatycznie pokazuje passkeys. Brak dodatkowego button 'zaloguj passkey'. Najlepszy UX. Rejestracja passkey: Po udanym logowaniu hasłem. Wyświetl banner: 'Włącz szybsze logowanie?'. Wyjaśnij co to passkey (prosto). Jeden przycisk 'Włącz'. Nie wymuszaj. Fallback: hasło zawsze dostępne. Zarządzanie passkeys: Strona w ustawieniach konta. Lista urządzeń z passkeys. Usuń urządzenia. Dodaj nowe (np. nowy komputer). Nazwa urządzenia widoczna. Onboarding nowe urządzenie: QR code na innym urządzeniu. Roaming authenticator (YubiKey). Lub nowe hasło + potwierdź email. Błędy: NotAllowedError — użytkownik anulował. SecurityError — niepoprawny origin. Obsługa graceful. Komunikaty przyjazne. InvalidStateError — już zarejestrowany. Passkeys i MFA: Passkey zastępuje hasło I drugi czynnik. FIDO2 inherent user verification. Nie musisz TOTP/SMS po passkey. Ale można dodać TOTP jako opcję. Cross-device flow: na desktop -> kliknij zaloguj passkey. QR code. Zeskanuj telefonem. Uwierzytelnij biometrią na telefonie. Desktop zalogowany. Bluetooth proximity. Design: Klucz ikona (🔑) kojarzy się z hasłem. Używaj fingerprint/face-id ikonę. Google Material Symbols. Wyraźne wskazanie 'szybkie i bezpieczne'.

FIDO2, YubiKey i enterprise passkeys — zaawansowane tematy?

FIDO Alliance: organizacja standaryzująca. FIDO2 = WebAuthn + CTAP2. CTAP2: Client to Authenticator Protocol. Komunikacja z hardware key. USB, NFC, Bluetooth. YubiKey: hardware security key. Roaming authenticator. FIDO2 certified. Touch to confirm. PIN protection. YubiKey 5: USB-A i USB-C. NFC. FIDO2, PIV, TOTP, PGP. Yubikey dla enterprise: phishing resistant MFA. SOC2, FedRAMP compliance. PIV dla enterprise (PKI). Bitwarden Hardware Key. Attestation types: none — brak weryfikacji urządzenia. indirect — anonymized. direct — pełny certyfikat. enterprise — dla enterprise devices. Enterprise passkeys: device binding. Conditional access policies. MDM management (Intune, Jamf). Admin dashboard widoczność. Passkeys a GDPR: klucz prywatny na urządzeniu. Serwer przechowuje tylko public key. Brak biometrics na serwerze. Privacy preserving by design. Compliance friendly. Ranh tracking: RP ID binding. Nie można phishować na inną domenę. Cross-origin auth: nie możliwe standardowo. iFrame restrictions. CORS dla WebAuthn. Backup keys: 1Password, Bitwarden jako passkey vault. Sync across devices. Brak single point of failure. Recovery: email verification flow. Admin unlock. Emergency codes (TOTP backup). Account recovery process dokumentować.

Wyślij zapytanie