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

# Email and Phone Verification

> [card] 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)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

> [!NOTE]
>
> This guide is currently React only.

**Summary**

This page expands on the information capture described [here](https://docs.dynamic.xyz/docs/react/users/information-capture.md) but for email, with added support for Uniqueness and Verification options.

**OTP Verification** verifies the validity of an email or phone provided by a customer by sending a One Time Password (OTP to ensure it is a functional and active email/phone. This helps prevent errors in customer communication and ensures that customer data is accurate.

**Uniqueness** ensures that each customer has a unique email address in each project environment to prevent duplicates.

**Usage**

To enable Email and Phone OTP Verification and/or Uniqueness, follow these steps:

1. Navigate to the [Log in & User Profile](https://console.dynamic.xyz/dashboard/log-in-user-profile) page of the Dynamic Console.
2. In the Email & Phone Number Selection, toggle both on and click the gear icon to the right of each one.
3. Check the boxes for either or both OTP Verification and/or Uniqueness to enable them.
4. Click the 'Save Changes' button to save your changes.

Note: If Email or Phone Verification is enabled, Email Uniqueness will also be mandatory.

> [!WARNING]
>
> ### 🚧 Caution when toggling verification/uniqueness on Live mode
>
> When enabling/disabling Email Verification and/or Uniqueness on live sites, be aware that such actions can result in data inconsistencies. If testing is necessary, it is recommended to conduct the tests on a Sandbox environment and to avoid frequently changing the fields on a live environment.

## General Setup

Configure verification and uniqueness in the Dynamic Console. This applies whichever UI approach you use.

* Open Log in & User Profile settings
* In Email & Phone Number, toggle fields on, click the gear icon
* Enable OTP Verification and/or Uniqueness
* Save changes

> [!WARNING]
>
> When enabling/disabling verification or uniqueness in production, be mindful of potential data inconsistencies. Test changes in Sandbox when possible.

## Using our UI

If verification is enabled, users are automatically prompted to verify email/phone during onboarding, and when changing these values later in their profile.

## Using your UI

Trigger verification and handle OTP programmatically.

Use `useUserUpdateRequest` to update fields; if verification is required, complete OTP.

```tsx React theme={"system"}
import { useUserUpdateRequest } from '@dynamic-labs/sdk-react-core';

export function UpdateEmail() {
  const { updateUser } = useUserUpdateRequest();

  const onSubmit = async (e) => {
    e.preventDefault();
    const email = e.currentTarget.email.value;
    const { isEmailVerificationRequired, verifyOtp } = await updateUser({ email });

    if (isEmailVerificationRequired) {
      const token = window.prompt('Enter the 6-digit code sent to your email');
      await verifyOtp(token!);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <input type="email" name="email" placeholder="Email" />
      <button type="submit">Save</button>
    </form>
  );
}
```

## Twilio Credentials for enabling additional countries

By default, Dynamic uses its own Twilio credentials with United States and Canada enabled. To support additional countries, add your own Twilio credentials:

1. Open the configure dialog and turn off "Use Dynamic's credentials"
2. Enter your Twilio credentials
3. Add the additional countries you want to support
   * Also enable the same countries in your Twilio account; we cannot read your Twilio configuration


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.