Building a better login
with the credential management API
James Allardice
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3584641/orangejellyfish-square.png)
Evolution of login
@james_allardice #websc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3680459/Screenshot_2017-04-07_07.51.50.png)
Username/password forms
@james_allardice #websc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3680462/Screenshot_2017-04-07_07.54.39.png)
Stored credentials
@james_allardice #websc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3680465/Screenshot_2017-04-07_07.56.47.png)
Autofill
@james_allardice #websc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3680471/Screenshot_2017-04-07_08.01.23.png)
You can sync passwords across devices.
@james_allardice #websc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3680478/Screenshot_2017-04-07_08.10.05.png)
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
@james_allardice #websc
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3677793/Screenshot_2017-04-06_16.00.13.png)
Assertion about an entity which enables a trust decision
@james_allardice #websc
Browser support
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3984029/Screen_Shot_2017-07-13_at_07.52.47.png)
![](https://nodejs.org/static/images/logos/nodejs-new-pantone-black.png)
autocomplete
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/49778/images/3539743/Screenshot_2017-02-28_15.18.14.png)
@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
Building a better login (WebSC 2017)
- 1,056