> ## 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.

# useSignInWithPasskey

> [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.

> [!NOTE]
>
> ### This is only for use with signin. Passkey is not currently supported for registration.

### Summary

This hook provides a way for clients to sign-in to Dynamic using a passkey.

The hook needs to be initialized within a child of [DynamicContextProvider](https://docs.dynamic.xyz/docs/react/reference/providers/dynamiccontextprovider.md).

### Usage

Available methods:

* `signInWithPasskey`: Sign in to Dynamic by calling the function returned from this hook. This will automatically set the logged-in Dynamic `user` when successful. The hook itself optionally accepts a named parameters object: `{ relatedOriginRpId?: string }`.

### Usage

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

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

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

### Optional parameters

* `relatedOriginRpId` (optional): The Relying Party ID (RP ID) to use when signing in from a related origin (for example, a sibling subdomain of the domain where the passkey was registered). The canonical form is a **bare hostname** such as `my.example.com`; a full origin like `https://my.example.com` is also accepted and resolves to the same RP ID. It must match the `rpId` the credential was registered under. See [Related Origin Requests](https://passkeys.dev/docs/advanced/related-origins/) for how sibling origins are authorized.

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

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

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

### Prerequisites

Before using this hook, ensure that:

1. [Passkey Authentication is Enabled](https://docs.dynamic.xyz/docs/react/authentication-methods/passkey.md#console-configuration) as an authentication method.

2. Domain Configuration: For production use, your domain must be properly configured for WebAuthn. This includes:

   * HTTPS protocol (required for passkeys)
   * Proper domain registration in your Dynamic environment settings

3. User Has Registered Passkey: The user must have previously registered a passkey with your application. If they haven't, they'll need to register one first using the Dynamic widget or appropriate registration flow.

4. Browser Support: Ensure the user's browser supports WebAuthn. Most modern browsers support passkeys, but you may want to add feature detection.

### Important Notes

> [!NOTE]
>
> **Domain Scope**: Passkeys are scoped to top-level domains. A passkey created on `app.example.com` will work on `example.com` and `shop.example.com`, but will require a new registration for `app.different.com`.

> [!WARNING]
>
> **Browser Compatibility**: While most modern browsers support passkeys, always implement fallback authentication methods for broader compatibility.

> [!NOTE]
>
> **First-Time Users**: Users who haven't registered a passkey will need to complete the registration process before they can use this sign-in method. Consider providing clear instructions or alternative authentication options.


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