@oxyhq/services 22.0.0 → 22.2.0

package/src/ui/components/oxyAuthChooserStyles.ts

@@ -0,0 +1,152 @@
+import { StyleSheet } from 'react-native';
+
+/** High-contrast QR plate background — kept in sync with `OxyAuthChooser`'s QR colors. */
+const QR_PLATE_BG = '#FFFFFF';
+
+/**
+ * Shared styles for `OxyAuthChooser`'s views. Extracted from `OxyAccountDialog`
+ * so both the Dialog-wrapped host and any bare host (e.g. a future
+ * auth.oxy.so hub page) render identically without duplicating a StyleSheet.
+ */
+export const authChooserStyles = StyleSheet.create({
+  rows: {
+    width: '100%',
+    gap: 8,
+  },
+  accountRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 16,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+  },
+  rowDisabled: {
+    opacity: 0.6,
+  },
+  avatarRing: {
+    borderRadius: 9999,
+    borderWidth: 2,
+    padding: 1,
+  },
+  rowMeta: {
+    flex: 1,
+    minWidth: 0,
+  },
+  rowName: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  rowHandle: {
+    fontSize: 12.5,
+    marginTop: 1,
+  },
+  addRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderStyle: 'dashed',
+    borderRadius: 16,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginTop: 8,
+  },
+  addBadge: {
+    width: 40,
+    height: 40,
+    borderRadius: 9999,
+    borderWidth: StyleSheet.hairlineWidth,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  footerLinks: {
+    alignItems: 'center',
+    marginTop: 16,
+  },
+  footerLink: {
+    alignSelf: 'center',
+    paddingVertical: 10,
+    marginTop: 12,
+  },
+  linkText: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  signInBlock: {
+    width: '100%',
+  },
+  primaryButton: {
+    width: '100%',
+    borderRadius: 14,
+    marginTop: 8,
+  },
+  secondaryButton: {
+    width: '100%',
+    borderRadius: 14,
+    marginTop: 10,
+  },
+  usernameInput: {
+    width: '100%',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 14,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    fontSize: 16,
+    marginTop: 8,
+  },
+  dividerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    marginVertical: 14,
+  },
+  dividerLine: {
+    flex: 1,
+    height: StyleSheet.hairlineWidth,
+  },
+  dividerText: {
+    marginHorizontal: 12,
+    fontSize: 13,
+  },
+  centeredBlock: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    paddingVertical: 24,
+  },
+  mutedText: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  qrHeadline: {
+    fontSize: 16,
+    fontWeight: '700',
+    textAlign: 'center',
+  },
+  errorText: {
+    fontSize: 14,
+    textAlign: 'center',
+  },
+  errorBanner: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    width: '100%',
+    borderRadius: 12,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    marginBottom: 12,
+  },
+  errorBannerText: {
+    flex: 1,
+    fontSize: 13.5,
+    lineHeight: 18,
+  },
+  qrPlate: {
+    padding: 16,
+    borderRadius: 16,
+    backgroundColor: QR_PLATE_BG,
+  },
+});

package/src/ui/components/passkeyHubPopup.ts

@@ -0,0 +1,28 @@
+/**
+ * Popup opener for the cross-origin passkey hub (b2).
+ *
+ * On a non-Oxy web origin (e.g. mention.earth) a WebAuthn ceremony can't run
+ * locally — the credential's RP ID is bound to `oxy.so`. Instead,
+ * `AccountDialogController.startPasskeyHubSignIn` opens a popup at the
+ * auth.oxy.so passkey hub, where the SAME ceremony IS a first-party operation.
+ *
+ * Kept in its own module (mirroring `oauthNavigation.ts`'s
+ * `redirectToAuthorize`) so `window.open` sits behind a plain function the
+ * controller wiring in `OxyContext` can inject without touching `window`
+ * itself, and so a test can substitute a fake opener.
+ */
+
+import type { PopupWindowHandle } from '@oxyhq/core';
+
+/**
+ * Open a new, EMPTY popup window. Must be called SYNCHRONOUSLY from within a
+ * user-gesture handler (before any `await`) — opening it after an async call
+ * loses the gesture attribution and the browser silently blocks it. Returns
+ * `null` when blocked, or when there is no DOM `window` (native/SSR — the
+ * hub-popup flow does not apply there).
+ */
+export function openPasskeyHubPopup(): PopupWindowHandle | null {
+    const win = (globalThis as { window?: Window }).window;
+    if (!win) return null;
+    return win.open('', '_blank', 'width=420,height=640');
+}

package/src/ui/context/OxyContext.tsx

@@ -32,6 +32,7 @@ import {
   notifyAccountDialogVisibility,
 } from '../navigation/accountDialogManager';
 import { redirectToAuthorize } from '../components/oauthNavigation';
+import { openPasskeyHubPopup } from '../components/passkeyHubPopup';
 import { isWebBrowser } from '../utils/isWebBrowser';
 import { runProviderColdBoot } from '../boot/runProviderColdBoot';
 import { loadPersistedDeviceCredential } from '../utils/deviceCredential';
@@ -606,14 +607,41 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     [commitSession],
   );
 
