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

# useConnectWithOtp

> Allow for email or sms OTP authentication

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

### Summary

This hook allows for authenticating a user using email or sms OTP without the standard Dynamic SDK.

### How it works

The `useConnectWithOtp` hook exposes the `connectWithEmail`, `connectWithSms` and `verifyOneTimePassword` functions, with these functions you can send an OTP to a user and then verify the OTP code the user received.

The hook works with [Dynamic User Verification](/react/users/email-verification) provider.

| Method                | Type                                                                                        | Description                                                                                                                          |
| --------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| connectWithEmail      | (email: string, captchaToken?: string) => Promise                                           | Sends the OTP to the provided email                                                                                                  |
| connectWithSms        | (phone: [PhoneData](/react/reference/objects/phone-data), captchaToken?: string) => Promise | Sends the OTP to the provided phone                                                                                                  |
| verifyOneTimePassword | (oneTimePassword: string) => Promise                                                        | Verify the provided OTP.<br />The returned promise will be resolved if the OTP is valid or it will be rejected if the OTP is invalid |

### Examples

#### Verify user with email OTP

```tsx theme={"system"}
import { FC, FormEventHandler } from 'react';
import { useConnectWithOtp, useDynamicContext } from '@dynamic-labs/sdk-react-core';

const ConnectWithOrpView: 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>
  )
}
```

This will display a field to input the email when the user is not authenticated or a field to verify the OTP code if the user is already authenticated.
Once the OTP is verified, the Dynamic SDK will be authenticated and you can find the user object using the [useDynamicContext](/react/reference/hooks/usedynamiccontext) hook.

#### Verify user with sms OTP

```tsx theme={"system"}
import { FC, FormEventHandler } from 'react';
import { useConnectWithOtp, useDynamicContext } from '@dynamic-labs/sdk-react-core';

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

  const { connectWithSms, verifyOneTimePassword } = useConnectWithOtp();

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

    const phone = {
      dialCode: event.currentTarget.dialCode.value,
      iso2: event.currentTarget.iso2.value,
      phone: event.currentTarget.phone.value,
    };

    await connectWithSms(phone);
  };

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

    const otp = event.currentTarget.otp.value;

    await verifyOneTimePassword(otp);
  };

  return (
    <div>
      <form key='sms-form' onSubmit={onSubmitSmsHandler}>
        <label htmlFor='iso2'>Country ISO Code:</label>
        <input type='text' name='iso2' placeholder='US' />

        <label htmlFor='dialCode'>Country Dial Code:</label>
        <input type='text' name='dialCode' placeholder='1' />

        <label htmlFor='phone'>Phone Number (without dial code):</label>
        <input type='text' name='phone' placeholder='5555555555' />

        <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>
  )
}
```

This will display three fields to input the phone data when the user is not authenticated: country iso code (e.g: 'US'), country dial code (e.g. '1') and phone number (e.g. '5555555555')
If user is already authenticated, it will display a field to verify the OTP code.
Once the OTP is verified, the Dynamic SDK will be authenticated and you can find the user object using the [useDynamicContext](/react/reference/hooks/usedynamiccontext) hook.