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

# Authenticate with Email

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

## Console Configuration

Simply toggle on "Email" in [the Log in & User Profile section of the Dynamic Console](https://console.dynamic.xyz/dashboard/log-in-user-profile).

If users report delayed or missing OTP emails, see the [Email OTP delivery](https://docs.dynamic.xyz/docs/get-started/troubleshooting/email-otp-delivery.md) 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](https://docs.dynamic.xyz/docs/react/reference/hooks/login-user-management/useconnectwithotp.md). 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!

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


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