@kestack/web-platform 0.0.0-stage → 0.0.0

package/src/app/gate/gate.ts

@@ -0,0 +1,501 @@
+import { Context, Effect, Exit, Layer, ManagedRuntime, Scope } from 'effect';
+import { createEffectActor, type EffectActor } from '@xstate/effect';
+import type { SnapshotFrom } from 'xstate';
+import {
+  type Account,
+  type NamedChoice,
+  namedChooser,
+  SignIn,
+} from '@kestack/auth-toolkit/client';
+import { type Backend, backendNamed, type Host } from '../host/index.ts';
+import { makeStatus, type StatusCell } from '../session/index.ts';
+import {
+  Device,
+  gateMachine,
+  type GateNotice,
+  type GateView,
+  type Held,
+  Sessions,
+  Switching,
+  type User,
+} from './domain/index.ts';
+import { gateMemory, gateTable } from './memory.ts';
+
+/** What an app gives the Gate. `B` is what the app keeps for as long as it
+ * runs on one Backend; `S` is what one Account's Session opens to. */
+export interface GateConfig<S, B> {
+  /** The Host, made the first time the Gate is asked anything, so the Gate
+   * can be made where the Host is not there yet, as on a server. The Gate
+   * keeps what it remembers in its own `gate` database there. */
+  readonly host: () => Host;
+  /** What runs while the app is on the cloud Backend: its Sign-in and
+   * whatever else the app keeps there. */
+  readonly cloud: () => Layer.Layer<SignIn | B>;
+  /** The same for the device Backend, loaded the first time it is chosen.
+   * `choose` asks who signs in; the Named Sign-In answers it. Without it,
+   * the app has only the cloud Backend. */
+  readonly device?: (
+    choose: Effect.Effect<NamedChoice | null>,
+  ) => Promise<Layer.Layer<SignIn | B>>;
+  /** Opens one Account's Session, with what runs on the Backend; everything
+   * it acquires ends with the scope. `token` is the Account's token at each
+   * call, waited for while the Gate holds none, as when the Account opened
+   * before the Backend answered. `status` says whether it has been
+   * confirmed since; the Gate keeps it. */
+  readonly session: (
+    account: Account,
+    token: Effect.Effect<string>,
+    status: StatusCell,
+  ) => Effect.Effect<S, never, Scope.Scope | B>;
+  /** Deletes what the device keeps for every account but these. */
+  readonly keep?: (
+    userIds: ReadonlyArray<string>,
+  ) => Effect.Effect<void, never, B>;
+}
+
+type Snapshot = SnapshotFrom<typeof gateMachine>;
+type Services = SignIn | Device | Sessions | Switching;
+
+/** One Backend at work: what runs on it, and the Gate's machine on it.
+ * Closing its scope stops the machine, and with it the Session. */
+type Running = {
+  readonly backend: Backend;
+  readonly runtime: ManagedRuntime.ManagedRuntime<Services, never>;
+  readonly scope: Scope.Closeable;
+  readonly actor: EffectActor<typeof gateMachine>;
+};
+
+const CHECKING = { kind: 'checking' } as const;
+
+// Only what the Gate remembers of a User, whatever else the Backend sent.
+const userOf = ({ id, name, email, image }: User): User => ({
+  id,
+  name,
+  email,
+  image,
+});
+
+// An Account, without what else the Gate holds of it.
+const accountOf = ({ user, token }: Held): Account => ({ user, token });
+
+const viewOf = <S>(snapshot: Snapshot): GateView<S> => {
+  const { context } = snapshot;
+  if (snapshot.matches('signingOut')) return { kind: 'signingOut' };
+  if (snapshot.matches('signedOut'))
+    return { kind: 'signedOut', unreachable: context.unreachable };
+  if (snapshot.matches('unopenable') && context.account !== null)
+    return { kind: 'unopenable', account: accountOf(context.account) };
+  if (snapshot.matches('accountLost') && context.lost !== null)
+    return {
+      kind: 'accountLost',
+      account: { user: context.lost, token: null },
+      accounts: context.accounts.map(accountOf),
+    };
+  if (!snapshot.matches('open') || context.account === null) return CHECKING;
+  if (context.session === null)
+    return { kind: 'opening', account: accountOf(context.account) };
+  return {
+    kind: 'open',
+    session: context.session as S,
+    account: accountOf(context.account),
+    accounts: context.accounts.map(accountOf),
+  };
+};
+
+const stop = async (current: Running) => {
+  await current.runtime.runPromise(Scope.close(current.scope, Exit.void));
+  await current.runtime.dispose();
+};
+
+/**
+ * The Gate: runs sign-in on one device for one app. It keeps the app on the
+ * Backend chosen, and the active Account's Session open while that Account
+ * stays active. Nothing runs until something first asks. Make one per app.
+ */
+export const createGate = <S, B>(config: GateConfig<S, B>) => {
+  let made: Host | undefined;
+  const host = () => (made ??= config.host());
+  let remembering: ReturnType<typeof gateMemory> | undefined;
+  const memory = () =>
+    (remembering ??= gateMemory(host().storage.table(gateTable, 'gate')));
+  const remember = (
+    change: Parameters<ReturnType<typeof memory>['update']>[0],
+  ) => Effect.runPromise(memory().update(change));
+
+  // Accounts this device signed out itself, in this tab or another: their
+  // going is no Account Lost.
+  const quiet = new Set<string>();
+
+  // Asks who signs in on the device Backend; the Named Sign-In answers.
+  const chooser = namedChooser();
+  const loadDevice = config.device;
+
+  // A Backend this app does not have stands for the cloud.
+  const offered = (backend: Backend | null): Backend | null =>
+    backend === 'device' && loadDevice === undefined ? 'cloud' : backend;
+
+  // The token each account's calls carry, refreshed whenever it is checked,
+  // and the calls waiting for an account's first one.
+  const tokens = new Map<string, string | null>();
+  const waiting = new Map<string, Set<(token: string) => void>>();
+  const setToken = (id: string, token: string | null) => {
+    tokens.set(id, token);
+    if (token === null) return;
+    const waiters = waiting.get(id);
+    waiting.delete(id);
+    waiters?.forEach((resume) => resume(token));
+  };
+  // When the Backend last answered who is signed in, and the status of
+  // each Session open now: verified once its Account's token is known.
+  let verifiedAt: Date | null = null;
+  const statuses = new Map<string, StatusCell>();
+  const statusOf = (id: string) =>
+    (tokens.get(id) ?? null) === null
+      ? { state: 'verifying' as const, lastVerifiedAt: null }
+      : { state: 'verified' as const, lastVerifiedAt: verifiedAt };
+  const publishStatuses = () => {
+    for (const [id, cell] of statuses) cell.set(statusOf(id));
+  };
+
+  const waitForToken = (id: string): Effect.Effect<string> =>
+    Effect.callback<string>((resume) => {
+      const now = tokens.get(id) ?? null;
+      if (now !== null) return resume(Effect.succeed(now));
+      const waiter = (token: string) => resume(Effect.succeed(token));
+      const waiters = waiting.get(id) ?? new Set();
+      waiters.add(waiter);
+      waiting.set(id, waiters);
+      return Effect.sync(() => void waiting.get(id)?.delete(waiter));
+    });
+
+  const layerOf = async (backend: Backend): Promise<Layer.Layer<Services>> => {
+    const lifetime =
+      backend === 'device' && loadDevice !== undefined
+        ? await loadDevice(chooser.choose)
+        : config.cloud();
+    const device = Layer.effect(
+      Device,
+      Effect.gen(function* () {
+        const services = yield* Effect.context<B>();
+        return Device.of({
+          remembered: memory().read.pipe(
+            Effect.map((all) => ({
+              accounts: all[backend].accounts.map(({ user, active }) => ({
+                user,
+                token: null,
+                active,
+              })),
+              lost: all[backend].lost,
+            })),
+          ),
+          remember: ({ accounts, lost }) =>
+            Effect.andThen(
+              Effect.sync(() => {
+                // Only an answer from the Backend is remembered.
+                verifiedAt = new Date();
+              }),
+              memory().update((all) => ({
+                ...all,
+                [backend]: {
+                  accounts: accounts.map(({ user, active }) => ({
+                    user: userOf(user),
+                    active,
+                  })),
+                  lost: lost === null ? null : userOf(lost),
+                },
+              })),
+            ),
+          signedOutHere: (userId) => Effect.sync(() => quiet.delete(userId)),
+          keep: (userIds) =>
+            config.keep === undefined
+              ? Effect.void
+              : config.keep(userIds).pipe(Effect.provideContext(services)),
+        });
+      }),
+    );
+
+    const sessions = Layer.effect(
+      Sessions,
+      Effect.gen(function* () {
+        const services = yield* Effect.context<B>();
+        return Sessions.of({
+          open: (account: Held) =>
+            Effect.gen(function* () {
+              const id = account.user.id;
+              setToken(id, account.token);
+              const status = yield* makeStatus(statusOf(id));
+              statuses.set(id, status);
+              yield* Effect.addFinalizer(() =>
+                Effect.sync(() => {
+                  if (statuses.get(id) === status) statuses.delete(id);
+                }),
+              );
+              // The Session's own scope, not the one the Backend's services
+              // were built in.
+              const scope = yield* Effect.context<Scope.Scope>();
+              return yield* config
+                .session(accountOf(account), waitForToken(id), status)
+                .pipe(Effect.provideContext(Context.merge(services, scope)));
+            }),
+        });
+      }),
+    );
+
+    const switching = Layer.effect(
+      Switching,
+      Effect.gen(function* () {
+        const signIn = yield* SignIn;
+        // One browser-wide Account Switch at a time; one asked for while
+        // another runs waits, and only the last one waiting runs.
+        let chain: Promise<void> = Promise.resolve();
+        let latest: string | null = null;
+        return Switching.of({
+          switchTo: (token) =>
+            Effect.tryPromise({
+              try: () => {
+                latest = token;
+                const run = chain.then(() =>
+                  latest === token
+                    ? Effect.runPromise(signIn.switchTo(token))
+                    : undefined,
+                );
+                chain = run.catch(() => {});
+                return run;
+              },
+              catch: (error) => error,
+            }),
+          announce: (quiet = []) =>
+            Effect.sync(() => host().tabs?.announce({ quiet })),
+        });
+      }),
+    );
+
+    return Layer.mergeAll(device, sessions, switching).pipe(
+      Layer.provideMerge(lifetime),
+    ) as Layer.Layer<Services>;
+  };
+
+  let running: Running | null = null;
+  let view: GateView<S> = CHECKING;
+  // Every change of Backend waits for the one before it.
+  let queue: Promise<void> = Promise.resolve();
+  let booted = false;
+  const listeners = new Set<() => void>();
+  const notify = () => listeners.forEach((listener) => listener());
+
+  const notices: GateNotice[] = [];
+
+  const push = (notice: GateNotice) => {
+    notices.push(notice);
+    notify();
+  };
+
+  const observe = (snapshot: Snapshot) => {
+    const { context } = snapshot;
+    for (const account of context.accounts)
+      if (account.token !== null) setToken(account.user.id, account.token);
+    publishStatuses();
+    view = viewOf<S>(snapshot);
+  };
+
+  const start = async (backend: Backend): Promise<Running> => {
+    const runtime = ManagedRuntime.make(await layerOf(backend));
+    const scope = runtime.runSync(Scope.make());
+    const actor = runtime.runSync(
+      createEffectActor(gateMachine).pipe(Scope.provide(scope)),
+    );
+    const next: Running = { backend, runtime, scope, actor };
+    actor.subscribe((snapshot) => {
+      if (running !== next) return;
+      observe(snapshot);
+      notify();
+    });
+    void runtime
+      .runPromise(
+        Effect.gen(function* () {
+          return yield* (yield* SignIn).takeLoginError;
+        }),
+      )
+      .then((error) => {
+        if (error !== null) push({ kind: 'loginError', error });
+      }, report);
+    return next;
+  };
+
+  /** Runs on `backend`, ending whatever ran before. */
+  const runOn = (backend: Backend) => {
+    const change = queue.then(async () => {
+      if (running?.backend === backend) return;
+      const previous = running;
+      running = null;
+      view = CHECKING;
+      notify();
+      if (previous !== null) await stop(previous);
+      const next = await start(backend);
+      running = next;
+      observe(next.actor.getSnapshot());
+      notify();
+    });
+    // A change that failed must not stop the ones after it.
+    queue = change.catch(() => {});
+    return change;
+  };
+
+  // Nobody awaits what the Gate does by itself, so a failure is logged
+  // rather than lost.
+  const report = (failed: unknown) =>
+    Effect.runFork(Effect.logError('The Gate could not go on', failed));
+
+  const chosenBackend = async (): Promise<Backend> =>
+    offered(backendNamed((await Effect.runPromise(memory().read)).backend)) ??
+    'cloud';
+
+  // A Backend the launch asked for is chosen as if by hand.
+  const settledBackend = async (): Promise<Backend> => {
+    const asked = offered(host().lifecycle.launchBackend());
+    if (asked === null) return chosenBackend();
+    await remember((all) => ({ ...all, backend: asked }));
+    return asked;
+  };
+
+  const send = (
+    event: Parameters<EffectActor<typeof gateMachine>['send']>[0],
+  ) => running?.actor.send(event);
+
+  const checkAgain = () => send({ type: 'CHECK' });
+
+  // Follows a Backend chosen elsewhere on this device, or else asks again.
+  const follow = () =>
+    chosenBackend()
+      .then((backend) =>
+        running === null || running.backend === backend
+          ? checkAgain()
+          : runOn(backend),
+      )
+      .catch(report);
+
+  /** Starts on the Backend chosen, once, and looks again whenever the app
+   * comes back into view, the network comes back, or another tab changes
+   * something. */
+  const boot = () => {
+    if (booted) return;
+    booted = true;
+    const { lifecycle, tabs } = host();
+    settledBackend().then(runOn).catch(report);
+    lifecycle.onOnlineChange(() => {
+      if (lifecycle.online()) checkAgain();
+    });
+    lifecycle.onForeground(follow);
+    tabs?.listen((message) => {
+      for (const id of message.quiet) quiet.add(id);
+      follow();
+    });
+  };
+
+  const subscribe = (changed: () => void) => {
+    boot();
+    listeners.add(changed);
+    return () => void listeners.delete(changed);
+  };
+
+  const online = () => host().lifecycle.online();
+
+  /** Whether a sign-out can happen now: only the Backend can end a sign-in,
+   * so the cloud Backend has to be reachable. */
+  const canSignOut = () => running?.backend === 'device' || online();
+
+  return {
+    subscribe,
+    /** What every screen shows: checking until the Gate runs, and while the
+     * Backend changes. */
+    view: (): GateView<S> => view,
+    /** The Backend running; null until it has started. */
+    backend: (): Backend | null => running?.backend ?? null,
+    /** Whether the device is online. */
+    online,
+    onOnlineChange: (changed: () => void) =>
+      host().lifecycle.onOnlineChange(changed),
+    canSignOut,
+
+    /** Chooses `backend` and runs on it at once. Each Backend keeps its own
+     * Signed-in Accounts. */
+    setBackend: async (asked: Backend) => {
+      const backend = offered(asked) ?? 'cloud';
+      await remember((all) => ({ ...all, backend }));
+      await runOn(backend);
+      host().tabs?.announce({ quiet: [] });
+    },
+
+    /** An Account Switch: the account opens at once from what the device
+     * keeps; the Backend hears of it behind. From an Account Lost, the lost
+     * account's Copy is deleted. */
+    switchTo: (userId: string) => send({ type: 'SWITCH', userId }),
+
+    /** Signs one more account in, who becomes the Active Account. On the
+     * cloud Backend the page leaves for the sign-in service; on the device
+     * Backend the Named Sign-In asks who. */
+    addAccount: async () => {
+      const current = running;
+      if (current === null) return;
+      const error = await current.runtime.runPromise(
+        Effect.gen(function* () {
+          const signIn = yield* SignIn;
+          yield* signIn.signIn();
+          return yield* signIn.takeLoginError;
+        }),
+      );
+      // A sign-in that comes back to the app, as on a phone, says here why
+      // it signed nobody in.
+      if (error !== null) push({ kind: 'loginError', error });
+      checkAgain();
+    },
+
+    /** Signs the Active Account out of this device; whoever is left opens.
+     * From an Account Lost, forgets the lost account and deletes its Copy.
+     * False, and nothing happens, when the Backend can't be reached. */
+    signOut: (): boolean => {
+      // Forgetting a lost account needs no Backend.
+      if (view.kind === 'accountLost') {
+        send({ type: 'SIGN_OUT' });
+        return true;
+      }
+      if (!canSignOut()) return false;
+      send({ type: 'SIGN_OUT' });
+      return true;
+    },
+
+    /** Signs every account out of this device. False, and nothing happens,
+     * when the Backend can't be reached. */
+    signOutEveryone: (): boolean => {
+      if (!canSignOut()) return false;
+      send({ type: 'SIGN_OUT_EVERYONE' });
+      return true;
+    },
+
+    /** Asks the Backend again who is signed in. */
+    checkAgain,
+
+    /** Tries again to open an account that would not open. */
+    retry: () => send({ type: 'RETRY' }),
+
+    /** The oldest Gate Notice not yet taken, once; null when none. */
+    takeNotice: (): GateNotice | null => {
+      const notice = notices.shift() ?? null;
+      if (notice !== null) notify();
+      return notice;
+    },
+    /** The oldest Gate Notice not yet taken, without taking it. */
+    notice: (): GateNotice | null => notices[0] ?? null,
+
+    /** Whether the device Backend is asking who signs in, and how to answer:
+     * a choice, or null to sign nobody in. */
+    namedSignIn: {
+      subscribe: chooser.subscribe,
+      isAsking: chooser.isAsking,
+      answer: (choice: NamedChoice | null) => chooser.answer(choice),
+    },
+  };
+};
+
+/** A Gate, as `createGate` makes it. */
+export type Gate<S> = ReturnType<typeof createGate<S, never>>;

