Building a better login
with the credential management API
James Allardice
orangejellyfish
James Allardice
Simple forms
James Allardice
Stored credentials
James Allardice
Autofill
You can sync passwords across devices.
James Allardice
Federated identity providers
James Allardice
The Credential
Management API
James Allardice
WD
CR
PR
REC
Working
draft
Candidate
recommendation
Proposed
recommendation
Recommendation
James Allardice
WD
CR
PR
REC
Working
draft
Candidate
recommendation
Proposed
recommendation
Recommendation
Credential Management API
(as of November 2018)
James Allardice
James Allardice
Browser support
Help the user authenticate by providing access to credentials
James Allardice
Help the browser store credentials provided by the user
James Allardice
Assertion about an entity which enables a trust decision
James Allardice
James Allardice
Demo!
James Allardice
Demo!
James Allardice
Demo!
James Allardice
Demo!
autocomplete="username"autocomplete="current-password"autocomplete="new-password"James Allardice
const formData = new FormData(loginForm);
fetch('/', {
method: 'POST',
headers: {
Accept: 'application/json',
},
credentials: 'include',
body: formData,
})
.then((response) => response.json())
.then((json) => { /* ... */ });James Allardice
const credential = new PasswordCredential(form);
James Allardice
navigator.credentials
James Allardice
James Allardice
navigator.credentials.store(credentials)
.then(() => { /* ... */ });James Allardice
// 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`
});
James Allardice
// Prevent automatic logins for the rest of the session.
navigator.credentials.preventSilentAccess();James Allardice
Supporting old Chrome
James Allardice
// Prevent automatic logins for the rest of the session.
navigator.credentials.requireUserMediation();- Page must be served from a secure origin (HTTPS)
- Credentials for other origins not available
- Stored passwords are encrypted
James Allardice
Security
James Allardice
Security
- Federated credentials?
- Offline support?
- Multi-factor authentication?
- Web Authentication API?
James Allardice
What next?
Thank you!
James Allardice
orangejellyfish
Slides: https://slides.com/jamesallardice/building-a-better-login-itnext18
Building a better login (ITNEXT Summit 2018)
By James Allardice
