> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Authenticate with Passkey

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

## Dashboard Configuration

Simply toggle on "Passkey" in [the Log in & User Profile section of the dashboard](https://app.dynamic.xyz/dashboard/log-in-user-profile).

<Note>
  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 using your SDK's passkey registration method (see SDK-specific Tabs) or by directing them to the "Account & Security" section of the Dynamic Widget.
</Note>

## Using our UI

Once toggled on, these methods will be available in the Dynamic widget.

## Using your UI

All we will need for this use case is the [useSignInWithPasskey hook](/react/reference/hooks/login-user-management/usesigninwithpasskey).

Once you have those available in your component, the rest is as simple as building your form!

### Code Example

```tsx React theme={"system"}
import { useSignInWithPasskey } from '@dynamic-labs/sdk-react-core';

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

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