Passkeys

To authenticate your users with a passkey, you can use the useLoginWithPasskey hook. The useLoginWithPasskey hook returns:

• initPasskey: a method that starts the passkey login flow
• state: a variable that tracks the login flow state

Example usage

As an example, you might set up a LoginWithPasskey component for your app that uses these methods, like below:

import {useLoginWithPasskey} from '@privy-io/react-auth';

export default function LoginWithPasskey() {
  const {state, initPasskey} = useLoginWithPasskey();

  return <button onClick={initPasskey}>Log in with Passkey</button>;
}

Tracking login flow state

The state variable returned from the useLoginWithPasskey hook will always be one of the following values.

type PasskeyFlowState =
  | {status: 'initial'}
  | {status: 'error'; error: Error | null}
  | {status: 'generating-challenge'}
  | {status: 'awaiting-passkey'}
  | {status: 'submitting-response'}
  | {status: 'done'};

Learn more about conditional rendering with the state variable in the state guide.