WebAuthn and FIDO2 are key technologies for implementing password-free authentication, and their core lies in using public key encryption instead of traditional passwords. 1. WebAuthn is a browser API developed by W3C, allowing websites to register and verify users through public keys; 2. FIDO2 is promoted by the FIDO alliance, including WebAuthn and CTAP protocols, and supports external hardware such as YubiKey; 3. The registration process includes generating challenges, collecting user information, calling create() to create key pairs, storing public keys and verifying proof responses; 4. The authentication process is similar, but using get() and requiring users to confirm existence; 5. Implementation suggestions include using the library to handle details, retaining alternative login methods, cross-platform testing, enabling cross-device synchronization, and enhancing endpoint security. Together, these steps ensure a secure and smooth password-free experience.

If you're looking to implement secure, passwordless authentication on the web, WebAuthn and FIDO2 are two of the most powerful tools available today. These standards allow users to log in using biometrics, security keys, or built-in platform authenticators — no passwords required.

Here's how they work and what you need to know as a developer.

What Are WebAuthn and FIDO2?

WebAuthn is a web standard developed by the W3C that allows websites to register and authenticate users via public-key cryptography instead of passwords. It's part of the larger FIDO2 project led by the FIDO Alliance, which includes both WebAuthn (the browser API) and CTAP (Client to Authenticator Protocol), which handles communication with external hardware like YubiKeys.

The key idea: Instead of storing passwords on your server, you store a user's public key. The private key stays on their device and never leaves it. When they log in, the site asks the device to prove it owns the private key — without ever transmitting the key itself.

This makes phishing and credential theft much harder.

How to Register a New User Using WebAuthn

Setting up passwordless registration involves a few steps:

1. Generate a challenge
   The server creates a random byte string (the challenge) to prevent replay attacks.

2. Get user info
   Collect a username and display name from the user. This helps identify the account later.

3. Call navigator.credentials.create()
   The browser prompts the OS or authenticator to generate a new key pair. The private key stays on the device; the public key gets sent back.

4. Store the public key and credential ID
   Save this data on your backend along with the user's identity.

5. Verify the attestation response
   The browser returns a signed response proving the key was generated securely. You need to validate this on the server side.

You'll typically structure this in JSON format for the frontend to consume. Here's a simplified example:

 {
  "challenge": "random-bytes-as-base64",
  "rp": { "name": "My App" },
  "user": {
    "id": "user-unique-id",
    "name": "alice@example.com",
    "displayName": "Alice"
  },
  "pubKeyCredParams": [
    {"type": "public-key", "alg": -7},
    {"type": "public-key", "alg": -257}
  ]
}

Once the user completes registration, you can use the same system for login.

How to Authenticate an Existing User

Authentication follows a similar flow but uses navigator.credentials.get() instead of .create() . Here's how it works:

• The server sends a challenge again.
• The browser finds matching credentials on the user's device.
• The user confirms present (eg, by touching a key or scanning a fingerprint).
• The authenticator signs the challenge and returns it.
• Your server verifies the signature against the stored public key.

One thing to note: Credential IDs must be unique per registered device or method. So if a user logs in from a new laptop or phone, they'll need to register a new credential.

Also, browsers enforce privacy protections — for example, Chrome may ask users to select an account before showing passkeys, even if only one exists.

Practical Tips for Implementation

Here are some things to keep in mind when building with WebAuthn:

• Use libraries where possible
  Libraries like SimpleWebAuthn handle many of the edge cases and cryptographic validations for you.

• Support fallbacks
  Not all devices support WebAuthn yet. Keep traditional login methods around until adoption grows.

• Test across platforms
  Behavior varies between Windows Hello, Touch ID, Android, iOS, and USB keys. Make sure your UX is consistent.

• Enable cross-device sync
  Passkeys can be synchronized through iCloud Keychain or Google Password Manager. Encourage users to enable syncing so they don't lose access.

• Secure your endpoints
  Don't skip server-side validation. Even though the browser does most of the crypto, you still need to verify responses properly.

That's basically how WebAuthn and FIDO2 work together to enable passwordless auth. It's not overly complex once you understand the flow, but there are enough moving parts to make careful implementation important.

The above is the detailed content of Exploring JavaScript WebAuthn and FIDO2 for Passwordless Auth. For more information, please follow other related articles on the PHP Chinese website!