Only available from SDK V1.1.0

Summary

This hooka allows for authenticating a use using email OTP, without the standard Dynamic SDK.

How it works

The useConnectWithEmailOtp hook exposes the connectWithEmail and verifyOneTimePassword functions, with these functions you can send an OTP to a user and then verify the OTP code the user has received.

The hook works with Dynamic User Verification or Magic providers, you can optionally specify which one you wanna use in the hook options or the SDK will automatically choose the appropriate one to use.

MethodTypeDescription
connectWithEmail(email: string) => PromiseSends the OTP to the provided email
verifyOneTimePassword(oneTimePassword: string) => PromiseVerify the provided OTP.
The returned promise will be resolved if the OTP is valid or it will be rejected if the OTP is invalid

Example

Verify with the Magic provider

Configure Magic in your project.

import { FC, FormEventHandler } from 'react';
import { useConnectWithEmailOtp, useDynamicContext } from '@dynamic-labs/sdk-react-core';

const ConnectWithOrpView: FC = () => {
  const { user } = useDynamicContext()

  const { connectWithEmail, verifyOneTimePassword } = useConnectWithEmailOtp({
    provider: 'magicLink',
  });

  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 and another 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.