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

# Device Registration

> Verify new devices and manage trusted devices for your users.

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

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](/overview/security/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](https://app.dynamic.xyz).
* API version `2026_04_01` set in your [dashboard](https://app.dynamic.xyz/dashboard/developer/api).

## 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:

```tsx theme={"system"}
<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.

```tsx theme={"system"}
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:

```tsx theme={"system"}
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:

```tsx theme={"system"}
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 |

```tsx theme={"system"}
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.

```tsx theme={"system"}
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.

```tsx theme={"system"}
import { revokeAllRegisteredDevices } from '@dynamic-labs-sdk/client';

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

## Related

* [Device Registration Overview](/overview/security/device-registration) — How device registration works and why it matters
* [JavaScript SDK Device Registration](/javascript/authentication-methods/device-registration) — Headless integration without React
* [Security Overview](/overview/security/overview) — Dynamic's security posture