Skip to main content
Para’s default authentication flow provides a seamless onboarding experience with just an OTP code. However, some users may want to add stronger authentication methods to their account for enhanced security. The useAddAuthMethod hook allows users to add a passkey, password, or PIN to their existing account.

​
When to Use This

Common scenarios for upgrading auth methods:
  • Security-conscious users want to add a passkey or password to their account
  • Enterprise requirements mandate stronger authentication
  • User preference to have multiple ways to access their account
  • Backup authentication as an alternative login method

​
Add a Passkey

Passkeys provide the strongest security upgrade. Users can add a passkey to their account: 
import { useAddAuthMethod } from "@getpara/react-sdk";
import { AuthMethod } from "@getpara/core-sdk";

function AddPasskeyButton() {
  const { addAuthMethodAsync, isPending } = useAddAuthMethod();

  const handleAddPasskey = async () => {
    try {
      await addAuthMethodAsync({ authMethod: AuthMethod.Passkey });
    } catch (err) {
      console.error("Failed to add passkey:", err);
    }
  };

  return (
    <button onClick={handleAddPasskey} disabled={isPending}>
      {isPending ? "Adding..." : "Add Passkey"}
    </button>
  );
}

​
Add a Password

Users can add a traditional password to their account: 
import { useAddAuthMethod } from "@getpara/react-sdk";
import { AuthMethod } from "@getpara/core-sdk";

function AddPasswordButton() {
  const { addAuthMethodAsync, isPending } = useAddAuthMethod();

  const handleAddPassword = async () => {
    try {
      await addAuthMethodAsync({ authMethod: AuthMethod.Password });
    } catch (err) {
      console.error("Failed to add password:", err);
    }
  };

  return (
    <button onClick={handleAddPassword} disabled={isPending}>
      Add Password
    </button>
  );
}

​
Add a PIN

For a simpler upgrade, users can add a PIN: 
import { useAddAuthMethod } from "@getpara/react-sdk";
import { AuthMethod } from "@getpara/core-sdk";

function AddPinButton() {
  const { addAuthMethodAsync, isPending } = useAddAuthMethod();

  const handleAddPin = async () => {
    try {
      await addAuthMethodAsync({ authMethod: AuthMethod.Pin });
    } catch (err) {
      console.error("Failed to add PIN:", err);
    }
  };

  return (
    <button onClick={handleAddPin} disabled={isPending}>
      Add PIN
    </button>
  );
}

​
Handling the Popup

By default, useAddAuthMethod opens a popup window for the user to complete the auth method setup. You can control this behavior: 
const { addAuthMethodAsync } = useAddAuthMethod({
  openPopup: false, // Handle the URL yourself
});

const handleAddAuthMethod = async () => {
  const url = await addAuthMethodAsync();

  // Open in a custom way (e.g., redirect, iframe, custom modal)
  window.open(url, "_blank", "width=500,height=700");
};

​
Adding Two-Factor Authentication (2FA)

For additional security beyond the primary auth method, see the documentation.

​
API Reference

For complete hook details, parameters, and return types, see the hook reference.