@oxyhq/services 16.0.0 → 18.0.0

package/src/ui/components/OxySignInButton.tsx

@@ -1,12 +1,73 @@
 import type React from 'react';
-import { useCallback, useState, useEffect, useMemo } from 'react';
+import { useCallback, useState, useEffect, useMemo, useRef } from 'react';
 import { TouchableOpacity, Text, View, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Platform } from 'react-native';
+import {
+    logger,
+    generatePkcePair,
+    generateOAuthState,
+    buildOAuthAuthorizeUrl,
+    type PublicApplication,
+} from '@oxyhq/core';
 import { useAuthStore } from '../stores/authStore';
 import { useShallow } from 'zustand/react/shallow';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from './OxyLogo';
-import { showSignInModal, subscribeToSignInModal } from './SignInModal';
+import { subscribeToSignInModal } from '../navigation/accountDialogManager';
+import { redirectToAuthorize, openAuthorizeUrlNative } from './oauthNavigation';
+
+/**
+ * `sessionStorage` keys under which a third-party "Sign in with Oxy" OAuth flow
+ * persists its CSRF `state` and PKCE `code_verifier` across the authorize
+ * redirect. The Relying Party's redirect-URI callback reads them back to
+ * validate the returned `state` and replay the verifier on the token exchange.
+ *
+ * Web only: a browser RP navigates away to `auth.oxy.so` and back, so the
+ * handshake must survive a full-page redirect. Native completes the flow inside
+ * a single `WebBrowser` auth session and surfaces the handshake via
+ * {@link OxySignInButtonProps.onOAuthResult} instead.
+ */
+export const OXY_OAUTH_STATE_STORAGE_KEY = 'oxy_oauth_state';
+export const OXY_OAUTH_CODE_VERIFIER_STORAGE_KEY = 'oxy_oauth_code_verifier';
+
+/**
+ * The OAuth handshake surfaced to a NATIVE third-party RP via
+ * {@link OxySignInButtonProps.onOAuthResult} so it can finish the code exchange
+ * (`POST /auth/oauth/token`). Web RPs read the same `state` / `code_verifier`
+ * back from `sessionStorage` across the redirect and do not need this callback.
+ */
+export interface OxyOAuthResult {
+    /** Deep-link URL the native auth session returned to (`?code=…&state=…`), or `null` if unobserved. */
+    redirectUrl: string | null;
+    /** The CSRF `state` sent on the authorize request; the RP must match it on return. */
+    state: string;
+    /** The PKCE `code_verifier` to replay on the token exchange. */
+    codeVerifier: string;
+}
+
+/**
+ * Persist the OAuth CSRF `state` + PKCE `code_verifier` for the RP callback.
+ * Returns `false` when the handshake could not be stored — no `sessionStorage`
+ * (SSR / non-browser host) or a write that threw (`SecurityError` /
+ * `QuotaExceededError`, e.g. Safari private mode) — so the caller aborts the
+ * flow cleanly rather than redirect to a callback that cannot validate `state`.
+ */
+function persistOAuthHandshake(state: string, codeVerifier: string): boolean {
+    const store = (globalThis as { sessionStorage?: Storage }).sessionStorage;
+    try {
+        if (!store) throw new Error('sessionStorage is unavailable');
+        store.setItem(OXY_OAUTH_STATE_STORAGE_KEY, state);
+        store.setItem(OXY_OAUTH_CODE_VERIFIER_STORAGE_KEY, codeVerifier);
+        return true;
+    } catch (error) {
+        logger.warn(
+            'OxySignInButton: could not persist the OAuth handshake to sessionStorage; aborting third-party sign-in',
+            { component: 'OxySignInButton' },
+            error,
+        );
+        return false;
+    }
+}
 
 export interface OxySignInButtonProps {
     /**
@@ -48,6 +109,37 @@ export interface OxySignInButtonProps {
      * @default false
      */
     showWhenAuthenticated?: boolean;
+
+    /**
+     * Exact registered redirect URI the OAuth authorization code is returned to.
+     * REQUIRED only for third-party (`type: 'third_party'`) applications, which
+     * sign in via an OAuth + PKCE redirect to `auth.oxy.so`. First-party /
+     * official apps open the in-app dialog and ignore this prop. If a third-party
+     * app resolves without it, the button logs an error and does nothing (it will
+     * not invent a redirect URI).
+     */
+    oauthRedirectUri?: string;
+
+    /**
+     * Native only: receives the OAuth handshake after a third-party auth session
+     * so the RP can finish the token exchange. On web the handshake is read back
+     * from `sessionStorage` across the full-page redirect, so this is not used
+     * there. A native third-party sign-in with NO `onOAuthResult` handler cannot
+     * complete (the `state` + `code_verifier` are lost) and logs a warning.
+     *
+     * @example
+     * ```tsx
+     * <OxySignInButton
+     *   oauthRedirectUri="myapp://oauth/callback"
+     *   onOAuthResult={({ redirectUrl, state, codeVerifier }) => {
+     *     if (!redirectUrl) return;
+     *     const code = new URL(redirectUrl).searchParams.get('code');
+     *     // → POST /auth/oauth/token { code, code_verifier: codeVerifier, state }
+     *   }}
+     * />
+     * ```
+     */
+    onOAuthResult?: (result: OxyOAuthResult) => void;
 }
 
 /**
@@ -82,39 +174,152 @@ export const OxySignInButton: React.FC<OxySignInButtonProps> = ({
     text = 'Sign in with Oxy',
     disabled = false,
     showWhenAuthenticated = false,
+    oauthRedirectUri,
+    onOAuthResult,
 }) => {
     const theme = useTheme();
-    const { showBottomSheet } = useOxy();
+    const { openAccountDialog, oxyServices, clientId } = useOxy();
     const { isAuthenticated, isLoading } = useAuthStore(
         useShallow((state) => ({ isAuthenticated: state.isAuthenticated, isLoading: state.isLoading }))
     );
-    // Tracks visibility of the web full-screen sign-in modal so we can show
-    // "Signing in..." while it's open. On native we open a bottom sheet whose
-    // visibility is owned by the sheet manager — no subscription needed.
+    // Tracks whether the unified account dialog is open so we can show
+    // "Signing in..." while it is. The manager reports visibility on every
+    // change regardless of platform or what opened/closed it.
     const [isModalOpen, setIsModalOpen] = useState(false);
 
-    // Subscribe to web modal visibility only — bottom sheet manages its own state.
-    useEffect(() => {
-        if (Platform.OS !== 'web') return;
-        return subscribeToSignInModal(setIsModalOpen);
-    }, []);
+    useEffect(() => subscribeToSignInModal(setIsModalOpen), []);
+
+    // The application's public identity is resolved lazily on first press and its
+    // promise cached, so rapid taps share one in-flight resolve. The cache is
+    // KEYED on the identity inputs (clientId + the oxyServices instance): if
+    // either changes the cache is invalidated and re-resolved — without a
+    // useEffect. A rejected resolve clears the cache so a later press can retry.
+    const appResolutionRef = useRef<{
+        clientId: string;
+        oxyServices: typeof oxyServices;
+        promise: Promise<PublicApplication>;
+    } | null>(null);
+    // Re-entrancy guard: a routing pass may await network + crypto before it
+    // redirects, so block a second concurrent press from racing the sessionStorage
+    // handshake against a different PKCE pair.
+    const routingRef = useRef(false);
+
+    const resolvePublicApplication = useCallback((): Promise<PublicApplication> | null => {
+        if (!clientId) return null;
+        const cached = appResolutionRef.current;
+        if (cached && cached.clientId === clientId && cached.oxyServices === oxyServices) {
+            return cached.promise;
+        }
+        const promise = oxyServices.getPublicApplication(clientId).catch((error) => {
+            // Only clear if this is still the live entry (a later resolve may have
+            // replaced it after a clientId/oxyServices change).
+            if (appResolutionRef.current?.promise === promise) {
+                appResolutionRef.current = null;
+            }
+            throw error;
+        });
+        appResolutionRef.current = { clientId, oxyServices, promise };
+        return promise;
+    }, [clientId, oxyServices]);
+
+    // Official / first-party surface: the in-app account + sign-in dialog.
+    const startOfficialSignIn = useCallback(() => {
+        openAccountDialog('signin');
+    }, [openAccountDialog]);
+
+    // Third-party surface: an OAuth 2.0 authorization-code + PKCE redirect to
+    // auth.oxy.so. No FedCM, no SSO bounce, no Oxy session cookies.
+    const startThirdPartyOAuth = useCallback(
+        async (app: PublicApplication): Promise<void> => {
+            if (!clientId) {
+                startOfficialSignIn();
+                return;
+            }
+            if (!oauthRedirectUri) {
+                logger.error(
+                    'OxySignInButton: a third_party application requires the `oauthRedirectUri` prop to start the OAuth redirect; sign-in aborted',
+                    undefined,
+                    { component: 'OxySignInButton', clientId, application: app.name },
+                );
+                return;
+            }
+
+            const [pkce, state] = await Promise.all([generatePkcePair(), generateOAuthState()]);
+            const authorizeUrl = buildOAuthAuthorizeUrl({
+                clientId,
+                redirectUri: oauthRedirectUri,
+                state,
+                codeChallenge: pkce.codeChallenge,
+            });
+
+            if (Platform.OS === 'web') {
+                // Persist the handshake for the RP callback, then hand the
+                // top-level document to the IdP. Without storage the callback
+                // cannot validate `state`, so abort cleanly rather than redirect.
+                if (!persistOAuthHandshake(state, pkce.codeVerifier)) {
+                    return;
+                }
+                redirectToAuthorize(authorizeUrl);
+                return;
+            }
+
+            // Native: open the in-app auth session, then hand the handshake to the
+            // RP so it can complete the token exchange from its deep-link callback.
+            const { redirectUrl } = await openAuthorizeUrlNative(authorizeUrl, oauthRedirectUri);
+            if (onOAuthResult) {
+                onOAuthResult({ redirectUrl, state, codeVerifier: pkce.codeVerifier });
+                return;
+            }
+            logger.warn(
+                'OxySignInButton: native third-party sign-in cannot complete without an `onOAuthResult` handler; the code exchange is the RP\'s responsibility (state + code_verifier were not surfaced)',
+                { component: 'OxySignInButton', application: app.name },
+            );
+        },
+        [clientId, oauthRedirectUri, onOAuthResult, startOfficialSignIn],
+    );
 
-    // Handle button press
-    // - Web: full-screen modal (dialog UX fits desktop / browser)
-    // - Native: bottom sheet (sheet UX fits iOS/Android)
+    // Resolve the Application once, then route: third-party → OAuth redirect;
+    // first-party / official / unresolved → the in-app dialog. Resolution failure
+    // NEVER breaks an official app's sign-in — it falls back to the dialog.
+    const routeSignIn = useCallback(async (): Promise<void> => {
+        if (routingRef.current) return;
+        routingRef.current = true;
+        try {
+            const resolving = resolvePublicApplication();
+            if (!resolving) {
+                startOfficialSignIn();
+                return;
+            }
+            let app: PublicApplication;
+            try {
+                app = await resolving;
+            } catch (error) {
+                logger.warn(
+                    'OxySignInButton: could not resolve the application; opening the sign-in dialog',
+                    { component: 'OxySignInButton', clientId },
+                    error,
+                );
+                startOfficialSignIn();
+                return;
+            }
+            if (app.type === 'third_party' && !app.isOfficial) {
+                await startThirdPartyOAuth(app);
+                return;
+            }
+            startOfficialSignIn();
+        } finally {
+            routingRef.current = false;
+        }
+    }, [resolvePublicApplication, startOfficialSignIn, startThirdPartyOAuth, clientId]);
+
+    // Defer to a caller-supplied handler, otherwise route by application type.
     const handlePress = useCallback(() => {
         if (onPress) {
             onPress();
             return;
         }
-
-        if (Platform.OS === 'web') {
-            setIsModalOpen(true);
-            showSignInModal();
-        } else {
-            showBottomSheet?.('OxyAuth');
-        }
-    }, [onPress, showBottomSheet]);
+        void routeSignIn();
+    }, [onPress, routeSignIn]);
 
     const themedStyles = useMemo(() => StyleSheet.create({
         button: {

package/src/ui/components/ProfileButton.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import {
     View,
     Pressable,
@@ -14,21 +14,11 @@ import { Text } from '@oxyhq/bloom/typography';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
 import { useAuth } from '../hooks/useAuth';
+import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
-import ProfileMenu, { type ProfileMenuAnchor } from './ProfileMenu';
 
 const isWeb = Platform.OS === 'web';
 
-/**
- * Fixed popover width used by {@link ProfileMenu} on web. `ProfileButton`
- * mirrors this constant when computing the trigger-relative anchor so the
- * left-edge clamp keeps the panel fully on-screen. Keep the two in sync.
- */
-const MENU_WIDTH = 300;
-
-/** Gutter, in px, kept between the popover and the viewport edges on web. */
-const VIEWPORT_GUTTER = 8;
-
 /**
  * Web-only Bluesky-style hover animation timings, mirrored from
  * `social-app/src/view/shell/desktop/LeftNav.tsx`. The row background and the
@@ -67,23 +57,15 @@ export interface ProfileButtonProps {
      */
     avatarSize?: number;
     /** Navigate to the "Manage account" surface (settings). */
