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.

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.

Was this page helpful?