Skip to main content
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:
FieldTypeDescription
idstringThe device registration ID
createdAtstringISO date of when the device was registered
userAgentstringThe browser or device user agent
isCurrentDevicebooleanWhether 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();
};