Custom Auth UI with React Hooks

npm install @getpara/react-sdk --save-exact

import { useEffect, useRef, useState } from "react";
import { useClient } from "@getpara/react-sdk";
import type { StateSnapshot, AuthPhase } from "@getpara/web-sdk";

function useParaAuthStateListener() {
  const para = useClient();
  const popupRef = useRef<Window | null>(null);
  const lastUrlRef = useRef<string | null>(null);
  const [authPhase, setAuthPhase] = useState<AuthPhase>("unauthenticated");
  const [authStateInfo, setAuthStateInfo] = useState<StateSnapshot["authStateInfo"] | null>(null);

  useEffect(() => {
    const unsubscribe = para.onStatePhaseChange((snapshot) => {
      const { authStateInfo, authPhase } = snapshot;
      setAuthPhase(authPhase);
      setAuthStateInfo(authStateInfo);

      // Basic login verification URL — open in popup or iframe
      if (authStateInfo.verificationUrl && authStateInfo.verificationUrl !== lastUrlRef.current) {
        lastUrlRef.current = authStateInfo.verificationUrl;
        popupRef.current = window.open(
          authStateInfo.verificationUrl,
          "ParaVerification",
          "popup,width=400,height=500"
        );
        return;
      }

      // Biometric / security URLs
      const { passkeyUrl, passwordUrl, pinUrl } = authStateInfo;

      // Passkey URLs MUST use a popup — WebAuthn does not work inside iframes
      if (passkeyUrl && passkeyUrl !== lastUrlRef.current) {
        lastUrlRef.current = passkeyUrl;
        popupRef.current = window.open(passkeyUrl, "ParaPasskey", "popup,width=400,height=500");
      } else if (passwordUrl && passwordUrl !== lastUrlRef.current) {
        lastUrlRef.current = passwordUrl;
        popupRef.current = window.open(passwordUrl, "ParaPassword", "popup,width=400,height=500");
      } else if (pinUrl && pinUrl !== lastUrlRef.current) {
        lastUrlRef.current = pinUrl;
        popupRef.current = window.open(pinUrl, "ParaPIN", "popup,width=400,height=500");
      }
    });

    return () => {
      unsubscribe();
      lastUrlRef.current = null;
    };
  }, [para]);

  return { authPhase, authStateInfo, popupRef };
}

import { useState } from "react";
import {
  useAuthenticateWithEmailOrPhone,
  useVerifyNewAccount,
  useResendVerificationCode,
} from "@getpara/react-sdk";

function EmailAuth() {
  const {
    authenticateWithEmailOrPhoneAsync,
    isPending,
    error,
  } = useAuthenticateWithEmailOrPhone();

  const { verifyNewAccountAsync } = useVerifyNewAccount();
  const { resendVerificationCodeAsync } = useResendVerificationCode();

  // Use the state listener hook from the section above
  const { authPhase, popupRef } = useParaAuthStateListener();

  const [email, setEmail] = useState("");
  const [verificationCode, setVerificationCode] = useState("");

  const handleAuth = async () => {
    try {
      const result = await authenticateWithEmailOrPhoneAsync({
        auth: { email },
        sessionPollingCallbacks: {
          onPoll: () => {
            if (popupRef.current?.closed) {
              popupRef.current = null;
            }
          },
        },
      });

      if (result.hasCreatedWallets && result.recoverySecret) {
        // Non-basic-login new user — display or store the recovery secret
        console.log("Recovery secret:", result.recoverySecret);
      }

      // User is now fully authenticated
      console.log("Auth info:", result.authInfo);
    } catch (err) {
      console.error("Authentication failed:", err);
    }
  };

  // Show OTP input when awaiting verification for non-basic-login new signups
  if (authPhase === "awaiting_account_verification") {
    return (
      <div>
        <p>Enter the verification code sent to {email}</p>
        <input
          value={verificationCode}
          onChange={(e) => setVerificationCode(e.target.value)}
          placeholder="6-digit code"
        />
        <button onClick={() => verifyNewAccountAsync({ verificationCode })}>
          Verify
        </button>
        <button onClick={() => resendVerificationCodeAsync({ type: "SIGNUP" })}>
          Resend Code
        </button>
      </div>
    );
  }

  return (
    <div>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <button onClick={handleAuth} disabled={isPending}>
        {isPending ? "Authenticating..." : "Continue"}
      </button>
      {error && <p>{error.message}</p>}
    </div>
  );
}

