The user must have already signed in via another method (e.g. email/password, social, etc.) and added a passkey to their account before they can use it to sign in with.You can prompt a user to add a passkey to their account by using the useRegisterPasskey hook or by directing them to the “Account & Security” section of the Dynamic Widget.

Dashboard Configuration

Simply toggle on “Passkey” in the Log in & User Profile section of the dashboard.

Dynamic UI

Once toggled on, these methods will be available in the Dynamic widget, and you can customize the behaviour using the following guide.

Hooks Only (Headless)

All we will need for this use case is the useSignInWithPasskey hook. Once you have those available in your component, the rest is as simple as building your form!

Code Example

import { useSignInWithPasskey } from '@dynamic-labs/sdk-react-core';

const App = () => {
  const signInWithPasskey = useSignInWithPasskey();

  return (
    <button
      onClick={() => signInWithPasskey()}
    >
      Sign in with passkey
    </button>
  );
};