I would like to render a “log in with passkeys” button in the browser based on if the user has previously registered to passkeys. currently I can only tell after the user has authenticated and have an active session (using the user object). I was wondering if there is another way? maybe using the browser api?
Hey Shay – thanks for posting! I followed up in our community Slack as well, but I’ll post my response here for anyone else looking on.
There isn’t really a great way to check whether the user has a registered passkey in the browser without attempting to go through the auth flow (this is a browser limitation, I believe), but what we generally recommend is first checking whether the browser supports autofill and if so, setting conditional_mediation
to true
when calling the Passkeys authenticate method.
When using conditional mediation, there will be a passkey autofill prompt when one exists.
This is essentially how our pre-built UI component for Passkeys works, which you can play around with here to see the UX if you’re curious: https://stytch-passkey-demo.app/