Email and Phone Verification

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.

This guide is currently React only.

Summary

This page expands on the information capture described here 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 page of the developer dashboard.
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.

🚧 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 dashboard. 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

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.

React

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