Authenticate with Email

Dashboard Configuration

Simply toggle on “Email” in the Log in & User Profile section of the dashboard.

If users report delayed or missing OTP emails, see the Email OTP delivery troubleshooting guide.

Using our UI

Once toggled on, these methods will be available in the Dynamic widget.

Using your UI

All we will need for this use case is the useConnectWithOtp hook. This exposes multiple methods, and we are interested primarily in the following:

• connectWithEmail
• verifyOneTimePassword

Once you have those available in your component, the rest is as simple as building your form!

React

import { FC, FormEventHandler } from 'react';
import { useConnectWithOtp, useDynamicContext } from '@dynamic-labs/sdk-react-core';

const ConnectWithEmailView: FC = () => {
  const { user } = useDynamicContext()

  const { connectWithEmail, verifyOneTimePassword } = useConnectWithOtp();

  const onSubmitEmailHandler: FormEventHandler<HTMLFormElement> = async (
    event,
  ) => {
    event.preventDefault();

    const email = event.currentTarget.email.value;

    await connectWithEmail(email);
  };

  const onSubmitOtpHandler: FormEventHandler<HTMLFormElement> = async (
    event,
  ) => {
    event.preventDefault();

    const otp = event.currentTarget.otp.value;

    await verifyOneTimePassword(otp);
  };

  return (
    <div>
      <form key='email-form' onSubmit={onSubmitEmailHandler}>
        <input type='email' name='email' placeholder='Email' />
        <button type='submit'>Submit</button>
      </form>

      <form key='otp-form' onSubmit={onSubmitOtpHandler}>
        <input type='text' name='otp' placeholder='OTP' />
        <button type='submit'>Submit</button>
      </form>

      {!!user && (
        <p>Authenticated user:</p>
        <pre>
          {JSON.stringify(user, null, 2)}
        </pre>
      )}
    </div>
  )
}

Rate Limits

Email verification is subject to the following rate limits:

• 3 attempts per 10 minutes per email address

This is in place to protect deliverability of emails and to prevent abuse.