-    onNavigateManage: () => void;
+    onNavigateManage?: () => void;
     /** Start the add-account / sign-in flow for an additional account. */
-    onAddAccount: () => void;
+    onAddAccount?: () => void;
     /** Optional: navigate to the signed-in user's own profile. */
     onNavigateProfile?: () => void;
-    /** Called before the active identity changes so apps can clear scoped state. */
-    onBeforeSessionChange?: () => void | Promise<void>;
     /**
-     * Web-only popover direction relative to the trigger:
-     *  - `'up'` (default): the menu opens UPWARD, for a trigger placed at the
-     *    BOTTOM of a sidebar (the footer pattern). Pixel-identical to prior
-     *    behavior.
-     *  - `'down'`: the menu opens DOWNWARD, for a trigger placed at the TOP of a
-     *    sidebar (the accounts app pattern).
-     *  - `'auto'`: opens downward when there is more room below the trigger than
-     *    above, otherwise upward.
-     * Native (bottom-sheet) is unaffected — this only influences the web popover.
+     * Retained for source compatibility. The trigger now opens the unified
+     * `OxyAccountDialog` (a centered / bottom-sheet modal) rather than an
+     * anchored popover, so popover placement no longer applies.
      */
     placement?: 'up' | 'down' | 'auto';
     /**
@@ -98,36 +80,27 @@ export interface ProfileButtonProps {
 
 /**
  * Self-contained sidebar account trigger, modeled on Bluesky's ProfileCard and
- * the Oxy inbox's `MailboxDrawer` footer. Owns its own open state + anchor
- * measurement, and renders {@link ProfileMenu} (the device-account switcher).
+ * the Oxy inbox's `MailboxDrawer` footer. Pressing it opens the unified
+ * {@link OxyAccountDialog} — the single account switcher + sign-in surface — via
+ * `useOxy().openAccountDialog`.
  *
  * Three auth states from {@link useAuth}:
  *  - **Undetermined** (`!isAuthResolved || isPrivateApiPending`): a neutral
  *    avatar-sized skeleton circle, no press.
  *  - **Signed in**: a pressable row — Bloom `Avatar` + display name + `@handle`
- *    + an `unfold-more-horizontal` chevron. Press opens the menu upward (web)
- *    against the measured trigger, or as a bottom sheet (native).
- *  - **Signed out**: a "Sign in" row that calls `useAuth().signIn()`.
+ *    + a chevron. Press opens the dialog on its `accounts` view.
+ *  - **Signed out**: a "Sign in" row that calls `useAuth().signIn()` (which opens
+ *    the dialog on its `signin` view).
  *
  * Styling uses react-native `StyleSheet` + the Bloom theme (via `useTheme`) so
  * the layout renders identically in EVERY consumer — including apps that do not
  * use NativeWind (e.g. the accounts app). Only the web hover animation keeps
  * dynamic inline `style` (the CSS transition/transform values), which is what
  * the `react-native-web-style.d.ts` augmentation exists for.
- *
- * All display strings resolve through `@oxyhq/core`'s
- * `getAccountDisplayName` / `getAccountFallbackHandle` — no hand-rolled name
- * fallbacks. Avatars pass the bare file id as `source` + `variant="thumb"`, so
- * the app's registered `ImageResolver` builds the thumbnail URL.
  */
 const ProfileButton: React.FC<ProfileButtonProps> = ({
     expanded = true,
     avatarSize,
-    onNavigateManage,
-    onAddAccount,
-    onNavigateProfile,
-    onBeforeSessionChange,
-    placement = 'up',
     className,
     style,
 }) => {
@@ -138,76 +111,20 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         isPrivateApiPending,
         signIn,
     } = useAuth();
