Device Registration

Verify new devices and manage trusted devices for your users.

Device registration protects your users from account takeovers by requiring verification when they sign in from an unrecognized device. For a general overview of the feature, see Device Registration.

Prerequisites

• You need to have the Dynamic SDK initialized with DynamicContextProvider.
• You need to have device registration enabled in your environment’s settings in the Dynamic Dashboard.
• React SDK v5 or later.

Using our UI

Device registration is handled automatically by the SDK. When a user signs in from an unrecognized device, the SDK displays a security prompt with the user’s email, asking them to verify the device. Once the user clicks the verification link in their email, the SDK detects the redirect, completes registration, and dismisses the prompt automatically.

No additional code is needed — just enable device registration in your dashboard.

Using your UI

To build a custom device registration experience, disable the built-in modal:

<DynamicContextProvider
  settings={{
    environmentId: 'YOUR_ENVIRONMENT_ID',
    deviceRegistrationModal: { enabled: false },
  }}
>
  {children}
</DynamicContextProvider>

Checking if device registration is required

Use useDynamicClient to get the client instance, then listen for user changes with onEvent to check if the current device needs registration.

import { useEffect, useState } from 'react';
import { useDynamicClient } from '@dynamic-labs/sdk-react-core';
import { isDeviceRegistrationRequired, onEvent } from '@dynamic-labs-sdk/client';

function DeviceRegistrationBanner() {
  const dynamicClient = useDynamicClient();
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    if (!dynamicClient) return;

    return onEvent({
      event: 'userChanged',
      listener: ({ user }) => {
        if (user && isDeviceRegistrationRequired(user)) {
          setShowBanner(true);
        }
      },
    }, dynamicClient);
  }, [dynamicClient]);

  if (!showBanner) return null;

  return (
    <div>
      <p>Please check your email to verify this device.</p>
    </div>
  );
}

Handling device registration completion

The SDK handles the email redirect and device registration completion automatically, even when the built-in modal is disabled. You can listen for completion to update your UI:

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

// Using the useDynamicEvents hook
useDynamicEvents('deviceRegistrationCompleted', () => {
  // Hide the banner, redirect, etc.
});

useDynamicEvents('deviceRegistrationCompletedInAnotherTab', () => {
  // Keep other open tabs in sync
});

You can also use onEvent from the client SDK:

import { useEffect } from 'react';
import { useDynamicClient } from '@dynamic-labs/sdk-react-core';
import { onEvent } from '@dynamic-labs-sdk/client';

function useDeviceRegistrationCompleted(callback: () => void) {
  const dynamicClient = useDynamicClient();

  useEffect(() => {
    if (!dynamicClient) return;

    return onEvent({
      event: 'deviceRegistrationCompleted',
      listener: callback,
    }, dynamicClient);
  }, [dynamicClient]);
}

Getting registered devices

Retrieve all trusted devices for the current user. You can use parseUserAgent to display a friendly device name from the raw user agent string.

Each device includes:

Field	Type	Description
id	string	The device registration ID
createdAt	string	ISO date of when the device was registered
userAgent	string	The browser or device user agent
isCurrentDevice	boolean	Whether this is the device making the request

import { useEffect, useState } from 'react';
import { getRegisteredDevices, parseUserAgent } from '@dynamic-labs-sdk/client';

function RegisteredDevices() {
  const [devices, setDevices] = useState([]);

  useEffect(() => {
    getRegisteredDevices().then(setDevices);
  }, []);

  return (
    <ul>
      {devices.map((device) => {
        const parsed = parseUserAgent({ userAgent: device.userAgent });

        return (
          <li key={device.id}>
            {parsed?.type === 'mobile' ? '📱' : '💻'}{' '}
            {parsed?.displayText ?? 'Unknown device'}
            {device.isCurrentDevice && ' (this device)'}
          </li>
        );
      })}
    </ul>
  );
}

Revoking a device

Remove a single trusted device. If the revoked device is the current device, the user will be logged out.

import { revokeRegisteredDevice } from '@dynamic-labs-sdk/client';

const handleRevoke = async (deviceRegistrationId: string) => {
  await revokeRegisteredDevice({ deviceRegistrationId });
};

Revoking all devices

Remove all trusted devices for the current user. This always logs the user out.

import { revokeAllRegisteredDevices } from '@dynamic-labs-sdk/client';

const handleRevokeAll = async () => {
  await revokeAllRegisteredDevices();
};

Related

• Device Registration Overview — How device registration works and why it matters
• JavaScript SDK Device Registration — Headless integration without React
• Security Overview — Dynamic’s security posture