package/src/app/gate/index.ts

@@ -0,0 +1,3 @@
+export { createGate, type Gate, type GateConfig } from './gate.ts';
+export { gateReact, type GateReact } from './react.tsx';
+export type { GateNotice, GateView } from './domain/index.ts';

package/src/app/gate/memory.ts

@@ -0,0 +1,56 @@
+import { Effect, type Layer, Schema } from 'effect';
+import { StdTable, type StdTableService } from '@kestack/std-toolkit/db';
+import { ESchema } from '@kestack/std-toolkit/eschema';
+import { Backend } from '../host/index.ts';
+
+const User = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String,
+  email: Schema.String,
+  image: Schema.NullOr(Schema.String),
+});
+
+const Remembered = Schema.Struct({
+  /** The Remembered Accounts, as the Backend last named them. */
+  accounts: Schema.Array(Schema.Struct({ user: User, active: Schema.Boolean })),
+  /** The account found lost, until the User signs in to it again or opens
+   * another. */
+  lost: Schema.NullOr(User),
+});
+
+const GateMemory = ESchema.make('GateMemory', {
+  /** The Backend chosen; null until one is. */
+  backend: Schema.NullOr(Backend),
+  cloud: Remembered,
+  device: Remembered,
+}).build();
+
+type GateMemory = typeof GateMemory.Type;
+
+const NOBODY: typeof Remembered.Type = { accounts: [], lost: null };
+
+/** Where the Gate keeps what it remembers on this device. Realize it on any
+ * StdTable adapter: Memory, IDB in a browser, SQLite on a phone. */
+export const gateTable = StdTable.make('auth-gate').primary('pk', 'sk').build();
+
+/** A place to keep `gateTable`. */
+export type GateTable = Layer.Layer<
+  StdTableService<typeof gateTable.logicalName>
+>;
+
+const memory = gateTable
+  .singleEntity(GateMemory)
+  .default({ backend: null, cloud: NOBODY, device: NOBODY });
+
+/** Reads and changes what the Gate remembers, kept in `table`. */
+export const gateMemory = (table: GateTable) => ({
+  read: memory.get().pipe(
+    Effect.map(({ value }): GateMemory => value),
+    Effect.provide(table),
+    Effect.orDie,
+  ),
+  update: (change: (current: GateMemory) => GateMemory) =>
+    memory
+      .getAndUpdate(change)
+      .pipe(Effect.provide(table), Effect.orDie, Effect.asVoid),
+});

