by Stepan Suvorov

Stepan Suvorov

  • CTO @

  • Google Developer Expert

  • 🇺🇦 originally from Ukraine

  • GenAI Evangelist

#standWithUkraine 🇺🇦

Christiaan Brand

Security & Identity, Google

Thanks to

Maud Nalpas

Web security & privacy, Google

Auth Evolution

Something you know

Something you have

Something you are

Somewhere you are

Passwors?

  • High risk of Identity theft and phishing
  • Easily revealed to 3rd Party (accidentally or not)
  • Easily hacked using hash matching tables
  • Sharing as plain text
  • The strength of the password is not always verified automatically

Password managers?

MFA?

Hardware Keys?

Passkeys

How Passkeys Work?

FIDO2 Components

How Passkeys Work?

Sign-up

Public 🔑

 Private 🔑

CTAP

WebAuthn

How Passkeys Work?

Sign in

Public 🔑

 Private 🔑

Public 🔑

challenge

signed package with challenge

Also good to know

Syncing

Passkeys are not stored on a single device

Cross-device

Passkeys on one device can be used on a different device

Discoverable

Passkeys contain metadata that allows your system to present passkey to you

Passkeys

for personal use

Can I Use it?

keep secrets at Google/Apple?

More about implementation

Passkey Creation

navigator.credentials.create({
	publicKey: options
});

Passkey Creation

const publicKeyCredentialCreationOptions = {
  challenge: new ArrayBuffer([219]),
  rp: {
    name: "Slides",
    id: "slides.com",
  },
  user: {
    id: new ArrayBuffer([137]),
    name: "elisabeckett",
    displayName: "Elisa Beckett",
  },
  pubKeyCredParams: [{alg: -7, type: "public-key"}],
  authenticatorSelection: {
    authenticatorAttachment: "platform",
    requireResidentKey: true,
  },
  timeout: 30000
};

const credential = await navigator.credentials.create({
  publicKey: publicKeyCredentialCreationOptions
});

Use a Passkey

navigator.credentials.get({
  publicKey: requestOptions,
  mediation: 'conditional'
});

Use a Passkey

// 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) {
    // Call WebAuthn authentication
  }
}

const publicKeyCredentialRequestOptions = {
  // Server generated challenge
  challenge: new ArrayBuffer([219]),
  // The same RP ID as used during registration
  rpId: 'slides.com',
};

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

Demo Time

passkeys-demo.appspot.com

Conclusion

  • Passkeys are here

    • They are a significant UX improvement over passwords
    • They provide much better security guarantees (strong phishing resistance)
  • It might take time for regulation to catch up

    • Passkeys are new: It’ll take users some time to become accustomed

    • Understanding when passkeys are synced, and when they’re not, is hard

Thank you for your attention.

Questions?

Passkeys: Prepare for the Future for AmsterdamJS

By Stepan Suvorov

Passkeys: Prepare for the Future for AmsterdamJS

  • 56