Building a better login

with the credential management API

James Allardice

@james_allardice

https://orangejellyfish.com

Evolution of login

Username/password forms

Stored credentials

Autofill

You can sync passwords across devices.

Federated identity providers

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

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

Assertion about an entity which enables a trust decision

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/

Demo!

[1]: https://allardice.me/demo/credential-management-api/

Demo!

[1]: https://allardice.me/demo/credential-management-api/

Demo!

[1]: https://allardice.me/demo/credential-management-api/

Demo!

[1]: https://allardice.me/demo/credential-management-api/

⚠️

The code you're about to see is

likely to change soon!

https://developers.google.com/web/updates/2017/06/credential-management-updates

navigator.credentials


  const credentials = new PasswordCredential({
    id: username,
    password: password,
  });


  fetch('/login', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
    },
    credentials: passwordCredentials,
  });

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


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

  
  // Prevent automatic logins for the rest of the session.
  navigator.credentials.requireUserMediation()
  .then(() => {
    // Redirect to login page.
  });

Security

Page must be served from a secure origin (HTTPS)
Credentials for other origins not available
Stored passwords not exposed to JavaScript
Stored passwords are encrypted

Questions?

Thank you!

@james_allardice