Passkeys

A simpler and safer sign-in

Tian Sen

[email protected]

  • What are passkeys
  • Password vs Passkeys
  • How Passkeys works
  • Passkeys autofill
  • Appdendices
  • QA

Agenda

What are passkeys?

What are passkeys?

Passkeys are a replacement for passwords. A password is something that can be remembered and typed, and a passkey is a secret stored on one’s devices, unlocked with biometrics.

Password  vs Passkeys

Password sign in flow

Password requirements:

  • At least 12 characters
  • A lowercase letter
  • An uppercase letter
  • A number
  • A symbol
  • No parts of your username
  • Does not include your first name
  • Does not include your last name
  • Password can't be the same as your last 10 passwords

Password Manager

  • More costs
  • Store credenticals to third party
  • Poor user experience

Challenages

  • Easy to Forget
  • The rules are complex
  • Security Risk
  • Long login process
  • Poor user experience

Password  vs Passkeys

https://passkey-demo.blog.tiansen.me/login

https://github.com/login

  • Passwordless
  • Usernameless
  • More security
  • Easy to login
  • Better user experience

Passkeys

Password

  • Easy to Forget
  • The rules are complex
  • Security Risk
  • Long login process
  • Poor user experience

How passkeys work?

Web Authentication API

  • Enables strong authentication with public key cryptography
  • Enabling passwordless authentication
  • Secure multi-factor authentication (MFA) without SMS texts

Passkeys are a significant use case for web authentication

navigator.credentials.get()
navigator.credentials.create()

Create a passkey

* https://web.dev/articles/passkey-registration

Create a passkey

let credential = await navigator.credentials.create({
  publicKey: {
    challenge: new Uint8Array([117, 61, 252, 231, 191, 241, ...]),
    rp: { id: "passkey-demo.blog.tiansen.me", name: "Passkey Demo Online" },
    user: {
      id: new Uint8Array([79, 252, 83, 72, 214, 7, 89, 26]),
      name: "[email protected]",
      displayName: "[email protected]"
    },
    pubKeyCredParams: [
      {type: "public-key", alg: -7}, // ES256
      {type: "public-key", alg: -257} // RS256
	]
  }
});

Authenticating a user

* https://web.dev/articles/passkey-form-autofill

Authenticating a user

let credential = await navigator.credentials.get({
  publicKey: {
    challenge: new Uint8Array([149, 66, 181, 87, 7, 203, ...]),
    rpId: "passkey-demo.blog.tiansen.me",
    allowCredentials: [{
      type: "public-key",
      id: new Uint8Array([64, 66, 35, 78, 168, 126, 174, ...])
    },{
      type: "public-key",
      id: new Uint8Array([88, 86, 53, 87, 168, 226, 184, ...])
    }]
  }
});

Passkeys Simple demo

Simple DEMO

Passkeys autofill

Condition UI

Text

Simple DEMO

Condition UI flow

Condition UI code

<input type="text" name="username" autocomplete="username webauthn" ...>

<script>
  // Availability of `window.PublicKeyCredential` means WebAuthn is usable.
  if (window.PublicKeyCredential &&
    PublicKeyCredential.isConditionalMediationAvailable) {
    // Check if conditional mediation is available.
    const isCMA = await PublicKeyCredential.isConditionalMediationAvailable();
    if (isCMA) {
      const publicKeyCredentialRequestOptions = {
        // Server generated challenge
        challenge: new Uint8Array([123, 123, 123, 1, 123, ...]),
        rpId: 'localhost',
      };

      const credential = await navigator.credentials.get({
        publicKey: publicKeyCredentialRequestOptions,
        // Specify 'conditional' to activate conditional UI
        mediation: 'conditional'
      });
    }
  }


</script>

Benefits

Benefits

Friendly to Humans

Resistant to phishing, credential stuffing, and other remote attacks

Secure by Design

Passkeys will be available wherever and whenever they need them.

Scalability

Passkeys use your fingerprint or other biometric to log into your websites, just like unlocking your device

Resistant to phishing, credential stuffing, and other remote attacks

Appendices

Can I Use: Passkeys

Device Support

Refers & Links

  1. https://passkeys.dev/
  2. https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API
  3. https://io.google/2023/program/0c9e010f-617a-426a-a4fb-bd1d19c91358/
  4. https://webauthn.io/
  5. https://simplewebauthn.dev/
  6. https://web.dev/articles/passkey-registration
  7. https://www.corbado.com/blog/webauthn-resident-key-discoverable-credentials-passkeys#resident-keys
     

Thank You!

Questions?

Feedback link