+  // Commit a minted graph-SWITCH session. Same funnel as `handleWebSession` but
+  // IN-PLACE: `hubSync: false` so switching accounts never triggers the
+  // cross-origin hub-sync full-page redirect. The switch already propagates
+  // across tabs/apps via the server's `session_state` socket broadcast.
+  const commitSwitchedSession = useCallback(
+    async (session: SessionLoginResponse): Promise<void> => {
+      if (!session?.user || !session?.sessionId || !session.accessToken) {
+        throw new Error('Session response did not include a usable session');
+      }
+      await commitSession(
+        {
+          sessionId: session.sessionId,
+          accessToken: session.accessToken,
+          deviceSecret: session.deviceSecret,
+          deviceId: session.deviceId,
+          expiresAt: session.expiresAt,
+          userId: session.user.id,
+          user: session.user,
+        },
+        { activate: true, hubSync: false },
+      );
+    },
+    [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).
+  // commit funnels. Both funnels are threaded through refs so the controller
+  // keeps STABLE commit callbacks (rebuilding the controller on every
+  // commit-identity change would drop its subscription + state).
   const handleWebSessionRef = useRef(handleWebSession);
   handleWebSessionRef.current = handleWebSession;
+  const commitSwitchedSessionRef = useRef(commitSwitchedSession);
+  commitSwitchedSessionRef.current = commitSwitchedSession;
 
   const accountDialogControllerRef = useRef<AccountDialogController | null>(null);
   if (!accountDialogControllerRef.current) {
@@ -626,6 +654,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       // instant `/auth-session` `auth_update` wake instead of a slow poll.
       socketFactory: io,
       commitSession: (session) => handleWebSessionRef.current(session),
+      commitSwitchedSession: (session) => commitSwitchedSessionRef.current(session),
       onSignedIn: () => setAccountDialogOpen(false),
       openUrl: (url) => {
         if (isWebBrowser()) {
@@ -640,6 +669,11 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       // controller short-circuits, so `redirectToAuthorize` never runs for the
       // `oxycommons://` payload.
       canOpenApp: isWebBrowser() ? undefined : (url) => Linking.canOpenURL(url),
+      // Web-only: lets `startPasskeyHubSignIn` open the auth.oxy.so passkey hub
+      // popup (b2) for a non-Oxy origin. `undefined` on native — there is no
+      // popup concept there, and off-origin passkey sign-in isn't reachable
+      // (Commons owns the native flow).
+      openPopup: isWebBrowser() ? openPasskeyHubPopup : undefined,
     });
   }
   const accountDialogController = accountDialogControllerRef.current;

package/src/ui/context/useOxyAccountGraph.ts

@@ -13,7 +13,7 @@ interface UseOxyAccountGraphParams {
   oxyServices: OxyServices;
   sessionClient: SessionClient;
   syncFromClient: () => Promise<void>;
-  commitSession: (input: CommitInput, options: { activate: boolean }) => Promise<void>;
+  commitSession: (input: CommitInput, options: { activate: boolean; hubSync?: boolean }) => Promise<void>;
   queryClient: QueryClient;
   accountDialogControllerRef: RefObject<AccountDialogController | null>;
   clearSessionStateRef: RefObject<() => Promise<void>>;
@@ -89,7 +89,9 @@ export function useOxyAccountGraph({
           userId: result.user.id,
           user: result.user,
         },
-        { activate: true },
+        // A switch is IN-PLACE: never run the cross-origin hub-sync full-page
+        // redirect. Cross-tab/app propagation rides the `session_state` socket.
+        { activate: true, hubSync: false },
       );
       await runPostAccountSwitchSideEffects();
     },

package/src/ui/hooks/useSwitchableAccounts.ts

@@ -23,6 +23,7 @@ const EMPTY_SNAPSHOT: AccountDialogSnapshot = {
     error: null,
     switchingAccountId: null,
     signIn: { phase: 'idle', authorizeCode: null, qrPayload: null, expiresAt: null, error: null },
+    commonsAvailability: 'unknown',
 };
 
 /**

package/src/ui/utils/commonsStoreLinks.ts

@@ -0,0 +1,38 @@
+/**
+ * Where to send a user who doesn't have Commons installed yet.
+ *
+ * Commons is not published to either app store as of this writing (no submit
+ * profile in its `eas.json`, no store listing) — so these are ALWAYS
+ * env-overridable and NEVER hardcoded, and the landing-page fallback exists
+ * precisely so a "Get Commons" affordance is never a dead link in the
+ * meantime. Once Commons ships to TestFlight/Play, set the two store env vars
+ * and every consumer picks them up with no code change.
+ */
+
+/** Real per-platform store URLs, or `undefined` where not yet configured. */
+export interface CommonsStoreLinks {
+  ios: string | undefined;
+  android: string | undefined;
+}
+
+/** Per-platform Commons store URLs, from env — `undefined` when unset. */
+export function getCommonsStoreLinks(): CommonsStoreLinks {
+  return {
+    ios: process.env.EXPO_PUBLIC_COMMONS_APP_STORE_URL || undefined,
+    android: process.env.EXPO_PUBLIC_COMMONS_PLAY_STORE_URL || undefined,
+  };
+}
+
+/** Placeholder landing page — the fallback while Commons has no store listing. */
+const DEFAULT_COMMONS_LANDING_URL = 'https://oxy.so/commons';
+
+/**
+ * Resolve the "Get Commons" href for the current platform. Never `undefined`
+ * — falls back to a landing page so the affordance is always a working link,
+ * store listing or not.
+ */
+export function getCommonsAcquisitionUrl(platformOS: 'ios' | 'android' | string): string {
+  const links = getCommonsStoreLinks();
+  const storeUrl = platformOS === 'ios' ? links.ios : platformOS === 'android' ? links.android : undefined;
+  return storeUrl ?? process.env.EXPO_PUBLIC_COMMONS_LANDING_URL ?? DEFAULT_COMMONS_LANDING_URL;
+}