useAuthenticateWithEmailOrPhone - Para Docs

The useAuthenticateWithEmailOrPhone hook handles the entire email or phone authentication flow — signup or login, verification, session waiting, and wallet creation — in a single call. It requires you to listen for state phase changes to handle the portal URLs that appear during the flow.

Import

import { useAuthenticateWithEmailOrPhone } from "@getpara/react-native-wallet";

Usage

import { useAuthenticateWithEmailOrPhone, useClient } from "@getpara/react-native-wallet";
import { useEffect, useState } from "react";
import { View, TextInput, Button, Linking } from "react-native";

function LoginScreen() {
  const [email, setEmail] = useState("");
  const client = useClient();
  const { authenticateWithEmailOrPhoneAsync, isPending } = useAuthenticateWithEmailOrPhone();

  useEffect(() => {
    if (!client) return;
    // Listen for portal URLs (verification, passkey setup, etc.)
    const unsub = client.onStatePhaseChange((phase) => {
      if (phase.type === "VERIFICATION_REQUIRED" && phase.url) {
        Linking.openURL(phase.url);
      }
    });
    return unsub;
  }, [client]);

  const handleAuth = async () => {
    try {
      await authenticateWithEmailOrPhoneAsync({ auth: { email } });
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <View>
      <TextInput value={email} onChangeText={setEmail} placeholder="Email" />
      <Button title={isPending ? "Authenticating..." : "Continue"} onPress={handleAuth} disabled={isPending} />
    </View>
  );
}

This hook must be paired with para.onStatePhaseChange() to handle portal URLs that appear during authentication (verification, passkey, password, PIN). See Handling State Changes for the full state listener pattern.

⌘I