Multi-Account

import { useAccounts } from "@sublay/react-js";

function AccountList() {
  const { accounts, activeAccount, accountCount } = useAccounts();

  return (
    <div>
      <p>Active: {activeAccount?.name ?? "None"}</p>
      <p>Total accounts: {accountCount}</p>
      <ul>
        {accounts.map((account) => (
          <li key={account.id}>{account.name ?? account.email}</li>
        ))}
      </ul>
    </div>
  );
}

import { useAddAccount } from "@sublay/react-js";

function AddAccountButton() {
  const { addAccount, canAddAccount } = useAddAccount();

  return (
    <button onClick={addAccount} disabled={!canAddAccount}>
      Add Account
    </button>
  );
}

import { useAccounts, useSwitchAccount } from "@sublay/react-js";

function AccountSwitcher() {
  const { accounts, activeAccount } = useAccounts();
  const { switchAccount, isSwitching, error } = useSwitchAccount();

  return (
    <ul>
      {accounts.map((account) => (
        <li key={account.id}>
          {account.name}
          {account.id !== activeAccount?.id && (
            <button
              onClick={() => switchAccount({ userId: account.id })}
              disabled={isSwitching}
            >
              Switch
            </button>
          )}
        </li>
      ))}
      {error && <p>{error}</p>}
    </ul>
  );
}

import { useAccounts, useRemoveAccount } from "@sublay/react-js";

function RemoveAccountButton({ userId }: { userId: string }) {
  const { removeAccount, isRemoving, error } = useRemoveAccount();

  return (
    <>
      <button onClick={() => removeAccount({ userId })} disabled={isRemoving}>
        Remove Account
      </button>
      {error && <p>{error}</p>}
    </>
  );
}

import { useSignOutAll } from "@sublay/react-js";

function SignOutAllButton() {
  const { signOutAll } = useSignOutAll();

  return <button onClick={signOutAll}>Sign Out All Accounts</button>;
}