> ## 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] Recommended: JavaScript SDK with React Hooks
>
> 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)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

## Console Configuration

Simply toggle on "Passkey" in [the Log in & User Profile section of the Dynamic Console](https://console.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.

## 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](https://docs.dynamic.xyz/docs/react/reference/hooks/login-user-management/usesigninwithpasskey.md).

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>
  );
};
```

### Signing in with a passkey from a related domain

Passkeys are bound to the Relying Party ID (RP ID) they were registered under, which is normally your site's domain. If your users registered passkeys on a different domain, for example a previous domain you are migrating away from, pass that domain as `relatedOriginRpId` to `useSignInWithPasskey` so they can keep signing in with their existing passkeys instead of registering new ones.

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

const App = () => {
  const signInWithPasskey = useSignInWithPasskey({
    relatedOriginRpId: 'old.example.com',
  });

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

Two conditions apply:

* `relatedOriginRpId` must be the RP ID the passkey was registered under, as a bare hostname such as `old.example.com`. A full origin like `https://old.example.com` is also accepted and resolves to the same RP ID.
* That domain must link the two origins by hosting `https://old.example.com/.well-known/webauthn` with your current domain in its `origins` list:

```json theme={"system"}
{ "origins": ["https://app.example.com"] }
```

This uses the WebAuthn related origins feature. See [Related Origin Requests](https://passkeys.dev/docs/advanced/related-origins/) for the underlying mechanism.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.