1. THE STATE OF
********LESS
AUTH ON THE WEB

2. PHIL NASH
twitter.com/philnash
twitter.com/philnash
@phil@philna.sh
@phil@philna.sh
linkedin.com/in/philnash
linkedin.com/in/philnash
https://philna.sh
https://philna.sh

3. PASSWORDS

4. PASSWORDS
ARE TERRIBLE

5. TRADE
OFFS

6. VS

7. VS
USER EXPERIENCE

8. VS
USER EXPERIENCE
SECURITY

9. PASSWORDS
EXPERIENCE
Hard to remember
good passwords
Hard to choose good
passwords
Needs password
managers
SECURITY
Easy to break easy
passwords
Password
leaks/credential
stuffing
Vulnerable to
phishing

10. USE A
PASSWORD
MANAGER

11. PASSWORD MANAGER
EXPERIENCE
Good passwords are
easy
No repetition
SECURITY
Long, difficult
passwords
Unique passwords
Still vulnerable to
phishing

12. 24%
USE A PASSWORD MANAGER

13. CAN WE
IMPROVE
THIS?

14. autocomplete="new-password" />
<input
1
type="password"
2
name="password"
3
id="password"
4
5

16. type="email"
autocomplete="username" />
autocomplete="current-password" />
<input
1
2
name="username"
3
id="username"
4
5
6
<input
7
type="password"
8
name="password"
9
id="password"
10
11

17. CREDENTIAL
MANAGEMENT API

18. STORE AND RETRIEVE CREDENTIALS

19. STORE CREDENTIALS
if ("PasswordCredential" in window) {
const cred = new PasswordCredential({
id: userId,
password: password
});
try {
await navigator.credentials.store(cred);
} catch(error) {
console.error(error);
}
window.location.href = loggedInUrl;
}
1
2
3
4
5
6
7
8
9
10
11
12

20. STORE CREDENTIALS
if ("PasswordCredential" in window) {
const cred = new PasswordCredential({
id: userId,
password: password
});
try {
await navigator.credentials.store(cred);
} catch(error) {
console.error(error);
}
window.location.href = loggedInUrl;
}
1
2
3
4
5
6
7
8
9
10
11
12
const cred = new PasswordCredential({
id: userId,
password: password
});
if ("PasswordCredential" in window) {
1
2
3
4
5
try {
6
await navigator.credentials.store(cred);
7
} catch(error) {
8
console.error(error);
9
}
10
window.location.href = loggedInUrl;
11
}
12

21. STORE CREDENTIALS
if ("PasswordCredential" in window) {
const cred = new PasswordCredential({
id: userId,
password: password
});
try {
await navigator.credentials.store(cred);
} catch(error) {
console.error(error);
}
window.location.href = loggedInUrl;
}
1
2
3
4
5
6
7
8
9
10
11
12
const cred = new PasswordCredential({
id: userId,
password: password
});
if ("PasswordCredential" in window) {
1
2
3
4
5
try {
6
await navigator.credentials.store(cred);
7
} catch(error) {
8
console.error(error);
9
}
10
window.location.href = loggedInUrl;
11
}
12
await navigator.credentials.store(cred);
if ("PasswordCredential" in window) {
1
const cred = new PasswordCredential({
2
id: userId,
3
password: password
4
});
5
try {
6
7
} catch(error) {
8
console.error(error);
9
}
10
window.location.href = loggedInUrl;
11
}
12

22. RETRIEVE CREDENTIALS
const creds = await navigator.credentials.get({
password: true
});
if (creds) {
loginWith(creds);
}
1
2
3
4
5
6

23. RETRIEVE CREDENTIALS
SILENTLY
unmediated: true,
const creds = await navigator.credentials.get({
1
password: true,
2
3
});
4
if (creds) {
5
loginWith(creds);
6
}
7

24. WHEN SIGNING OUT
navigator.credentials.preventSilentAccess()

27. CREDENTIAL MANAGEMENT
EXPERIENCE
One click logins
No need to
remember
passwords
SECURITY
Easy to break easy
passwords
Password
leaks/credential
stuffing
Less vulnerable to
phishing

28. TWO FACTOR
AUTHENTICATION

30. TWO FACTOR
AUTHENTICATION
EXPERIENCE
Two steps
Needs another
device
Requires phone
signal
SECURITY

31. CAN WE
MAKE IT
BETTER?

32. inputmode="numeric"
autocomplete="one-time-code" />
<input
1
type="text"
2
name="otp"
3
id="otp"
4
5
6

33. WEBOTP
API

34. CREDENTIAL
MANAGEMENT API
(AGAIN)

36. if ('OTPCredential' in window) {
navigator.credentials.get({
otp: {
transport: ['sms']
}
}).then((otp) => {
console.log(otp.code);
});
}

37. TWO FACTOR
AUTHENTICATION
EXPERIENCE
Two (minimal)
steps
Needs another
device
Requires phone
signal
SECURITY

38. 2FA WITH SECURITY
KEY

39. WEBAUTHN

