useSignInWithPasskey

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) to get started.

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.

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. Optionally accepts a named parameters object: { relatedOriginRpId?: string }.

Usage

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): Specify the RP ID to use when signing in from a related origin (for example, a different subdomain or custom hostname related to your primary domain).

import { useSignInWithPasskey } from '@dynamic-labs/sdk-react-core';

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

  return (
    <button
      onClick={() => signInWithPasskey({ relatedOriginRpId: 'example.com' })}
    >
      Sign in with passkey
    </button>
  );
};

Prerequisites

Before using this hook, ensure that:

1. Passkey Authentication is Enabled 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

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.

Browser Compatibility: While most modern browsers support passkeys, always implement fallback authentication methods for broader compatibility.

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.