Gate a passkey button behind a real support check

I show a passkey sign-in button to every visitor, and on some browsers or older phones, tapping it just throws an error instead of doing anything.

BeginnerRead 5 minDoing: an hour5 steps

▶ Start

What you'll have at the end

A sign-in button that only renders once a real capability check confirms the browser and device can actually complete a passkey sign-in.

Before you start

You need

A sign-in screen with a passkey button already wired to call the browser's sign-in prompt, in a codebase that can hold and branch on a small piece of local state.

Not covered

Building the sign-in call itself, verifying it on the server, or offering a passkey inside the username field's autofill list.

Leans on

Learn what the browser actually knows

Ask the platform what it can actually do
Type the result so bad states can't compile

Wire it into the sign-in screen

Run the check once and hold the answer
Show it only in the ready state
Don't hide it for a missing platform check

Where to go next

Rehearse a passkey flow in Chrome's DevTools

go there to prove the check flips correctly on a device you do not personally own, before trusting it in production.

A WebAuthn error that reaches the user as something went wrong

go there for what to show when a supported device's own sign-in call still fails after the control has appeared.

Checked 22 Aug 2026

Part of the Web Authentication and Passkeys cookbook