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

For more information on how to configure SMS signup/login, check out our SMS Signup/Login guide.

Configuring the SDK

Let’s start by installing our packages. Follow our Quickstart guide 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):

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 to handle the SMS setup.

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