+    const { openAccountDialog } = useOxy();
     const { colors } = useTheme();
     const { t, locale } = useI18n();
 
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [anchor, setAnchor] = useState<ProfileMenuAnchor | null>(null);
-
     // Web-only hover/focus tracking for the Bluesky-style reveal animation.
     // Native has no hover, so these stay false and the row renders statically.
     const [hovered, setHovered] = useState(false);
     const [focused, setFocused] = useState(false);
 
-    // Trigger ref for the web anchor measurement. RN-Web exposes `measure()` on
-    // host views, so we anchor the popover to the button rect and open upward.
-    const triggerRef = useRef<View | null>(null);
-
     const resolvedAvatarSize = avatarSize ?? (expanded ? 40 : 32);
 
-    const openMenu = useCallback(() => {
-        if (!isWeb) {
-            setAnchor(null);
-            setMenuOpen(true);
-            return;
-        }
-        const node = triggerRef.current;
-        if (!node || typeof node.measure !== 'function' || typeof window === 'undefined') {
-            setAnchor(null);
-            setMenuOpen(true);
-            return;
-        }
-        node.measure((_x, _y, _w, height, pageX, pageY) => {
-            if (typeof pageX !== 'number' || typeof pageY !== 'number') {
-                setAnchor(null);
-            } else {
-                // Clamp the panel's left edge inside the viewport gutter.
-                const maxLeft = Math.max(
-                    VIEWPORT_GUTTER,
-                    window.innerWidth - MENU_WIDTH - VIEWPORT_GUTTER,
-                );
-                const left = Math.min(Math.max(VIEWPORT_GUTTER, pageX), maxLeft);
-                // Bottom edge of the trigger in page coordinates. `height` is a
-                // number for host views; guard defensively for non-web shims.
-                const triggerBottom = pageY + (typeof height === 'number' ? height : 0);
-                // Resolve `'auto'` by comparing the room below the trigger with
-                // the room above it; pick whichever direction has more space.
-                const openDown =
-                    placement === 'down' ||
-                    (placement === 'auto' &&
-                        window.innerHeight - triggerBottom > pageY);
-                if (openDown) {
-                    // Anchor the panel's TOP edge just below the trigger bottom so
-                    // the menu opens downward from a top-of-sidebar trigger.
-                    const top = Math.max(VIEWPORT_GUTTER, triggerBottom + VIEWPORT_GUTTER);
-                    setAnchor({ left, top });
-                } else {
-                    // Anchor the panel's BOTTOM edge just above the trigger top so
-                    // the menu opens upward from this footer button.
-                    const bottom = Math.max(
-                        VIEWPORT_GUTTER,
-                        window.innerHeight - pageY + VIEWPORT_GUTTER,
-                    );
-                    setAnchor({ left, bottom });
-                }
-            }
-            setMenuOpen(true);
-        });
-    }, [placement]);
-
-    const handleClose = useCallback(() => {
-        setMenuOpen(false);
-    }, []);
+    const openDialog = useCallback(() => {
+        openAccountDialog('accounts');
+    }, [openAccountDialog]);
 
     // ── Undetermined: skeleton circle, no interaction. ──────────────────────
     if (!isAuthResolved || isPrivateApiPending) {
@@ -285,10 +202,10 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         />
     );
 
