Headless Email Signup

Introduction

This guide will help you let a user signup/login with email, without any of our UI components. We’ve split the guide into two tabs as you’ll see below. The first uses our SDK hooks (but none of the UI components) - we recommend this choice if you can. The second tab shows you how to handle email login without any SDK interaction at all i.e. API only.

Tutorial

• SDK Hooks
• API Only

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 ConnectWithEmailView from './ConnectWithEmailView';


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

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

export default App;

useConnectWithOtp

All we will need for this use case is the useConnectWithOtp hook. This exposes multiple methods, and we are interested primarily in the following:

• connectWithEmail
• verifyOneTimePassword

Once you have those available in your component, the rest is as simple as building your form!

Code Example

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

const ConnectWithEmailView: 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>
  )
}