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

REC

Working

draft

Candidate

recommendation

Proposed

recommendation

Recommendation

REC

Working

draft

Candidate

recommendation

Proposed

recommendation

Recommendation

Credential Management API

(as of November 2017)

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

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/

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/

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

Assertion about an entity which enables a trust decision

[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/

Demo!

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

autocomplete="username"

autocomplete="current-password"

autocomplete="new-password"

const formData = new FormData(loginForm);

fetch('/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
  },
  credentials: 'include',
  body: formData,
})
.then((response) => response.json())
.then((json) => { /* ... */ });

const credential = new PasswordCredential(form);

navigator.credentials


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


// Ask the browser for the stored password credential.
navigator.credentials.get({
  password: true,
})
.then((credentials) => {
  const formData = new FormData();

  formData.append(credential.idName, credential.id);
  formData.append(credential.passwordName, credential.password);

  // Make request with `formData`
});

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

http://bit.ly/cm-api-migration-guide

https://github.com/GoogleChromeLabs/cm-api-shim

Supporting old Chrome

Security

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

Federated credentials?
Offline support?
Multi-factor authentication?

What next?

Thank you!

James Allardice

@james_allardice

https://orangejellyfish.com