Presented at All Things Open 2023 Presented by Phil Nash - Sonar Title: The State of Passwordless Auth on the Web Abstract: Can we get rid of passwords yet? They make for a poor user experience and users are notoriously bad with them. The advent of WebAuthn has brought a passwordless world closer, but where do we really stand? In this talk we'll explore the current user experience of WebAuthn and the requirements a user has to fulfil to authenticate without a password. We'll also explore the fallbacks and safeguards we can use to make the password experience better and more secure. By the end of the session you'll have a vision of how authentication could look in the future and a blueprint for how to build the best auth experience today. Find more info about All Things Open: On the web: https://www.allthingsopen.org/ Twitter: https://twitter.com/AllThingsOpen LinkedIn: https://www.linkedin.com/company/all-things-open/ Instagram: https://www.instagram.com/allthingsopen/ Facebook: https://www.facebook.com/AllThingsOpen Mastodon: https://mastodon.social/@allthingsopen Threads: https://www.threads.net/@allthingsopen 2023 conference: https://2023.allthingsopen.org/

3. twitter.com/philnash
twitter.com/philnash
@philnash@mastodon.social
@philnash@mastodon.social
linkedin.com/in/philnash
linkedin.com/in/philnash
https://philna.sh
https://philna.sh

6. Source:
Source: Google / Harris Poll December 2018
Google / Harris Poll December 2018

8. 1. password
2. 123456
3. 123456789
4. guest
5. qwerty
6. 12345678
7. 111111
8. 12345
9. col123456
10. 123123
Source:
Source: NordPass Top 200 most common passwords
NordPass Top 200 most common passwords

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

15. Good passwords
are easy
No repetition
Long, difficult
passwords
Unique passwords
Still vulnerable to
phishing

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

20. 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

23. 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

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

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

26. navigator.credentials.preventSilentAccess()

29. One click logins
No need to
remember
passwords
Easy to break easy
passwords
Password
leaks/credential
stuffing
Less vulnerable to
phishing

32. Two steps
Needs another
device
Requires phone
signal
Overcomes
poor/leaked
passwords with
second factor
Still vulnerable to
phishing
Targeted SMS
attacks are possible

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

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

42. Two (minimal)
steps
Needs another
device
Requires phone
signal
Overcomes
poor/leaked
passwords with
second factor
Less vulnerable to
phishing
Targeted SMS
attacks are possible

45. 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 }
]
}

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

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

50. No need for a password
Relies on email
Friction
Pretty secure

52. 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

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

54. 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,
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
authenticatorSelection: {
authenticatorAttachment: "platform",
requireResidentKey: true,
}
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

55. https://www.passkeys.io/
https://www.passkeys.io/

56. No need for a password
Requires platform
authenticator
Syncs
Phishing
resistant
Unleakable
Perfect?

57. Browser support!
Browser support!
But it's coming
But it's coming

59. 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 credentials
remove old, weak credentials

60. https://passkeys.dev/
https://passkeys.dev/
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://philna.sh/blog/2022/12/07/better-
https://philna.sh/blog/2022/12/07/better-
two-factor-authentication-experiences-with-
two-factor-authentication-experiences-with-
web-otp/
web-otp/
https://web.dev/security-credential-
https://web.dev/security-credential-
management/
management/

61. twitter.com/philnash
twitter.com/philnash
@philnash@mastodon.social
@philnash@mastodon.social
linkedin.com/in/philnash
linkedin.com/in/philnash
https://philna.sh
https://philna.sh