Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Securing user accounts with WebAuthn

Securing user accounts with WebAuthn

The Web Authentication API (also called WebAuthn) uses public-key cryptography instead of passwords or SMS for two-factor authentication in websites. In this talk, we will learn how to use the Web Authentication API, both in the browser-side as well as setting up the server-side to support WebAuthn.

Arnelle Balane

February 27, 2021
Tweet

More Decks by Arnelle Balane

Other Decks in Technology

Transcript

  1. Arnelle Balane Tech Lead @ Newlogic Google Developers Expert for

    Web Technologies @arnellebalane UncaughtException @uncaughtxcptn Subscribe to our channel! /UncaughtException
  2. Passwords must: • have 12 or more characters • contain

    at least 1 number • contain at least 1 uppercase letter • contain at least 1 lowercase letter • contain at least 1 special symbol
  3. Passwords must: • have 12 or more characters • contain

    at least 1 number • contain at least 1 uppercase letter • contain at least 1 lowercase letter • contain at least 1 special symbol U5XmcaJD>X(,"?qa
  4. Passwords must: • have 12 or more characters • contain

    at least 1 number • contain at least 1 uppercase letter • contain at least 1 lowercase letter • contain at least 1 special symbol Password+1!? 🙄
  5. { "challenge": "Xr0koZvdaxrhJJ...", "rp": { "id": "webauthn-api.arnelle.me", "name": "WebAuthn Demo"

    }, "user": { "id": "[email protected]", "name": "[email protected]", "displayName": "Arnelle Balane" }, "pubKeyCredParams": [ { "alg": -7, "type": "public-key" } ] }
  6. navigator.credentials.create({ publicKey: { challenge: toArrayBuffer('Xr0koZvdaxrhJJ...'), rp: { id: 'webauthn-api.arnelle.me', name:

    'WebAuthn Demo' }, user: { id: toArrayBuffer('[email protected]'), name: '[email protected]', displayName: 'Arnelle Balane', }, pubKeyCredParams: [ { alg: -7, type: 'public-key' } ] } });
  7. PublicKeyCredential { id: 'UG2APqfTRoyK3SAILd2n8ANsitRK...', rawId: ArrayBuffer(), type: 'public-key', response: {

    clientDataJSON: ArrayBuffer(), authenticatorData: ArrayBuffer(), signature: ArrayBuffer(), userHandle: ArrayBuffer() } }