What is WebAuthn and Passkeys

• Public-key cryptography: authenticator generates a keypair per site
• FIDO2 = WebAuthn + CTAP (Client-to-Authenticator Protocol)
• Authenticator: platform (TouchID, Face ID) or roaming (Yubikey)
• Origin-bound: phishing-resistant (the key does not work on the wrong domain)
• Cross-device sync: iCloud Keychain, Google Password Manager (Passkeys)

navigator.credentials.create({
  publicKey: {
    challenge: randomBytes,
    rp: { name: "example.com" },
    user: { id, name, displayName },
    pubKeyCredParams: [{ alg: -7, type: "public-key" }]
  }
});

• OAuth 2.0
• JWT
• Zero Trust

WebAuthn (Web Authentication) is a standard developed by the W3C that provides a secure method for users to authenticate themselves without the use of traditional passwords. The process involves several key steps:

• Registration: The user registers an authenticator, which could be a hardware device like a Yubikey or a biometric system such as TouchID or Windows Hello. During this phase, the authenticator creates a unique public/private key pair.
• Public Key Storage: The public key is sent to the server and stored alongside the user's account. The private key remains securely on the authenticator and is never shared.
• Authentication: When logging in, the user initiates the authentication process, which prompts the authenticator to sign a challenge provided by the server. The server then verifies the signature using the stored public key.

This flow ensures that sensitive information is never transmitted over the network, drastically reducing the risk of phishing attacks. Additionally, since the private key is device-specific, even if an attacker gains access to the public key, they cannot impersonate the user without the corresponding authenticator.

Integrating WebAuthn into your web application can enhance security by enabling passwordless authentication. Below are the steps and example code snippets using JavaScript:

1. Registration: Use the navigator.credentials.create() method to register a new user.

const publicKey = {    challenge: new Uint8Array(32),    rp: { name: 'Your App' },    user: {        id: new Uint8Array(16),        name: 'user@example.com',        displayName: 'User'    },    pubKeyCredParams: [        { type: 'public-key', alg: -7 }    ]};navigator.credentials.create({ publicKey }).then((credential) => {    // Send credential to server for registration    console.log(credential);});

2. Authentication: Use navigator.credentials.get() to authenticate the user.

const publicKey = {    challenge: new Uint8Array(32),    allowCredentials: [        { id: new Uint8Array(16), type: 'public-key' }    ]};navigator.credentials.get({ publicKey }).then((assertion) => {    // Send assertion to server for verification    console.log(assertion);});

Ensure that your server-side code handles the registration and authentication processes securely, storing public keys and verifying signatures correctly.

Passkeys are an evolution in secure authentication, providing significant advantages over traditional password-based systems. Here are some key benefits:

• Password Elimination: Passkeys remove the need for users to remember complex passwords, reducing the likelihood of weak passwords and password reuse across sites.
• Cross-Device Syncing: Major platforms such as Apple, Google, and Microsoft allow passkeys to be synced across devices, ensuring seamless access without compromising security.
• Phishing Resistance: Since passkeys are origin-bound, they cannot be used on fraudulent websites, significantly mitigating phishing risks.
• Enhanced User Experience: Logging in with biometrics or a security key is faster and more convenient than typing a password, improving user engagement.

In summary, adopting passkeys not only enhances security but also streamlines the user experience, making it an attractive option for developers and users alike.