-    // `active` combines hover, keyboard focus, and menu-open — exactly like
-    // Bluesky's `state.hovered || state.focused || control.isOpen`. Only web
-    // ever sets `hovered`/`focused`, so on native this reduces to `menuOpen`.
-    const active = hovered || focused || menuOpen;
+    // `active` combines hover and keyboard focus — exactly like Bluesky's
+    // `state.hovered || state.focused`. Only web ever sets these, so on native
+    // the row renders statically.
+    const active = hovered || focused;
     const accountLabel = t('accountSwitcher.switchWhileSignedInAs', { name: displayName })
         || `Switch account, signed in as ${displayName}`;
 
@@ -318,24 +235,14 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         return (
             <View className={className} style={style}>
                 <Pressable
-                    ref={triggerRef}
                     style={[styles.collapsedTrigger, collapsedBgStyle]}
-                    onPress={openMenu}
+                    onPress={openDialog}
                     accessibilityRole="button"
                     accessibilityLabel={accountLabel}
                     {...webInteractionProps}
                 >
                     {avatarNode}
                 </Pressable>
-                <ProfileMenu
-                    open={menuOpen}
-                    onClose={handleClose}
-                    anchor={anchor}
-                    onNavigateManage={onNavigateManage}
-                    onAddAccount={onAddAccount}
-                    onNavigateProfile={onNavigateProfile}
-                    onBeforeSessionChange={onBeforeSessionChange}
-                />
             </View>
         );
     }
@@ -402,9 +309,8 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     return (
         <View className={className} style={[styles.fullWidth, style]}>
             <Pressable
-                ref={triggerRef}
                 style={[styles.row, styles.rowExpanded, rowStyle]}
-                onPress={openMenu}
+                onPress={openDialog}
                 accessibilityRole="button"
                 accessibilityLabel={accountLabel}
                 {...webInteractionProps}
@@ -434,15 +340,6 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                     />
                 </View>
             </Pressable>
-            <ProfileMenu
-                open={menuOpen}
-                onClose={handleClose}
-                anchor={anchor}
-                onNavigateManage={onNavigateManage}
-                onAddAccount={onAddAccount}
-                onNavigateProfile={onNavigateProfile}
-                onBeforeSessionChange={onBeforeSessionChange}
-            />
         </View>
     );
 };