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

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

## Dashboard Configuration

Toggle on "Phone Number" in [the Log in & User Profile section of the dashboard](https://app.dynamic.xyz/dashboard/log-in-user-profile).

<Frame>
  <img src="https://mintcdn.com/dynamic-docs/DXbjtpFZjzIwv2VQ/images/dashboard/dashboard-sms-configuration.png?fit=max&auto=format&n=DXbjtpFZjzIwv2VQ&q=85&s=40aa8ca4c028f91004d8d01d0defbf5a" width="1910" height="602" data-path="images/dashboard/dashboard-sms-configuration.png" />
</Frame>

By default, you can use Dynamics credentials to send SMS messages to your users. However, if you want to send beyond US & Canada, you will need to set up your own Twilio account. In order to do this, you toggle off "Use Dynamic's credentials" and a section will open up for you, where you can enter your own credentials.

## SMS & Embedded Wallets

When you enable SMS sign-up, you can also enable embedded wallets for your users. This means that when a user signs up with their phone number, they will also receive a wallet that they can use to interact with your application.

In order to ensure your end users are adequately protected against attacks like sim swaps, we highly encourage you to [enable account MFA (TOTP) via Google Authenticator](/react/authentication-methods/mfa).

## Using our UI

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

## Using your UI

We can create our SMS signup/login form by using the [`useConnectWithOtp` hook](/react/reference/hooks/login-user-management/useconnectwithotp)

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

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

export default ConnectWithSmsView
```