​
Dashboard Configuration

Toggle on “Phone Number” in the Log in & User Profile section of the dashboard.
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.

​
Dynamic UI

Once toggled on, these methods will be available in the Dynamic widget, and you can customize the behaviour using the following guide.

​
Hooks Only (Headless)

We can create our SMS signup/login form by using the useConnectWithOtp hook 
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