@oxyhq/services 15.0.0 → 17.0.0

package/src/ui/context/OxyContext.tsx

@@ -9,6 +9,7 @@ import {
   useState,
   type ReactNode,
 } from 'react';
+import { Linking } from 'react-native';
 import { OxyServices, oxyClient } from '@oxyhq/core';
 import type {
   User,
@@ -19,14 +20,21 @@ import type {
   ClientSession,
   AuthStateStore,
   PersistedAuthState,
+  AccountDialogController,
+  AccountDialogView,
 } from '@oxyhq/core';
 import {
   KeyManager,
   runSessionColdBoot,
   installAuthRefreshHandler,
   startTokenRefreshScheduler,
+  createAccountDialogController,
   logger as loggerUtil,
 } from '@oxyhq/core';
+import {
+  registerAccountDialogControls,
+  notifyAccountDialogVisibility,
+} from '../navigation/accountDialogManager';
 import { useAuthStore, type AuthState } from '../stores/authStore';
 import { useShallow } from 'zustand/react/shallow';
 import type { UseFollowHook } from '../hooks/useFollow.types';
@@ -157,6 +165,22 @@ export interface OxyContextState {
   showBottomSheet?: (screenOrConfig: RouteName | { screen: RouteName; props?: Record<string, unknown> }) => void;
   openAvatarPicker: () => void;
 
+  // Unified account dialog (the single switcher + sign-in surface). The headless
+  // state machine lives in `@oxyhq/core`; `OxyAccountDialog` (mounted by
+  // `OxyProvider`) binds to it. `null` in the no-provider loading state.
+  /** The headless controller driving {@link openAccountDialog}. `null` before mount. */
+  accountDialogController: AccountDialogController | null;
+  /** Whether the unified account dialog is currently presented. */
+  isAccountDialogOpen: boolean;
+  /**
+   * Open the unified account dialog. `accounts` (default) shows the switcher;
+   * `signin` / `add` open the sign-in entry. Replaces every prior device/account
+   * surface and the standalone sign-in modal.
+   */
+  openAccountDialog: (view?: AccountDialogView) => void;
+  /** Dismiss the unified account dialog and cancel any in-flight sign-in flow. */
+  closeAccountDialog: () => void;
+
   // Unified account graph (self, owned orgs/projects/bots, accounts shared with
   // the caller). The cryptographic Commons/DID "identity" is a SEPARATE concept.
   //
@@ -367,6 +391,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   userRef.current = user;
   isAuthenticatedRef.current = isAuthenticated;
   const [initialized, setInitialized] = useState(false);
+  const [accountDialogOpen, setAccountDialogOpen] = useState(false);
   const setAuthState = useAuthStore.setState;
 
   // Keep the shared `oxyClient` singleton's token store in lockstep with the
@@ -505,18 +530,47 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const markAuthResolvedRef = useRef(markAuthResolved);
   markAuthResolvedRef.current = markAuthResolved;
 
+  // Re-boot indirection: the SessionClient is built in the ref initializer below
+  // (before `runColdBoot` is defined), but its `onSessionAppeared` must re-run the
+  // cold boot to self-acquire when a sibling signs in on this device. A ref bridges
+  // the ordering; it is assigned right after `runColdBoot` is declared.
+  const runColdBootRef = useRef<(() => Promise<void>) | null>(null);
+
   // Server-authoritative device session client. Built ONCE per `oxyServices`
   // instance. `onUnauthenticated` (a device signout-all pushed over the socket,
   // or bootstrapped as zero-account) clears the persisted store + local state so
   // a reload does not try to restore a session the device no longer has.
+  // `signedOutSocketAuth` + `onSessionAppeared` power the signed-out sync channel:
+  // an idle tab joins its `device:<id>` room (web via the `oxy_device` cookie,
+  // native via the shared device token) and self-acquires on a sibling sign-in.
   const sessionClientPairRef = useRef<ReturnType<typeof createSessionClient> | null>(null);
   if (!sessionClientPairRef.current) {
-    sessionClientPairRef.current = createSessionClient(oxyServices, authStore, () => {
-      clearPersistedAuthSafe(authStore, logger);
-      void clearSessionStateRef.current().catch((clearError) => {
-        logger('Failed to clear local state on remote sign-out', clearError);
-      });
-    });
+    sessionClientPairRef.current = createSessionClient(
+      oxyServices,
+      authStore,
+      () => {
+        clearPersistedAuthSafe(authStore, logger);
+        void clearSessionStateRef.current().catch((clearError) => {
+          logger('Failed to clear local state on remote sign-out', clearError);
+        });
+      },
+      {
+        signedOutSocketAuth: async () => {
+          // Web (`*.oxy.so`): the first-party `oxy_device` cookie rides the
+          // same-site handshake automatically — just connect.
+          if (isWebBrowser()) return true;
+          // Native (no cookie jar): present the shared device token if we have one.
+          try {
+            return (await authStore.loadDeviceToken()) ?? false;
+          } catch {
+            return false;
+          }
+        },
+        onSessionAppeared: () => {
+          void runColdBootRef.current?.();
+        },
+      },
+    );
   }
   const { client: sessionClient, host: sessionClientHost } = sessionClientPairRef.current;
 
@@ -804,6 +858,61 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     [commitSession],
   );
 
+  // ── Unified account dialog ─────────────────────────────────────────────────
+  // The single account-chooser + sign-in surface. Built ONCE per provider mount
+  // and bound to the live `oxyServices` + `sessionClient` + this provider's
+  // `handleWebSession` commit funnel. `handleWebSession` is threaded through a ref
+  // so the controller keeps a STABLE `commitSession` (rebuilding the controller
+  // on every commit-identity change would drop its subscription + state).
+  const handleWebSessionRef = useRef(handleWebSession);
+  handleWebSessionRef.current = handleWebSession;
+
+  const accountDialogControllerRef = useRef<AccountDialogController | null>(null);
+  if (!accountDialogControllerRef.current) {
+    accountDialogControllerRef.current = createAccountDialogController({
+      oxyServices,
+      sessionClient,
+      clientId,
+      locale: currentLanguage,
+      commitSession: (session) => handleWebSessionRef.current(session),
+      onSignedIn: () => setAccountDialogOpen(false),
+      openUrl: (url) => {
+        void Linking.openURL(url);
+      },
+    });
+  }
+  const accountDialogController = accountDialogControllerRef.current;
+
+  const openAccountDialog = useCallback((view?: AccountDialogView): void => {
+    accountDialogControllerRef.current?.setView(view ?? 'accounts');
+    setAccountDialogOpen(true);
+  }, []);
+
+  const closeAccountDialog = useCallback((): void => {
+    accountDialogControllerRef.current?.cancelSignIn();
+    setAccountDialogOpen(false);
+  }, []);
+
+  // Start driving the dialog on mount; tear it down on unmount.
+  useEffect(() => {
+    const controller = accountDialogControllerRef.current;
+    controller?.start();
+    return () => controller?.destroy();
+  }, []);
+
+  // Expose the live open/close controls to the imperative manager so
+  // `showSignInModal()` (and any app-level imperative "sign in" handler) works.
+  useEffect(
+    () => registerAccountDialogControls({ open: openAccountDialog, close: closeAccountDialog }),
+    [openAccountDialog, closeAccountDialog],
+  );
+
+  // Broadcast visibility so `OxySignInButton`'s "Signing in…" affordance stays
+  // accurate regardless of what opened or dismissed the dialog.
+  useEffect(() => {
+    notifyAccountDialogVisibility(accountDialogOpen);
+  }, [accountDialogOpen]);
+
   // Keyless password sign-in: username/email + password.
   const signInWithPassword = useCallback(
     async (
@@ -908,6 +1017,18 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         },
         onSignedOut: () => {
           markAuthResolvedRef.current();
+          // Open the signed-out realtime channel so this idle tab joins its
+          // `device:<id>` room (web `oxy_device` cookie / native device token)
+          // and self-acquires when a sibling signs in. Idempotent, best-effort.
+          void sessionClient.start().catch((startError) => {
+            if (__DEV__) {
+              loggerUtil.debug(
+                'signed-out socket start failed (non-fatal)',
+                { component: 'OxyContext', method: 'runColdBoot' },
+                startError as unknown,
+              );
+            }
+          });
         },
         onStepError: (id, error) => {
           if (__DEV__) {
@@ -931,7 +1052,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       // Backstop: resolve on every exit path so the gate can never hang.
       markAuthResolvedRef.current();
     }
-  }, [oxyServices, authStore]);
+  }, [oxyServices, authStore, sessionClient]);
+  // Bridge for `onSessionAppeared` (SessionClient) → re-run the cold boot to
+  // self-acquire when a sibling signs in on this device while this tab is idle.
+  runColdBootRef.current = runColdBoot;
 
   useEffect(() => {
     if (!storage || initialized) {
@@ -1018,6 +1142,9 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   useEffect(() => {
     if (isAuthenticated && initialized && tokenReady) {
       refreshAccounts();
+      // Reload the dialog's own account graph too, so a session restored OUTSIDE
+      // the dialog (cold boot / password sign-in) surfaces its graph accounts.
+      void accountDialogControllerRef.current?.refresh();
     }
   }, [isAuthenticated, initialized, tokenReady, refreshAccounts]);
 
@@ -1115,6 +1242,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       useFollow: useFollowHook,
       showBottomSheet: showBottomSheetForContext,
       openAvatarPicker,
+      accountDialogController,
+      isAccountDialogOpen: accountDialogOpen,
+      openAccountDialog,
+      closeAccountDialog,
       accounts,
       switchToAccount,
       refreshAccounts,
@@ -1159,6 +1290,10 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       useFollowHook,
       showBottomSheetForContext,
       openAvatarPicker,
+      accountDialogController,
+      accountDialogOpen,
+      openAccountDialog,
+      closeAccountDialog,
       accounts,
       switchToAccount,
       refreshAccounts,
@@ -1221,6 +1356,10 @@ const LOADING_STATE: OxyContextState = {
   clientId: null,
   oxyServices: LOADING_STATE_OXY_SERVICES,
   openAvatarPicker: () => {},
+  accountDialogController: null,
+  isAccountDialogOpen: false,
+  openAccountDialog: () => {},
+  closeAccountDialog: () => {},
   accounts: [],
   switchToAccount: () => rejectMissingProvider<void>(),
   refreshAccounts: () => rejectMissingProvider<void>(),

package/src/ui/hooks/mutations/mutationKeys.ts

@@ -32,7 +32,7 @@ export const mutationKeys = {
     removeDevice: ['mutation', 'session', 'removeDevice'] as const,
   },
 
-  // Connected apps (FedCM grants)
+  // Connected apps (OAuth grants)
   connectedApps: {
     revoke: ['mutation', 'connectedApps', 'revoke'] as const,
   },

package/src/ui/hooks/mutations/useAccountMutations.ts

@@ -109,7 +109,7 @@ export const useUpdateProfile = () => {
         refreshAvatarInStore(activeSessionId, updates.avatar, oxyServices);
       }
 
-      // Invalidate all related queries so every consumer (AccountSwitcher,
+      // Invalidate all related queries so every consumer (the account dialog,
       // session lists, managed accounts, etc.) refetches the fresh profile.
       // This is critical right after `username` is set the first time, when
       // every cached "session profile" still reports the user as unnamed.
@@ -632,20 +632,20 @@ export const useUpdateUserPreferences = () => {
 };
 
 /**
- * Revoke the authenticated user's authorization for a specific RP origin.
- * Removes the FedCM grant so the origin no longer appears in the user's
- * "Connected apps" list — next sign-in from that origin will require explicit
+ * Revoke the current user's grant for a connected application (by its
+ * `applicationId`). Removes the grant so the app no longer appears in the user's
+ * "Connected apps" list — next sign-in for that app will require explicit
  * re-consent.
  */
-export const useRevokeAuthorizedApp = () => {
+export const useRevokeConnectedApp = () => {
   const { oxyServices, activeSessionId } = useOxy();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationKey: [...mutationKeys.connectedApps.revoke],
-    mutationFn: async (origin: string) => {
+    mutationFn: async (applicationId: string) => {
       return authenticatedApiCall<void>(oxyServices, activeSessionId, () =>
-        oxyServices.revokeAuthorizedApp(origin)
+        oxyServices.revokeAppGrant(applicationId)
       );
     },
     onSuccess: () => {
@@ -653,7 +653,7 @@ export const useRevokeAuthorizedApp = () => {
     },
     onError: (error) => {
       toast.error(
-        error instanceof Error ? error.message : 'Failed to revoke authorized app'
+        error instanceof Error ? error.message : 'Failed to revoke connected app'
       );
     },
   });

package/src/ui/hooks/queries/queryKeys.ts

@@ -77,7 +77,7 @@ export const queryKeys = {
     usage: (accountScope?: string) => [...queryKeys.storage.all, 'usage', accountScope] as const,
   },
 
-  // Connected apps (FedCM grants the user has authorized)
+  // Connected apps (OAuth grants the user has authorized)
   connectedApps: {
     all: ['connectedApps'] as const,
     list: () => [...queryKeys.connectedApps.all, 'list'] as const,

package/src/ui/hooks/queries/useAccountQueries.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useQuery, useQueries, useQueryClient } from '@tanstack/react-query';
 import { authenticatedApiCall } from '@oxyhq/core';
-import type { AuthorizedApp, User } from '@oxyhq/core';
+import type { ConnectedApp, User } from '@oxyhq/core';
 import { queryKeys } from './queryKeys';
 import { mutationKeys } from '../mutations/mutationKeys';
 import { useOxy } from '../../context/OxyContext';
@@ -205,21 +205,20 @@ export const useUsersBySessions = (sessionIds: string[], options?: { enabled?: b
 };
 
 /**
- * List the authenticated user's authorized RP apps (FedCM grants).
- *
- * Returns the intersection of the user's grants with the currently-approved
- * RP catalog. Drives the "Connected apps" management screen.
+ * List the third-party OAuth applications the current user has connected via
+ * the consent flow (`GET /auth/grants`). Drives the "Connected apps" management
+ * screen.
  */
-export const useAuthorizedApps = (options?: { enabled?: boolean }) => {
+export const useConnectedApps = (options?: { enabled?: boolean }) => {
   const { oxyServices, activeSessionId, isAuthenticated } = useOxy();
 
-  return useQuery<AuthorizedApp[]>({
+  return useQuery<ConnectedApp[]>({
     queryKey: queryKeys.connectedApps.list(),
     queryFn: async () => {
-      return authenticatedApiCall<AuthorizedApp[]>(
+      return authenticatedApiCall<ConnectedApp[]>(
         oxyServices,
         activeSessionId,
-        () => oxyServices.listAuthorizedApps()
+        () => oxyServices.listConnectedApps()
       );
     },
     enabled: (options?.enabled !== false) && isAuthenticated,

package/src/ui/hooks/useAuth.ts

@@ -23,11 +23,10 @@
  * - Manual sign-in: signIn() redirects to the IdP (web) or opens the auth sheet (native)
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { useOxy } from '../context/OxyContext';
 import type { User } from '@oxyhq/core';
 import { isWebBrowser } from '../utils/isWebBrowser';
-import { showSignInModal } from '../components/SignInModal';
 
 export interface AuthState {
   /** Current authenticated user, null if not authenticated */
@@ -138,44 +137,33 @@ export function useAuth(): UseAuthReturn {
     getPublicKey,
     showBottomSheet,
     openAvatarPicker,
+    openAccountDialog,
   } = useOxy();
 
   const signIn = useCallback(async (publicKey?: string): Promise<User> => {
-    // Web (no key): open the in-app "Sign in with Oxy" modal. There is NO
-    // automatic navigation to any login page — the device-first cold boot
-    // already restored a session if one existed; an explicit click presents the
-    // SDK sign-in surface (password / QR device flow / add account).
-    if (isWebBrowser() && !publicKey) {
-      showSignInModal();
-      // Resolves when the modal commits a session; the caller typically reacts
-      // to `isAuthenticated` rather than this promise.
-      return new Promise<User>(() => undefined);
-    }
-
-    // Native: use the cryptographic identity directly when a public key is given.
+    // Native: sign in directly with the cryptographic identity when a public key
+    // is provided, or an existing keychain identity is found.
     if (publicKey) {
       return oxySignIn(publicKey);
     }
-
-    // Native with an existing keychain identity: sign in with it.
-    const hasExisting = await hasIdentity();
-    if (hasExisting) {
-      const existingKey = await getPublicKey();
-      if (existingKey) {
-        return oxySignIn(existingKey);
+    if (!isWebBrowser()) {
+      const hasExisting = await hasIdentity();
+      if (hasExisting) {
+        const existingKey = await getPublicKey();
+        if (existingKey) {
+          return oxySignIn(existingKey);
+        }
       }
     }
 
-    // Native with no identity: open the auth sheet (password / QR device flow).
-    if (showBottomSheet) {
-      showBottomSheet('OxyAuth');
-      return new Promise((_, reject) => {
-        reject(new Error('Please complete sign-in in the auth sheet'));
-      });
-    }
-
-    throw new Error('No authentication method available');
-  }, [oxySignIn, hasIdentity, getPublicKey, showBottomSheet]);
+    // Web, or native without a keychain identity: open the unified account dialog
+    // on its sign-in view (device flow / QR / password hand-off). There is NO
+    // automatic navigation to a login page — the device-first cold boot already
+    // restored a session if one existed. The caller reacts to `isAuthenticated`,
+    // so this promise intentionally never resolves.
+    openAccountDialog('signin');
+    return new Promise<User>(() => undefined);
+  }, [oxySignIn, hasIdentity, getPublicKey, openAccountDialog]);
 
   const signOut = useCallback(async (): Promise<void> => {
     await logout();