Privy enables users to login to your application with SMS or email. With Privy, your application can verify ownership of a user’s email address or phone number to send them notifications, campaigns, and more to keep them activated.

Enable email authentication in the Privy Dashboard before implementing this feature.

To authenticate your users with a one-time passcode (OTP) sent to their email address, use the useLoginWithEmail hook.

Send Code

sendCode: ({email: string, disableSignup?: boolean}) => Promise<void>

Parameters

email
string
required

The email address of the user to log in.

disableSignup
boolean

Whether to disable the ability to sign up with the email address.

Returns

void
Promise<void>

A promise that resolves when the code is sent.

Login with Code

loginWithCode: ({ code: string }) => Promise<void>;

Parameters

code
string
required

The one-time passcode sent to the user’s email address.

Returns

void
Promise<void>

A promise that resolves when the user is logged in.

Usage

import { useState } from "react";
import { useLoginWithEmail } from "@privy-io/react-auth";

export default function LoginWithEmail() {
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const { sendCode, loginWithCode } = useLoginWithEmail();

  return (
      <div>
          <input onChange={(e) => setEmail(e.currentTarget.value)} value={email} />
          <button onClick={() => sendCode({ email })}>Send Code</button>
          <input onChange={(e) => setCode(e.currentTarget.value)} value={code} />
          <button onClick={() => loginWithCode({ code })}>Login</button>
      </div>
  );
}

Tracking Flow State

Track the state of the OTP flow via the state variable returned by the useLoginWithEmail hook.

type OtpFlowState =
  | {status: 'initial'}
  | {status: 'error'; error: Error | null}
  | {status: 'sending-code'}
  | {status: 'awaiting-code-input'}
  | {status: 'submitting-code'}
  | {status: 'done'};
status
'initial' | 'error' | 'sending-code' | 'awaiting-code-input' | 'submitting-code' | 'done'

The current state of the OTP flow.

error
Error | null

The error that occurred during the OTP flow.

Callbacks

You can optionally pass callbacks into the useLoginWithEmail hook to run custom logic after a successful login or to handle errors that occur during the flow.

onComplete

onComplete?: ((params: {
    user: User;
    isNewUser: boolean;
    wasAlreadyAuthenticated: boolean;
    loginMethod: LoginMethod | null;
    loginAccount: LinkedAccountWithMetadata | null;
}) => void) | undefined

Parameters

user
User

The user object corresponding to the authenticated user.

isNewUser
boolean

Whether the user is a new user or an existing user.

wasAlreadyAuthenticated
boolean

Whether the user entered the application already authenticated.

loginMethod
LoginMethod | null

The method used by the user to login.

loginAccount
LinkedAccountWithMetadata | null

The account corresponding to the loginMethod used.

onError

onError: (error: Error) => void

Parameters

error
Error

The error that occurred during the login flow.