> ## Documentation Index
> Fetch the complete documentation index at: https://dynamic-docs-feat-sidebar-revamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Headless SMS signup

### Overview

Leveraging Dynamic's React package, this guide will help you create a sign in / sign up flow based on an sms login form.

We use [the `useConnectWithOtp` hook](/react-sdk/hooks/login-user-management/useconnectwithotp) to expose two methods: `connectWithSms` and `verifyOneTimePassword`.

The first method will send an SMS to the user's phone number, and the second will verify the OTP sent to the user's phone.

Once that's done, the user will be authenticated and you can access their information through the `useDynamicContext` hook!

### Dashboard Setup

#### SMS Signup/Login

The first thing you'll want to do is create a new Dynamic organization and setup Dashboard.

1. Sign up at app.dynamic.xyz
2. Fill in the modal to create your organization and project.
3. Under the Developer menu, go to SDK & APIs and fetch the Environment ID. Keep this as we'll need this key in a little bit.

Next we'll want to enable SMS signup/login:

<iframe src="https://scribehow.com/embed/Configure_sms_signup__bMYwu7t8R26dcZaGSEwfnA?skipIntro=true" width="100%" height="640" allowfullscreen frameborder="0" />

For more information on how to configure SMS signup/login, check out our [SMS Signup/Login guide](/authentication-methods/email-social-sms).

### Configuring the SDK

Let's start by installing our packages. Follow our [Quickstart guide](/quickstart) for a detailed walkthrough.

When you're done, we'll update our App.js to include our environment ID in the setup and import the `DynamicContextProvider` and `EthereumWalletConnectors`.

You app.js file should look like this (note that we are only importing the EthereumWalletConnectors for now):

```jsx
import { DynamicContextProvider } from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";

// Placeholder for our SMS signup/login form component
import ConnectWithSmsView from './ConnectWithSmsView';


function App() {
  return (
    <div className="App">
        <DynamicContextProvider
          settings={{
            environmentId: "YOUR_ENVIRONMENT_ID_GOES_HERE",
            walletConnectors: [ EthereumWalletConnectors ],

          }}
        >
        <ConnectWithSmsView />
        </DynamicContextProvider>
    </div>
  );
}

export default App;
```

### SMS Signup/Login UI

Now that we have our environment, we can create our SMS signup/login form. We use the [`useConnectWithOtp` hook](/react-sdk/hooks/login-user-management/useconnectwithotp) to handle the SMS setup.

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