Sign In Button

[outbackStack]

Hi Guys,

I would like to create a button like this to sign in using passkey. My question is, how would the backend know what options to generate when the user press this button?

[MasterKale]

Hello @outbackStack, give the Advanced Guides > Passkeys section of the docs a read:

https://simplewebauthn.dev/docs/advanced/passkeys

I hope it answers your question. If it doesn't then please feel free to ask any clarifying questions here.

[outbackStack]

thanks @MasterKale! I should have read the doc a bit better 😀

[outbackStack]

Hi @MasterKale

I got it working and everything is all good. However, when I set to requireUserVerification: true, it gives me the following error.

User verification required, but user could not be verified

Is this because some devices are not compatible?

[MasterKale]

Ah yeah, that'll be caused by requireUserVerification: true in the code sample. I should really set that to false because sometimes authenticators won't perform UV for sake of an optimized user experience. If you pass in "preferred" user verification in your authentication options then sometimes you'll get back uv:false, which will fail with requireUserVerification: true during validation.

I tried to explain this here, but clearly I didn't explain this nuance well enough:

userVerification is "preferred" here because it smooths out potential frictions if a user attempts to use passkeys on a device without a biometric sensor. See "A note about user verification" on passkeys.dev for more context. The actual enforcement of user verification being required for proper passwordless support happens below during response verification.

And if you follow that link, this bit of text will be relevant here too:

When preferred is used, some platform authenticators will always require a user verification check when the device has biometric sensors, but may skip user verification on devices without them.

The user verification result (conveyed in authenticator data flags) will reflect the actual user verification result and should always be validated against your requirements on the server.

So you, as an RP, need to decide if you're okay with UV not taking place sometimes. If you are, then continue specifying userVerification: "preferred" with requireUserVerification: false during validation. If you must always see UV performed then set userVerification: "required" instead and continue specifying requireUserVerification: true during validation.

I would argue that unless you are in a highly regulated industry, passkeys are so strong even without UV that you might optimize for UX over security here. Just my $0.02.

[outbackStack]

So when I set userVerification: 'required' it works. I don't think you can have it as preferred like the example.

[MasterKale]

I think what I'll do instead is update the subsequent call to verifyAuthenticationResponse() in the doc's passkeys example to specify requireUserVerification: false 🤔

[outbackStack]

I just copied what is in the example so it would be good to have the defaults working for dummies like me 😀

I want to set it at the strict mode with userVerification: 'required' and requireUserVerification: true but encounter at times where it doesn't work like for example:

• When you use in Safari on a second monitor with a MacBook in Clamshell mode. I think it's because it's looking for the finger print for authorisation but can't find it. Using Chrome it works as it pop up a password prompt so not sure why there...

Anyways, thanks @MasterKale for the help.

[MasterKale]

When you use in Safari on a second monitor with a MacBook in Clamshell mode.

This is my day-to-day use of my MacBook and it sucks when there's a website that prefers UV but then rejects uv:false 😭

[outbackStack]

I think it's better just to leave it as it is and put a note saying if you get this error then change to userVerification: 'required' but be aware of limitations...