@oxyhq/services 26.0.1 → 26.0.4

package/src/ui/components/OxySignInButton.tsx

@@ -105,7 +105,8 @@ export interface OxySignInButtonProps {
      *   onOAuthResult={({ redirectUrl, state, codeVerifier }) => {
      *     if (!redirectUrl) return;
      *     const code = new URL(redirectUrl).searchParams.get('code');
-     *     // → POST /auth/oauth/token { code, code_verifier: codeVerifier, state }
+     *     // → POST /auth/oauth/token, form-urlencoded:
+     *     //   grant_type=authorization_code&code=…&redirect_uri=…&client_id=…&code_verifier=…
      *   }}
      * />
      * ```

package/src/ui/components/ProfileButton.tsx

@@ -1,23 +1,23 @@
 import type React from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
-    View,
-    Pressable,
     StyleSheet,
     Platform,
     type StyleProp,
     type ViewStyle,
 } from 'react-native';
+import { View, Pressable } from 'react-native-css/components';
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
 import { Avatar } from '@oxyhq/bloom/avatar';
 import * as Skeleton from '@oxyhq/bloom/skeleton';
 import { Text } from '@oxyhq/bloom/typography';
 import { useTheme } from '@oxyhq/bloom/theme';
-import { getAccountDisplayName, getAccountFallbackHandle } from '@oxyhq/core';
+import { getAccountDisplayName, getAccountFallbackHandle, getNormalizedUserHandle } from '@oxyhq/core';
 import { useAuth } from '../hooks/useAuth';
 import { useOxy } from '../context/OxyContext';
 import { useI18n } from '../hooks/useI18n';
 import { registerAccountDialogConsumerHooks } from '../navigation/accountDialogManager';
+import type { AccountDialogMenuItem } from '../navigation/accountDialogManager';
 
 const isWeb = Platform.OS === 'web';
 
@@ -30,7 +30,6 @@ const isWeb = Platform.OS === 'web';
  */
 const BG_TRANSITION_MS = 150;
 const AVATAR_TRANSITION_MS = 250;
-const OPACITY_TRANSITION_MS = 150;
 const LEAVE_DELAY_MS = 50;
 
 /** Shrunk-avatar scale on hover, matching Bluesky's `scale: 2/3`. */
@@ -64,6 +63,8 @@ export interface ProfileButtonProps {
     onAddAccount?: () => void;
     /** Optional: navigate to the signed-in user's own profile. */
     onNavigateProfile?: () => void;
+    /** App-owned actions rendered in the shared account menu. */
+    menuItems?: readonly AccountDialogMenuItem[];
     /**
      * Retained for source compatibility. The trigger now opens the unified
      * `OxyAccountDialogScreen` (a centered / bottom-sheet modal) rather than an
@@ -106,6 +107,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     onNavigateManage,
     onAddAccount,
     onNavigateProfile,
+    menuItems,
     className,
     style,
 }) => {
@@ -139,8 +141,9 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
             onNavigateManage,
             onAddAccount,
             onNavigateProfile,
+            menuItems,
         });
-    }, [onNavigateManage, onAddAccount, onNavigateProfile]);
+    }, [onNavigateManage, onAddAccount, onNavigateProfile, menuItems]);
 
     const avatarUrl = useMemo(
         () => (user?.avatar ? oxyServices.getFileDownloadUrl(user.avatar, 'thumb') : undefined),
@@ -201,7 +204,10 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
     }
 
     // ── Signed in: avatar + identity + chevron. ─────────────────────────────
-    const displayName = getAccountDisplayName(user, locale);
+    const displayName =
+        user?.name?.displayName ??
+        getNormalizedUserHandle(user) ??
+        getAccountDisplayName(null, locale);
     const handle = getAccountFallbackHandle(user);
     const handleLine = handle ? `@${handle}` : null;
 
@@ -298,22 +304,11 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
         }
         : undefined;
 
+    // Expanded mode always shows identity + chevron (console/inbox wide sidebar).
+    // Hover only animates the row background and avatar shrink — not text visibility.
     const identityStyle: ViewStyle | undefined = isWeb
         ? {
             marginLeft: -resolvedAvatarSize / 2,
-            opacity: active ? 1 : 0,
-            transitionProperty: 'opacity',
-            transitionDuration: `${OPACITY_TRANSITION_MS}ms`,
-            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
-        }
-        : undefined;
-
-    const chevronStyle: ViewStyle | undefined = isWeb
-        ? {
-            opacity: active ? 1 : 0,
-            transitionProperty: 'opacity',
-            transitionDuration: `${OPACITY_TRANSITION_MS}ms`,
-            transitionDelay: active ? '0ms' : `${LEAVE_DELAY_MS}ms`,
         }
         : undefined;
 
@@ -343,7 +338,7 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({
                         </Text>
                     ) : null}
                 </View>
-                <View style={chevronStyle}>
+                <View>
                     <MaterialCommunityIcons
                         name="dots-horizontal"
                         size={18}

package/src/ui/components/authChooser/AccountsMenuView.tsx

@@ -99,11 +99,6 @@ const FACEPILE_AVATAR_SIZE = 32;
  */
 const FACEPILE_OVERLAP = 4;
 
-// Vite/RN-Web does not install NativeWind's Metro global className polyfill.
-// Use react-native-css components explicitly so this className markup also
-// works in Vite web hosts.
-const AnimatedCssView = Animated.createAnimatedComponent(View);
-
 /**
  * The hero's address line, shown under the "Hi, <name>!" greeting: the account's
  * canonical `@oxy.so` email when it has one, else its normalized `@handle`. Never
@@ -217,6 +212,7 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
   // compact header it is not represented anywhere else once the hero moved out
   // of the card, and the list is where you switch back to it.
   const switchableAccounts = current ? [current, ...others] : others;
+  const switchableAccountKey = switchableAccounts.map((account) => account.accountId).join(':');
   const facepile: AvatarGroupItem[] = switchableAccounts.map((account) => ({
     id: account.accountId,
     uri: account.avatarUrl ?? undefined,
@@ -386,61 +382,66 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
       {/* SWITCH ACCOUNT — own NativeWind card, NOT a Bloom grouped section: it
           is a disclosure header over an animated list, not a list of settings
           rows, and the grouped section is not a bare card container. */}
-      <AnimatedCssView className="bg-fill overflow-hidden mb-space-16" style={switchCardStyle}>
-        <HoverPressable
-          baseClassName={`flex-row items-center gap-space-12 px-space-12 py-[10px] min-h-[44px]${
-            switchingDisabled ? ' opacity-60' : ''
-          }`}
-          hoverClassName="bg-fill-secondary"
-          onPress={toggleExpanded}
-          disabled={switchingDisabled}
-          accessibilityRole="button"
-          // The ARIA prop, not `accessibilityState`: react-native-web 0.21
-          // forwards only this one, and RN maps it to
-          // `accessibilityState.expanded` natively — so the disclosure state
-          // reaches assistive tech on BOTH platforms.
-          aria-expanded={expanded}
-          accessibilityLabel={switchLabel}
-        >
-          <Text className="flex-1 text-body text-text" numberOfLines={1}>
-            {switchLabel}
-          </Text>
-          {/* The facepile previews who you can switch to; once the list is open
-              it would just restate the rows below it. */}
-          {expanded ? null : (
-            <AvatarGroup
-              items={facepile}
-              layout="stack"
-              size={FACEPILE_AVATAR_SIZE}
-              max={FACEPILE_MAX}
-              overlap={FACEPILE_OVERLAP}
-              variant="thumb"
-              showInitials
-              ringColor={theme.colors.card}
-            />
-          )}
-          <View style={[styles.chevronCircle, { backgroundColor: theme.colors.contrast50 }]}>
-            <Animated.View style={chevronStyle}>
-              <MaterialCommunityIcons name="chevron-down" size={20} color={theme.colors.text} />
-            </Animated.View>
-          </View>
-        </HoverPressable>
+      <View className="mb-space-16">
+        <Animated.View style={[{ overflow: 'hidden' }, switchCardStyle]}>
+          <View className="bg-fill">
+          <HoverPressable
+            baseClassName={`flex-row items-center gap-space-12 px-space-12 py-[10px] min-h-[44px]${
+              switchingDisabled ? ' opacity-60' : ''
+            }`}
+            hoverClassName="bg-fill-secondary"
+            onPress={toggleExpanded}
+            disabled={switchingDisabled}
+            accessibilityRole="button"
+            // The ARIA prop, not `accessibilityState`: react-native-web 0.21
+            // forwards only this one, and RN maps it to
+            // `accessibilityState.expanded` natively — so the disclosure state
+            // reaches assistive tech on BOTH platforms.
+            aria-expanded={expanded}
+            accessibilityLabel={switchLabel}
+          >
+            <Text className="flex-1 text-body text-text" numberOfLines={1}>
+              {switchLabel}
+            </Text>
+            {/* The facepile previews who you can switch to; once the list is open
+                it would just restate the rows below it. */}
+            {expanded ? null : (
+              <AvatarGroup
+                items={facepile}
+                layout="stack"
+                size={FACEPILE_AVATAR_SIZE}
+                max={FACEPILE_MAX}
+                overlap={FACEPILE_OVERLAP}
+                variant="thumb"
+                showInitials
+                ringColor={theme.colors.card}
+              />
+            )}
+            <View style={[styles.chevronCircle, { backgroundColor: theme.colors.contrast50 }]}>
+              <Animated.View style={chevronStyle}>
+                <MaterialCommunityIcons name="chevron-down" size={20} color={theme.colors.text} />
+              </Animated.View>
+            </View>
+          </HoverPressable>
 
-        {/* Animated reveal: an overflow-clipped container whose height + opacity
-            are driven by `listProgress`; the inner style-based wrapper measures
-            the natural content height via `onLayout`. */}
-        <AnimatedCssView
-          style={[styles.collapse, listStyle]}
-          pointerEvents={expanded ? 'auto' : 'none'}
-        >
-          <View
-            style={styles.collapseMeasure}
-            onLayout={(event) => setListContentHeight(event.nativeEvent.layout.height)}
+          {/* Animated reveal: an overflow-clipped container whose height + opacity
+              are driven by `listProgress`; the inner style-based wrapper measures
+              the natural content height via `onLayout`. */}
+          <Animated.View
+            style={[styles.collapse, listStyle]}
+            pointerEvents={expanded ? 'auto' : 'none'}
           >
-            <View>{listItems}</View>
+            <View
+              key={switchableAccountKey}
+              style={styles.collapseMeasure}
+              onLayout={(event) => setListContentHeight(event.nativeEvent.layout.height)}
+            >
+              <View>{listItems}</View>
+            </View>
+          </Animated.View>
           </View>
-        </AnimatedCssView>
-      </AnimatedCssView>
+        </Animated.View>
+      </View>
 
       {/* OXY STORAGE — own NativeWind card for the same reason: a title, a meter
           and two chips are not settings rows. Its cloud sits in the same 20px
@@ -489,6 +490,14 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
           title={t('accountMenu.help')}
           onPress={menu.onHelp}
         />
+        {menu.customItems.map((item) => (
+          <SettingsListItem
+            key={item.key}
+            icon={<MenuIcon name={(item.icon ?? 'dots-horizontal') as keyof typeof MaterialCommunityIcons.glyphMap} theme={theme} />}
+            title={item.label}
+            onPress={item.onPress}
+          />
+        ))}
         <SettingsListItem
           icon={<MenuIcon name="logout" theme={theme} />}
           title={t('accountMenu.signOut')}

package/src/ui/components/authChooser/types.ts

@@ -62,6 +62,12 @@ export interface AccountsMenuActions {
   onPrivacy: () => void;
   onTerms: () => void;
   onSignOut: () => void;
+  customItems: readonly {
+    key: string;
+    label: string;
+    icon?: string;
+    onPress: () => void;
+  }[];
 }
 
 /**

package/src/ui/components/authChooser/useUsernameAvailability.ts

@@ -8,7 +8,7 @@
  */
 
 import { useCallback, useRef, useState } from 'react';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import type { OxyServices } from '@oxyhq/core';
 import type { Translate } from './types';
 

package/src/ui/components/fileManagement/UploadPreview.tsx

@@ -2,7 +2,7 @@ import type React from 'react';
 import { View, Text, TouchableOpacity, ScrollView, StyleSheet } from 'react-native';
 import { Image as ExpoImage } from 'expo-image';
 import Ionicons from '@expo/vector-icons/Ionicons';
-import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
+import { Dialog, type DialogControlProps } from '@oxyhq/bloom/dialog';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { formatFileSize, getFileIcon } from '../../utils/fileManagement';
 import type { PendingUploadFile } from '../../screens/fileManagement/shared';

package/src/ui/components/internal/PinInput.tsx

@@ -64,6 +64,7 @@ const PinInput = forwardRef<PinInputHandle, PinInputProps>(({ value, onChange, l
         <View style={styles.pinContainer}>
             {Array.from({ length }).map((_, idx) => (
                 <TextInput
+                    // biome-ignore lint/suspicious/noArrayIndexKey: fixed-position PIN cells, order never changes
                     key={`pin-input-${idx}`}
                     ref={(ref) => { inputs.current[idx] = ref; }}
                     style={[

package/src/ui/components/logo/LogoText.tsx

@@ -55,13 +55,13 @@ export const LogoText: React.FC<LogoTextProps> = ({
   return (
     <Svg viewBox={`0 0 ${VIEW_BOX_WIDTH} ${VIEW_BOX_HEIGHT}`} width={width} height={height} style={style}>
       <G>
-        {OUTER_PATHS.map((d, i) => (
-          <Path key={`outer-${i}`} d={d} fill={resolvedColor} />
+        {OUTER_PATHS.map((d) => (
+          <Path key={d} d={d} fill={resolvedColor} />
         ))}
       </G>
       <G transform="translate(10.316 2.495)">
-        {INNER_LETTER_PATHS.map((d, i) => (
-          <Path key={`inner-${i}`} d={d} fill={resolvedLetterColor} />
+        {INNER_LETTER_PATHS.map((d) => (
+          <Path key={d} d={d} fill={resolvedLetterColor} />
         ))}
       </G>
     </Svg>

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -6,7 +6,7 @@ import { Button } from '@oxyhq/bloom/button';
 import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import FAIRWalletIcon from '../icon/FAIRWalletIcon';
 import { createPaymentStyles } from './paymentStyles';
-import { toast } from '@oxyhq/bloom';
+import { toast } from '@oxyhq/bloom/toast';
 import type { CardDetails, PaymentColors, PaymentStepAnimations } from './types';
 import { useI18n } from '../../hooks/useI18n';
 

package/src/ui/components/payment/PaymentSummaryStep.tsx

@@ -85,9 +85,9 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
                             <>
                                 <View style={styles.summaryCardItems}>
                                     <SettingsListGroup>
-                                        {paymentItems.map((item, idx) => (
+                                        {paymentItems.map((item) => (
                                             <SettingsListItem
-                                                key={`item-${idx}`}
+                                                key={`${item.type}-${item.name}-${item.price}-${item.period ?? ''}`}
                                                 icon={<Ionicons name={getItemTypeIcon(item.type)} size={20} color={colors.primary} />}
                                                 title={`${item.type === 'product' && item.quantity ? `${item.quantity} \u00d7 ` : ''}${item.name}${item.type === 'subscription' && item.period ? ` (${item.period})` : ''}`}
                                                 description={item.description || `${item.currency ? (CURRENCY_SYMBOLS[item.currency.toUpperCase()] || item.currency) : currencySymbol} ${item.price * (item.quantity ?? 1)}`}

package/src/ui/components/payment/types.ts

@@ -1,41 +1,41 @@
-import type React from 'react';
-import type { Animated } from 'react-native';
-import type Ionicons from '@expo/vector-icons/Ionicons';
-import type { ThemeColors } from '@oxyhq/bloom/theme';
+import type Ionicons from "@expo/vector-icons/Ionicons";
+import type { ThemeColors } from "@oxyhq/bloom/theme";
+import type React from "react";
+import type { Animated } from "react-native";
 
 export type PaymentItem = {
-    type: 'product' | 'subscription' | 'service' | 'fee' | string;
-    name: string;
-    description?: string;
-    quantity?: number;
-    period?: string;
-    price: number;
-    currency?: string;
+	type: "product" | "subscription" | "service" | "fee" | string;
+	name: string;
+	description?: string;
+	quantity?: number;
+	period?: string;
+	price: number;
+	currency?: string;
 };
 
 export interface PaymentGatewayResult {
-    success: boolean;
-    details?: Record<string, string | number | boolean | null>;
-    error?: string;
+	success: boolean;
+	details?: Record<string, string | number | boolean | null>;
+	error?: string;
 }
 
 export interface CardDetails {
-    number: string;
-    expiry: string;
-    cvv: string;
+	number: string;
+	expiry: string;
+	cvv: string;
 }
 
 export interface PaymentMethod {
-    key: string;
-    label: string;
-    icon: React.ComponentProps<typeof Ionicons>['name'];
-    description: string;
+	key: string;
+	label: string;
+	icon: React.ComponentProps<typeof Ionicons>["name"];
+	description: string;
 }
 
 export interface PaymentStepAnimations {
-    fadeAnim: Animated.Value;
-    slideAnim: Animated.Value;
-    scaleAnim: Animated.Value;
+	fadeAnim: Animated.Value;
+	slideAnim: Animated.Value;
+	scaleAnim: Animated.Value;
 }
 
 /**

package/src/ui/components/styles/shadow.tsx

@@ -48,8 +48,8 @@ function v2Shadow(elevation: number | Animated.Value = 0): ViewStyle | ShadowSty
       return {};
     }
 
-    let height;
-    let radius;
+    let height: number;
+    let radius: number;
     switch (elevation) {
       case 1:
         height = 0.5;

package/src/ui/context/OxyContext.tsx

@@ -26,7 +26,6 @@ import {
   startTokenRefreshScheduler,
   createAccountDialogController,
   logger as loggerUtil,
-  syncHubAfterSignIn,
 } from '@oxyhq/core';
 import {
   registerAccountDialogControls,
@@ -71,6 +70,7 @@ import {
   activeUserOf,
   accountIdsOf,
   IdentityBoundSessionError,
+  useBackgroundSessionSync,
   type IdentitySessionBinding,
 } from '../session';
 import type {
@@ -79,7 +79,7 @@ import type {
   CommitInput,
 } from './oxyContextTypes';
 import { DEFAULT_SESSION_VALIDITY_MS, loadUseFollowHook } from './oxyContextHelpers';
-import { commitDeviceSetAndResolve, maybeSyncHubAfterCommit } from './commitSessionFlow';
+import { commitDeviceSetAndResolve } from './commitSessionFlow';
 import { runPasskeyLogin, runPasskeyRegister, runPasskeyAdd } from './passkeyFlow';
 import {
   isPasskeySupported,
@@ -103,8 +103,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   storageKeyPrefix = 'oxy_session',
   clientId: clientIdProp,
   sessionMode = 'account',
-  webAuthMode = 'redirect',
-  hubSync = true,
+  webAuthMode = 'popup',
+  backgroundSession = false,
   onAuthStateChange,
   onError,
 }) => {
@@ -501,6 +501,12 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     logoutStore,
     setAuthState,
     logger,
+    ...(identity
+      ? {
+          identityBinding: identity.binding,
+          refreshPinnedAccountId: () => identity.refreshPinnedAccountId(),
+        }
+      : {}),
   });
 
   // "That wasn't me": repudiating a flagged sign-in IS revoking the device
@@ -580,7 +586,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     };
     handleTokenChange(oxyServices.getAccessToken());
     return oxyServices.onTokensChanged(handleTokenChange);
-  }, [logger, oxyServices]);
+  }, [logger, oxyServices, sessionClient]);
 
   // Unified in-session refresh (SDK-owned; every RP inherits it). Installs the
   // ONE core refresh handler (re-mint from the persisted zero-cookie device
@@ -610,10 +616,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   // Used by the QR device flow (`handleWebSession`), password sign-in, 2FA
   // completion, and the cold boot.
   const commitSession = useCallback(
-    async (
-      input: CommitInput,
-      options: { activate: boolean; hubSync?: boolean },
-    ): Promise<void> => {
+    async (input: CommitInput, options: { activate: boolean }): Promise<void> => {
       if (input.accessToken) {
         oxyServices.setTokens(input.accessToken);
       }
@@ -681,21 +684,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         onAuthStateChange: onAuthStateChangeRef.current,
         markAuthResolved: markAuthResolvedRef.current,
       });
-
-      // Post-sign-in hub sync — a full-page redirect to auth.oxy.so. Gated HERE,
-      // inside the ONE commit funnel, so NO commit path (QR device flow,
-      // password/2FA through the account dialog, passkey, popup OAuth, cold
-      // boot) can bounce a `webAuthMode: 'popup'` tab to the IdP. See
-      // `maybeSyncHubAfterCommit` for the full gate list.
-      await maybeSyncHubAfterCommit({
-        activate: options.activate,
-        hubSyncRequested: options.hubSync === true,
-        hubSyncEnabled: hubSync,
-        webAuthMode,
-        syncHub: () => syncHubAfterSignIn(oxyServices, { enabled: hubSync }),
-      });
     },
-    [oxyServices, authStore, updateSessions, setActiveSessionId, sessionClient, sessionClientHost, syncFromClient, loginSuccess, logger, hubSync, webAuthMode],
+    [oxyServices, authStore, updateSessions, setActiveSessionId, sessionClient, sessionClientHost, syncFromClient, loginSuccess, logger],
   );
   const commitSessionRef = useRef(commitSession);
   commitSessionRef.current = commitSession;
@@ -717,16 +707,16 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
           userId: session.user.id,
           user: session.user,
         },
-        { activate: true, hubSync: true },
+        { activate: true },
       );
     },
     [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.
+  // Commit a minted graph-SWITCH session through the same funnel as
+  // `handleWebSession`. Nothing extra to do IN-PLACE: 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) {
@@ -742,7 +732,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
           userId: session.user.id,
           user: session.user,
         },
-        { activate: true, hubSync: false },
+        { activate: true },
       );
     },
     [commitSession],
@@ -753,11 +743,6 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   // to, so no consumer ever writes popup listeners or a token exchange. The
   // transport picks popup vs redirect from `webAuthMode`; both lanes land on the
   // SAME completion path (`completeOAuthCode`) and the same commit funnel here.
-  //
-  // `hubSync: false` is deliberate: hub sync is a full-page redirect to
-  // auth.oxy.so, which would undo the one thing popup mode exists to guarantee —
-  // that the relying party never leaves its route. It matches how the redirect
-  // lane's return leg commits (see `runProviderColdBoot`).
   const startWebOAuthSignInForContext = useCallback(
     (options: StartWebOAuthSignInOptions): Promise<WebOAuthSignInResult> =>
       startWebOAuthSignIn(
@@ -767,8 +752,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
           clientId,
           authorizeBaseUrl,
           identityBound: isIdentityBound,
-          commitSession: (input) =>
-            commitSessionRef.current(input, { activate: true, hubSync: false }),
+          commitSession: (input) => commitSessionRef.current(input, { activate: true }),
         },
         options,
       ),
@@ -967,7 +951,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         getLoginOptions: (username) => oxyServices.webauthnLoginOptions(username),
         runCeremony: runAuthenticationCeremony,
         loginVerify: (response, envelope) => oxyServices.webauthnLoginVerify(response, envelope),
-        commit: (input) => commitSession(input, { activate: true, hubSync: true }),
+        commit: (input) => commitSession(input, { activate: true }),
         username: opts?.username,
         deviceId: persisted?.deviceId,
         deviceName: opts?.deviceName,
@@ -985,7 +969,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         getRegisterOptions: (username) => oxyServices.webauthnRegisterOptions(username),
         runCeremony: runRegistrationCeremony,
         registerVerify: (response, envelope) => oxyServices.webauthnRegisterVerify(response, envelope),
-        commit: (input) => commitSession(input, { activate: true, hubSync: true }),
+        commit: (input) => commitSession(input, { activate: true }),
         username: params.username,
         deviceName: params.deviceName,
       });
@@ -1037,13 +1021,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
       authStore,
       clientId: clientIdProp,
       authRedirectUri,
-      authorizeBaseUrl,
       sessionMode,
       identity: identity?.binding,
-      // Popup mode forbids the boot's automatic full-page `prompt=none` restore:
-      // a domain with no local credential resolves signed out instead of
-      // navigating the tab to the IdP (see `allowsAutomaticIdpRedirect`).
-      webAuthMode,
       sessionClient,
       syncDeviceCredentialToHost,
       commitSession: (input, options) => commitSessionRef.current(input, options),
@@ -1061,10 +1040,8 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     authStore,
     clientIdProp,
     authRedirectUri,
-    authorizeBaseUrl,
     sessionMode,
     identity,
-    webAuthMode,
     syncDeviceCredentialToHost,
     sessionClient,
   ]);
@@ -1220,6 +1197,18 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   const canUsePrivateApi = authResolved && isAuthenticated && tokenReady && hasAccessToken;
   const isPrivateApiPending = !authResolved || (isAuthenticated && (!tokenReady || !hasAccessToken));
 
+  // Keep the native background credential in step with this session, so native
+  // background code (a widget worker) can authenticate with no JS runtime. Inert
+  // unless the app opted in. Placed AFTER `canUsePrivateApi` because provisioning
+  // needs a bearer, and keyed on the signed-in account so a sign-out or an
+  // account switch revokes the credential before anything else happens.
+  useBackgroundSessionSync({
+    enabled: backgroundSession,
+    oxyServices,
+    userId: user?.id ?? null,
+    canUsePrivateApi,
+  });
+
   const contextValue: OxyContextState = useMemo(
     () => ({
       user,
@@ -1366,7 +1355,7 @@ const LOADING_STATE: OxyContextState = {
   isAuthResolved: false,
   isStorageReady: false,
   sessionMode: 'account',
-  webAuthMode: 'redirect',
+  webAuthMode: 'popup',
   error: null,
   currentLanguage: 'en-US',
   currentLanguages: [],