Password-based authentication is the weakest link in modern cybersecurity. Each year millions of credentials are stolen through phishing, data breaches, and brute-force attacks. A definitive solution already exists and relies on open standards such as WebAuthn, passkeys, and OAuth 2.0. This guide shows you how to eliminate classic passwords from your web projects by implementing a modern, secure, user-friendly authentication system that withstands even the most sophisticated attacks. Whether you are a Laravel, WordPress, or front-end developer, here you will find the technical foundations, implementation flows, and best practices for a passwordless future.
The Problem with Classic Passwords
Passwords have inherent vulnerabilities: they are reused, weak, interceptable, and represent the primary vector for credential stuffing. According to the Verizon Data Breach Investigations Report, over 80% of breaches involve compromised credentials. Additionally, password management creates user friction: recovery, reset, complexity requirements. Modern authentication overcomes these limits by replacing the shared secret (password) with a public-key mechanism.
For a complete overview of web security, refer to our pillar guide on cybersecurity for web developers.
WebAuthn and Passkeys: The Foundation of FIDO2
What is WebAuthn
Web Authentication (WebAuthn) is a W3C standard that enables authentication via public-key cryptography. Instead of sending a password, the browser generates a key pair (public and private). The private key stays on the user's device and is never transmitted. The public key is registered on the server. Each login requires a cryptographic challenge signed by the private key, making phishing impossible.
Passkeys: User-Friendly Implementation
Passkeys are the practical implementation of WebAuthn designed for everyday users. They can be device-bound (e.g., phone biometric sensor) or synced via cloud (iCloud Keychain, Google Password Manager, 1Password). Passkeys provide phishing resistance because they cannot be entered into a fake form – the challenge is signed only for the correct domain.
WebAuthn Registration Example in JavaScript
The following snippet shows a simplified client-side WebAuthn registration:
// Fetch registration options from server
const publicKeyCredentialCreationOptions = await fetch('/webauthn/register/begin', { credentials: 'include' }).then(r => r.json());
// Create credential
const credential = await navigator.credentials.create({ publicKey: publicKeyCredentialCreationOptions });
// Send response to server
await fetch('/webauthn/register/complete', {
method: 'POST',
body: JSON.stringify(credential),
headers: { 'Content-Type': 'application/json' }
});The server must validate the response using a library like web-auth/webauthn-lib for PHP or equivalent for Node.js. The public key is stored associated with the user for future authentications.
Deepen tag management with Google Tag Manager to track passwordless login events.
OAuth 2.0 and Identity Federation
OAuth 2.0: Delegating Authentication
OAuth 2.0 is not an authentication protocol but an authorization one. However, combined with OpenID Connect (OIDC), it enables single sign-on and federated authentication. Eliminating passwords does not mean abandoning OAuth – passkeys can become the verification method within an OAuth flow. For example, an Identity Provider (IdP) like Google or Apple can emit tokens after the user authenticates with a passkey on their device.
PKCE and Code Grant without Client Secret
For native apps and SPAs, using PKCE (Proof Key for Code Exchange) removes the need for a client_secret, making the flow more secure. The following example demonstrates initiating an OAuth flow with PKCE in JavaScript:
// Generate code verifier and challenge
const generateCodeChallenge = async (codeVerifier) => {
const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(codeVerifier));
return btoa(String.fromCharCode(...new Uint8Array(digest))).replace(/==$/, '');
};
// Redirect to authorization server with code_challenge
const params = new URLSearchParams({
response_type: 'code',
client_id: 'YOUR_CLIENT_ID',
redirect_uri: 'YOUR_REDIRECT_URI',
code_challenge_method: 'S256',
code_challenge: challenge
});
window.location.href = 'https://idp.example.com/authorize?' + params;Integration with Laravel Socialite
Laravel Socialite simplifies OAuth with external providers. To enable passkeys, consider using a middleware that checks if the user already has a registered passkey and, if so, skips the password in favor of a WebAuthn challenge.
Eliminating Passwords: Practical Roadmap
Phase 1: Add WebAuthn as an Optional Method
Start by implementing WebAuthn alongside the existing password. Offer the user the possibility to register a passkey after password login. Use mature server-side libraries like webauthn-lib (PHP) or @simplewebauthn/server (Node.js).
Phase 2: Make WebAuthn the Primary Method
Modify the login flow: if the user has a passkey, first show the WebAuthn challenge; if it fails, offer recovery via OAuth or email magic link. Never display the password form to users with an active passkey.
Phase 3: Remove the Password
After a transition period, disable new password creation and enforce passkey or OAuth for all users. Handle recovery with secure processes: verified email, backup codes, or re-registration via OAuth.
Considerations for Sync and Multiple Devices
Synced passkeys (via cloud) solve device loss. For users without cloud, allow registering multiple passkeys (e.g., phone and a hardware YubiKey). Follow W3C WebAuthn specification for compliant implementations.
Best Practices and Security
Phishing Resistance
Passkeys are inherently phishing-resistant: key pair creation is bound to the domain (origin). The server must verify that the challenge is signed with the correct private key and check the RP ID.
Biometric Privacy
Biometric data (fingerprint, face) is never transmitted to the server. WebAuthn uses only local verification on the device. The server receives only the challenge signature.
Backup and Recovery
Provide a passwordless account recovery mechanism: e.g., sending a temporary code via email (magic link) or using OAuth with a third-party provider. Do not introduce recovery passwords that would defeat the purpose.
Compatibility and Testing
All modern browsers support WebAuthn except some older devices. Use feature detection to show alternatives. Test using Developer Tools (Application > WebAuthn) to simulate virtual credentials.
Summary and Next Steps. Eliminating passwords is possible and desirable. WebAuthn and passkeys provide phishing-resistant security, while OAuth 2.0 with PKCE ensures secure federated flows. Start integrating WebAuthn into your Laravel or WordPress application today. Plan a gradual migration: add passkeys, make them primary, then disable passwords. Your users will thank you for a faster, more secure experience. For further insights on GDPR compliance in authentication contexts, read our GDPR guide for developers. If you use Livewire, check the article on Livewire 3 and Alpine.js to integrate WebAuthn without complex front-end code.
Sponsored Protocol
