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

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