Authenticate with Passkey

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.

Dashboard Configuration

Simply toggle on “Passkey” in the Log in & User Profile section of the developer console.

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.

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

Code Example

React

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.

React

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:

{ "origins": ["https://app.example.com"] }

This uses the WebAuthn related origins feature. See Related Origin Requests for the underlying mechanism.