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

const needsSignIn = (account) =>
  account.needsReauth || account.tokenExpiresAt <= Date.now();

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 }).catch(() => {
                  /* `error` below carries the reason; you stay signed in
                     where you were. */
                })
              }
              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 }).catch(() => {
            /* `error` below carries the reason; nothing was torn down. */
          })
        }
        disabled={isRemoving}
      >
        Remove Account
      </button>
      {error && <p>{error}</p>}
    </>
  );
}

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

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

  const handleClick = () =>
    signOutAll().catch((err) => {
      // Some accounts were kept — see the warning below.
      showError(err);
    });

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

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

try {
  await switchAccount({ userId });
} catch (err) {
  // The switch did not happen and the account you were using is still signed
  // in. `error` is also set on the hook.
  if (err instanceof AccountTransitionError && err.credentialRejected) {
    promptSignIn(userId);   // the credential is dead
  } else {
    showRetry();            // the request never got an answer
  }
}

try {
  await switchAccount({ userId });
} catch (err) {
  if (err instanceof AccountTransitionError) {
    if (err.accountNotFound) refreshAccountList();  // stale id — nothing happened
    else if (err.credentialRejected) promptSignIn(userId);  // the credential is dead
    else showRetry();                               // the request never got an answer
  }
}

const { accounts, activeAccount, signedOut } = useAccounts();

if (!activeAccount && signedOut && accounts.length > 0) {
  return <AccountPicker accounts={accounts} />;
}

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

const { setAccountPushEnabled, isAccountPushEnabled } = useAccountPushToggle();

// Works on a background account — no switching required.
await setAccountPushEnabled({ userId: "other-account-id", enabled: false });

const { accounts } = useAccounts();

accounts.map((account) => (
  <AccountRow
    key={account.id}
    account={account}
    note={account.needsPushRebind ? "Notifications paused — open to resume" : null}
  />
));

import { useAuth, ACCOUNT_LIMIT_MESSAGE } from "@sublay/react-js";

const { signInWithEmailAndPassword } = useAuth();

try {
  await signInWithEmailAndPassword({ email, password });
} catch (err) {
  if (err instanceof Error && err.message === ACCOUNT_LIMIT_MESSAGE) {
    // Offer to sign out of one of the stored accounts.
  }
}

// ⛔ Reads the value from before the effect flushed — possibly a `true` left
//    over from an earlier, unrelated refusal.
await signInWithEmailAndPassword({ email, password });
if (accountLimitReached) showCapError();

// ✅ The next render has the settled value.
if (accountLimitReached) return <CapError />;

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

setSublayLogLevel("silent"); // "error" (default) | "warn" | "silent"