useConnectWithOtp

Allow for headless email or sms OTP authentication

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

Method	Type	Description
connectWithEmail	(email: string) => Promise	Sends the OTP to the provided email
connectWithSms	(phone: PhoneData) => Promise	Sends the OTP to the provided phone
verifyOneTimePassword	(oneTimePassword: string) => Promise	Verify the provided OTP. 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 headless

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

Verify user with sms OTP headless

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