Are you an LLM? Read llms.txt for a summary of the docs, or llms-full.txt for the full context.
Skip to content

useEmailOtpAuth

Authenticate users with email OTP (one-time password) for passwordless login.

Usage

import { useEmailOtpAuth } from '@openfort/react';
 
function EmailOtpLogin() {
  const { requestEmailOtp, signInEmailOtp, isRequesting, isLoading } = useEmailOtpAuth();
  const [email, setEmail] = useState('');
  const [otp, setOtp] = useState('');
  const [otpSent, setOtpSent] = useState(false);
 
  const handleRequestOtp = async () => {
    const { error } = await requestEmailOtp({ email });
    if (!error) setOtpSent(true);
  };
 
  const handleSignIn = async () => {
    const { user, error } = await signInEmailOtp({ email, otp });
    if (user) console.log('Signed in:', user.id);
  };
 
  return (
    <div>
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      {otpSent && (
        <input value={otp} onChange={(e) => setOtp(e.target.value)} placeholder="Enter OTP" />
      )}
      {!otpSent ? (
        <button onClick={handleRequestOtp} disabled={isRequesting}>
          {isRequesting ? 'Sending...' : 'Send OTP'}
        </button>
      ) : (
        <button onClick={handleSignIn} disabled={isLoading}>
          {isLoading ? 'Signing in...' : 'Sign In'}
        </button>
      )}
    </div>
  );
}

Return type

type EmailOtpAuthReturn = {
  requestEmailOtp(options: RequestEmailOtpOptions): Promise<EmailOtpAuthResult>
  signInEmailOtp(options: LoginWithEmailOtpOptions): Promise<EmailOtpAuthResult>
  reset(): void
  isRequesting: boolean
  isLoading: boolean
  isError: boolean
  isSuccess: boolean
  isAwaitingInput: boolean
  error?: OpenfortError | null
}
 
type EmailOtpAuthResult = {
  user?: User
  wallet?: UserWallet
  error?: OpenfortError
}

Hook options

Configure default behavior when initializing the hook.

type UseEmailOtpHookOptions = {
  // Log out the user if wallet recovery fails. Defaults to true.
  logoutOnError?: boolean
  // Automatically recover the wallet after authentication. Defaults to true.
  recoverWalletAutomatically?: boolean
  onSuccess?: (data: EmailOtpAuthResult) => void
  onError?: (error: OpenfortError) => void
}

Parameters

requestEmailOtp

Request an OTP code to be sent to the user's email.

type RequestEmailOtpOptions = {
  email: string
  onSuccess?: (data: EmailOtpAuthResult) => void
  onError?: (error: OpenfortError) => void
}

signInEmailOtp

Sign in with the email and OTP code.

type LoginWithEmailOtpOptions = {
  email: string
  otp: string
  // Overrides the hook-level default.
  logoutOnError?: boolean
  // Overrides the hook-level default.
  recoverWalletAutomatically?: boolean
  onSuccess?: (data: EmailOtpAuthResult) => void
  onError?: (error: OpenfortError) => void
}

Link an email to an existing user

Unlike phone OTP which has a linkPhoneOtp function, email OTP doesn't include a link method. To add an email to an existing authenticated user, use useEmailAuth.linkEmail() instead.

Related