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

# Stytch Passkey Registration

> Implement passkey registration UI using the Stytch React SDK

<Frame>
  <img src="https://mintcdn.com/stytch-34ca0595/chUftqYqk2C1W0Ql/images/api-reference/b2c/frontend-sdks/prebuilt-ui-passkey-registration.png?fit=max&auto=format&n=chUftqYqk2C1W0Ql&q=85&s=12e20bfc4c558cbfe1d979f046e23011" alt="Example of Passkey Registration component" style={{ maxWidth: "400px" }} width="864" height="822" data-path="images/api-reference/b2c/frontend-sdks/prebuilt-ui-passkey-registration.png" />
</Frame>

The SDK comes with a pre-built UI component to register passkeys. This component will only work when the user has an existing Stytch session.

## Props

<ParamField path="config" type="object">
  The configuration object for the UI component. This component accepts the same `config` as StytchLogin so you can reuse the config, although most options will not have any effect.

  <Expandable title="properties">
    <ParamField path="passkeysOptions" type="object">
      The options for passkeys.

      <Expandable title="properties" defaultOpen>
        <ParamField path="domain" type="string">
          Sets the domain option for both WebAuthn registration and authentication. Defaults to the current page's hostname.
        </ParamField>
      </Expandable>
    </ParamField>
  </Expandable>
</ParamField>

<ParamField path="presentation">
  The `presentation` field allows you to customize the look of the SDK. This component accepts the same `presentation` prop as `StytchLogin` so you can reuse it. For more information, see the [Theming documentation](./theming).
</ParamField>

<ParamField path="callbacks" type="object">
  Optional callbacks that are triggered by various events in the SDK. See more details about the callbacks [here](/api-reference/consumer/frontend-sdks/react/prebuilt-ui/login/callbacks).

  <ParamField path="onEvent" type="(data) => void">
    A callback function that responds to events sent from the SDK.

    <Expandable title="events" defaultOpen>
      <ParamField path="PASSKEY_REGISTER" type="(data) => void">
        Fired when the user successfully registers a new passkey.

        ```js data theme={null}
        {
          user_id: "user_id",
          session: { ... },
          user: { ... },
          webauthn_registration_id: "webauthn-registration-test-db72fcc0-edae-4bb4-8d52-0b2a765683df"
        }
        ```
      </ParamField>

      <ParamField path="PASSKEY_SKIP">
        Fired when the user presses the skip button.
      </ParamField>

      <ParamField path="PASSKEY_DONE">
        Fired when the user presses the done button.
      </ParamField>
    </Expandable>
  </ParamField>

  <ParamField path="onError" type="(data) => void">
    A callback function that responds to errors in the SDK. It is useful for debugging during development and error handling in production.
  </ParamField>
</ParamField>

<ParamField path="strings" type="object">
  Specify custom strings to be used in the prebuilt UI. Consult the message catalog (messages/en.po) for the list of available strings. Each value should be specified using ICU MessageFormat.

  Strings that are not defined will use the default English value as a fallback.

  See [Text Customization](/api-reference/consumer/frontend-sdks/react/prebuilt-ui/text-customization) for more information.
</ParamField>

<Panel>
  <CodeGroup>
    ```jsx theme={null}
    import { Products, StytchPasskeyRegistration } from '@stytch/react';

    const config = {
      passkeysOptions: {
        domain: 'example.com',
      },
    };

    export const PasskeyRegistration = () => {
      return <StytchPasskeyRegistration config={config} />;
    };
    ```
  </CodeGroup>
</Panel>