40. navigator.credentials.create({
publicKey: {
challenge: challengeFromServer,
rp: {
id: "example.com",
},
user: {
id: userId,
name: "philnash",
displayName: "Phil Nash",
},
pubKeyCredParams: [
{ type: "public-key", alg: -7 },
{ type: "public-key", alg: -257 }
]
}

41. navigator.credentials.get({
publicKey: {
challenge: challengeFromServer,
allowCredentials: [{
id: credentialId,
type: 'public-key',
transports: ['usb', 'ble', 'nfc'],
}]
}
});

42. 2FA WITH WEBAUTHN
EXPERIENCE
Two (minimal) steps
Needs authenticator
key or platform
authenticator
Need to either move
key around or
register multiple
devices
SECURITY
Overcomes
poor/leaked
passwords with
second factor
Public/private key
cryptography,
unleakable!
Phishing resistant!

43. PASSWORDLESS

44. MAGIC
LINKS

45. MAGIC LINKS
EXPERIENCE
No need for a password
Relies on email
Friction
SECURITY
Pretty secure

46. PASSKEYS

47. PASSKEYS
MULTI DEVICE CREDENTIALS

48. PASSKEYS
WebAuthn but with platform authenticator
WebAuthn but with platform authenticator
Verifies the user on the device
Verifies the user on the device
Authenticates the user with the server
Authenticates the user with the server
Syncs across your devices
Syncs across your devices
Can be used cross device where sync is not
Can be used cross device where sync is not
possible
possible

49. if (window.PublicKeyCredential &&
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailab
PublicKeyCredential.​
​
isConditionalMediationAvailable) {
Promise.all([
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvail
PublicKeyCredential.​
​
isConditionalMediationAvailable(),
]).then(results => {
if (results.every(r => r === true)) {
// Call WebAuthn creation
}
});
}

50. navigator.credentials.create({
publicKey: {
challenge: challengeFromServer,
rp: { id: "example.com" },
user: { id: userId, name: "philnash", displayName: "Phil N
pubKeyCredParams: [
{alg: -7, type: "public-key"},
{ type: "public-key", alg: -257 }
],
authenticatorSelection: {
authenticatorAttachment: "platform",
requireResidentKey: true,
userVerification: "preferred"
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

51. navigator.credentials.create({
publicKey: {
challenge: challengeFromServer,
rp: { id: "example.com" },
user: { id: userId, name: "philnash", displayName: "Phil N
pubKeyCredParams: [
{alg: -7, type: "public-key"},
{ type: "public-key", alg: -257 }
],
authenticatorSelection: {
authenticatorAttachment: "platform",
requireResidentKey: true,
userVerification: "preferred"
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
authenticatorSelection: {
authenticatorAttachment: "platform",
requireResidentKey: true,
userVerification: "preferred"
}
navigator.credentials.create({
1
publicKey: {
2
challenge: challengeFromServer,
3
rp: { id: "example.com" },
4
user: { id: userId, name: "philnash", displayName: "Phil N
5
pubKeyCredParams: [
6
{alg: -7, type: "public-key"},
7
{ type: "public-key", alg: -257 }
8
],
9
10
11
12
13
14
}
15
});
16

52. DEMO

53. PASSKEYS
EXPERIENCE
No need for a password
Requires platform
authenticator
Syncs
SECURITY
Phishing
resistant
Unleakable

54. PASSKEYS
EXPERIENCE
No need for a password
Requires platform
authenticator
Syncs
SECURITY
Phishing
resistant
Unleakable
Perfect?

55. OTHER
DRAWBACKS?

56. OTHER
DRAWBACKS?
Browser support!
Browser support!

57. OTHER
DRAWBACKS?
Browser support!
Browser support!
But it's coming
But it's coming

58. RECOMMENDATIONS

59. RECOMMENDATIONS
Detect passkey support and offer it first
Detect passkey support and offer it first

60. RECOMMENDATIONS
Detect passkey support and offer it first
Detect passkey support and offer it first
Support multiple passkeys
Support multiple passkeys

61. RECOMMENDATIONS
Detect passkey support and offer it first
Detect passkey support and offer it first
Support multiple passkeys
Support multiple passkeys
Fallback to password with 2FA
Fallback to password with 2FA

62. RECOMMENDATIONS
Detect passkey support and offer it first
Detect passkey support and offer it first
Support multiple passkeys
Support multiple passkeys
Fallback to password with 2FA
Fallback to password with 2FA
Once a user can use passkeys, upgrade and
Once a user can use passkeys, upgrade and
remove old, weak
remove old, weak credentials
credentials

63. LINKS
https://webauthn.me/
https://webauthn.me/
https://web.dev/passkey-registration/
https://web.dev/passkey-registration/
https://web.dev/web-otp/
https://web.dev/web-otp/
https://web.dev/security-credential-
https://web.dev/security-credential-
management/
management/

64. THANK YOU
twitter.com/philnash
twitter.com/philnash
@phil@philna.sh
@phil@philna.sh
linkedin.com/in/philnash
linkedin.com/in/philnash
https://philna.sh
https://philna.sh