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

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

16.
CREDENTIAL
MANAGEMENT API

17.
STORE AND RETRIEVE CREDENTIALS

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

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

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

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

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

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

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

25.
TWO FACTOR
AUTHENTICATION

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

27.
CAN WE
MAKE IT
BETTER?

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

29.
WEBOTP
API

30.
CREDENTIAL
MANAGEMENT API
(AGAIN)

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

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

33.
2FA WITH SECURITY
KEY

34.
WEBAUTHN

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

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

37.
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!

38.
PASSWORDLESS

39.
MAGIC
LINKS

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

41.
PASSKEYS

42.
PASSKEYS
MULTI DEVICE CREDENTIALS

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

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

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

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

47.
DEMO

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

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

50.
OTHER
DRAWBACKS?

51.
OTHER
DRAWBACKS?
Browser support!
Browser support!

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

53.
RECOMMENDATIONS

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

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

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

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

58.
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/

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