> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Upgrade Auth Methods

> Allow users to add a passkey, password, or PIN to their account for enhanced security

export const Link = ({href, label, newTab = false}) => {
  const [isHovered, setIsHovered] = useState(false);
  return <a href={href} target={newTab ? '_blank' : '_self'} rel={newTab ? 'noopener noreferrer' : undefined} className="not-prose inline-block relative text-black font-semibold cursor-pointer border-b-0 no-underline" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      {label}
      <span className={`absolute left-0 bottom-0 w-full rounded-sm bg-gradient-to-r from-orange-600 to-purple-600 transition-all duration-300 ${isHovered ? 'h-0.5' : 'h-px'}`} />
    </a>;
};

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:

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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 <Link href="/v2/concepts/security#two-factor-authentication-2fa" label="Two-Factor Authentication" /> documentation.

## API Reference

For complete hook details, parameters, and return types, see the <Link href="/v2/react/guides/hooks/use-add-auth-method" label="useAddAuthMethod" /> hook reference.