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.
To authenticate your users with Privy’s out of the box UIs, check out UI components here.

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

​
Resources

React starter repo

Get started with React and Privy.

Next.js starter repo

Get started with Next.js and Privy.

Whitelabel starter repo

Get started with a whitelabel Privy integration.