package/src/app/gate/react.tsx

@@ -0,0 +1,139 @@
+import {
+  createContext,
+  type ReactNode,
+  useContext,
+  useSyncExternalStore,
+} from 'react';
+import type { NamedChoice } from '@kestack/auth-toolkit/client';
+import type { GateView } from './domain/index.ts';
+import type { Gate } from './gate.ts';
+
+type Open<S> = Extract<GateView<S>, { kind: 'open' }>;
+type NotOpen<S> = Exclude<GateView<S>, { kind: 'open' }>;
+
+const CHECKING = { kind: 'checking' } as const;
+
+/**
+ * A Gate as React sees it, on any platform: `SignedIn` and `SignedOut`
+ * around any part of the app, from the whole of it to one button;
+ * `useGate` anywhere; `useAccounts` and `useSession` inside `SignedIn`. Nothing runs until one of them first renders.
+ */
+export const gateReact = <S,>(gate: Gate<S>) => {
+  const OpenContext = createContext<Open<S> | undefined>(undefined);
+
+  // What the Gate shows now; checking until it runs.
+  const useView = (): GateView<S> =>
+    useSyncExternalStore(gate.subscribe, gate.view, () => CHECKING);
+
+  const useOpen = () => {
+    const open = useContext(OpenContext);
+    if (open === undefined)
+      throw new Error('useSession and useAccounts must be inside SignedIn');
+    return open;
+  };
+
+  /**
+   * Renders `children` while an account is open, `fallback` otherwise (a
+   * node, or one per view). Everything inside remounts on an Account
+   * Switch, so wrap as little as the part that needs an account.
+   */
+  function SignedIn(props: {
+    readonly children: ReactNode;
+    readonly fallback?: ReactNode | ((view: NotOpen<S>) => ReactNode);
+  }) {
+    const view = useView();
+    if (view.kind !== 'open') {
+      const { fallback } = props;
+      return typeof fallback === 'function'
+        ? fallback(view as NotOpen<S>)
+        : (fallback ?? null);
+    }
+    return (
+      <OpenContext key={view.account.user.id} value={view}>
+        {props.children}
+      </OpenContext>
+    );
+  }
+
+  /** Renders `children` only while nobody is signed in. */
+  function SignedOut(props: { readonly children: ReactNode }) {
+    return useView().kind === 'signedOut' ? props.children : null;
+  }
+
+  const dismissNotice = () => void gate.takeNotice();
+  const answer = (choice: NamedChoice | null) =>
+    gate.namedSignIn.answer(choice);
+
+  /**
+   * The Gate, anywhere: what it shows, the Backend it runs on and changing
+   * it, whether the device is online, the oldest Gate Notice, the Named
+   * Sign-In's question, and what can be done before anyone is open.
+   */
+  const useGate = () => ({
+    view: useView(),
+    /** The Backend running; null until it has started. */
+    backend: useSyncExternalStore(gate.subscribe, gate.backend, () => null),
+    /** Chooses a Backend and runs on it at once. */
+    setBackend: gate.setBackend,
+    /** Whether the device is online. */
+    online: useSyncExternalStore(gate.onOnlineChange, gate.online, () => true),
+    /** The oldest Gate Notice not yet dismissed. */
+    notice: useSyncExternalStore(gate.subscribe, gate.notice, () => null),
+    dismissNotice,
+    /** Asks the Backend again who is signed in. */
+    checkAgain: gate.checkAgain,
+    /** Tries again to open an account that would not open. */
+    retry: gate.retry,
+    /** Signs an account in, the first or one more. */
+    signIn: gate.addAccount,
+    /** An Account Switch, as from an Account Lost, where nobody is open. */
+    switchTo: gate.switchTo,
+    /** Signs the Active Account out, or forgets a lost one; false when the
+     * Backend can't be reached. */
+    signOut: gate.signOut,
+    /** Whether the device Backend is asking who signs in, and the answer: a
+     * choice, or null to sign nobody in. */
+    namedSignIn: {
+      asking: useSyncExternalStore(
+        gate.namedSignIn.subscribe,
+        gate.namedSignIn.isAsking,
+        () => false,
+      ),
+      answer,
+    },
+  });
+
+  /**
+   * The Signed-in Accounts, and what is done with them; only inside
+   * `SignedIn`.
+   */
+  const useAccounts = () => {
+    const open = useOpen();
+    return {
+      /** The open account. */
+      current: open.account,
+      /** Every Signed-in Account. */
+      all: open.accounts,
+      /** Signs one more account in, who becomes the Active Account. */
+      add: gate.addAccount,
+      /** An Account Switch, at once. */
+      switchTo: gate.switchTo,
+      /** False when the Backend can't be reached. */
+      signOut: gate.signOut,
+      /** False when the Backend can't be reached. */
+      signOutEveryone: gate.signOutEveryone,
+    };
+  };
+
+  return {
+    SignedIn,
+    SignedOut,
+    useGate,
+    useAccounts,
+    /** The open Account's Session; only inside `SignedIn`. */
+    useSession: (): S => useOpen().session,
+  };
+};
+
+/** A Gate's React side, as `gateReact` makes it. */
+export type GateReact<S> = ReturnType<typeof gateReact<S>>;