Building a better login

with the credential management API

James Allardice

@james_allardice

https://orangejellyfish.com

Evolution of login

@james_allardice #websc

Username/password forms

@james_allardice #websc

Stored credentials

@james_allardice #websc

Autofill

@james_allardice #websc

You can sync passwords across devices.

@james_allardice #websc

Federated identity providers

@james_allardice #websc

The Credential Management API

  • Spec work started early 2015 [1]
  • Championed by Mike West at Google [2]
  • Provides 2 key mechanisms
    • Help the user authenticate by providing access to credentials
    • Help the browser store credentials provided by the user

[1]:  https://www.w3.org/TR/credential-management-1/

[2]:  https://github.com/mikewest

@james_allardice #websc

https://www.w3.org/TR/credential-management-1/#terms

Assertion about an entity which enables a trust decision

@james_allardice #websc

Browser support

[1]:  http://caniuse.com/#feat=credential-management

[2]:  https://bugzilla.mozilla.org/show_bug.cgi?id=1156047

[3]:  https://developer.microsoft.com/en-us/microsoft-edge/platform/status/credentialmanagementapi/

https://github.com/jamesallardice/web-summer-camp-2017-workshop

autocomplete

[1]:  https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill 

autocomplete="username"
autocomplete="current-password"
autocomplete="new-password"
Content-Type / Accept
res.format({
  html: () => { /* ... */ },
  json: () => { /* ... */ },
});
fetch
fetch('/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
  },
  credentials: 'include',
  body: formData,
})
.then((response) => response.json())
.then((json) => { /* ... */ });
navigator.credentials

@james_allardice #websc

@james_allardice #websc

const credential = new PasswordCredential(form);

navigator.credentials.store(credentials)
.then(() => { /* ... */ });

@james_allardice #websc

PasswordCredential

  // Ask the browser for the stored password credential.
  navigator.credentials.get({
    password: true,
  })
  .then((credentials) => {
    // Make request.
  });

@james_allardice #websc

  
  // Prevent automatic logins for the rest of the session.
  navigator.credentials.preventSilentAccess();

@james_allardice #websc

  • Federated credentials?
  • Offline support?
  • Multi-factor authentication?
  • Security concerns?

What next?

Thank you!

@james_allardice #websc

Building a better login (WebSC 2017)

By James Allardice

Made with Slides.com

Building a better login (WebSC 2017)

  • 1,102

More from James Allardice