Upgrade Auth Methods

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>
  );
}

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>
  );
}

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>
  );
}

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");
};