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

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

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

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

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

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

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

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

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

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

navigator.credentials.preventSilentAccess()

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

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

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

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

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

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

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

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!

No need for a password
Relies on email
Friction
Pretty secure

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

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

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

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

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

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

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

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