authenticateWithEmailOrPhoneAsync({
  auth: { phone: `+${countryCode}${phoneNumber}` as `+${number}` },
});

import { useAuthenticateWithOAuth } from "@getpara/react-sdk";

function OAuthLogin() {
  const {
    authenticateWithOAuthAsync,
    isPending,
    error,
  } = useAuthenticateWithOAuth();

  // Use the state listener hook from the section above
  const { popupRef } = useParaAuthStateListener();

  const handleOAuth = async (method: "GOOGLE" | "APPLE" | "DISCORD" | "X" | "FACEBOOK") => {
    try {
      const result = await authenticateWithOAuthAsync({
        method,
        redirectCallbacks: {
          onOAuthPopup: (popup) => {
            popupRef.current = popup;
          },
        },
        oAuthPollingCallbacks: {
          onPoll: () => {
            if (popupRef.current?.closed) {
              popupRef.current = null;
            }
          },
        },
      });

      if (result.hasCreatedWallets && result.recoverySecret) {
        console.log("Recovery secret:", result.recoverySecret);
      }

      console.log("Auth info:", result.authInfo);
    } catch (err) {
      console.error("OAuth failed:", err);
    }
  };

  return (
    <div>
      <button onClick={() => handleOAuth("GOOGLE")} disabled={isPending}>
        Continue with Google
      </button>
      <button onClick={() => handleOAuth("APPLE")} disabled={isPending}>
        Continue with Apple
      </button>
      <button onClick={() => handleOAuth("DISCORD")} disabled={isPending}>
        Continue with Discord
      </button>
      {error && <p>{error.message}</p>}
    </div>
  );
}

const result = await authenticateWithOAuthAsync({
  method: "TELEGRAM",
  redirectCallbacks: {
    onOAuthPopup: (popup) => {
      popupRef.current = popup;
    },
  },
});

const [farcasterUri, setFarcasterUri] = useState<string | null>(null);

const handleFarcaster = async () => {
  try {
    const result = await authenticateWithOAuthAsync({
      method: "FARCASTER",
      redirectCallbacks: {
        onOAuthUrl: (url) => {
          setFarcasterUri(url);
        },
      },
      oAuthPollingCallbacks: {
        isCanceled: () => !farcasterUri,
      },
    });

    setFarcasterUri(null);
    console.log("Auth info:", result.authInfo);
  } catch (err) {
    console.error("Farcaster auth failed:", err);
  }
};

const result = await authenticateWithEmailOrPhoneAsync({
  auth: { email },
  sessionPollingCallbacks: {
    isCanceled: () => {
      // Cancel if the user closed the popup
      return popupRef.current === null || popupRef.current.closed;
    },
    onCancel: () => {
      console.log("User canceled authentication");
    },
  },
});

const result = await authenticateWithOAuthAsync({
  method: "GOOGLE",
  oAuthPollingCallbacks: {
    isCanceled: () => userClickedCancel,
    onCancel: () => console.log("OAuth polling canceled"),
  },
  sessionPollingCallbacks: {
    isCanceled: () => userClickedCancel,
    onCancel: () => console.log("Session polling canceled"),
  },
});

import { useLogout } from "@getpara/react-sdk";

const { logoutAsync } = useLogout();

const handleCancel = async () => {
  await logoutAsync();
  // All polling stops, state phases reset to unauthenticated
};

type AuthenticateResponse = {
  authInfo: CoreAuthInfo;      // The user's authentication info (email, userId, etc.)
  hasCreatedWallets: boolean;  // Whether new wallets were created during this flow
  recoverySecret?: string;     // Recovery secret for non-basic-login newly created wallets
};