@oxyhq/services 14.0.1 → 15.0.0

package/src/ui/screens/OxyAuthScreen.tsx

@@ -1,22 +1,24 @@
 /**
- * OxyAuthScreen - Sign in with Oxy (native bottom-sheet container)
+ * OxyAuthScreen — Sign in with Oxy (native bottom-sheet container).
  *
- * Used by OTHER apps in the Oxy ecosystem to authenticate users. The primary
- * action is the one-tap "Continue with Oxy" approval flow (opens the Oxy Auth
- * web flow with a deep-link `redirect_uri` so the app→app return path can
- * complete the sign-in). The QR code is demoted to a collapsed "Sign in on
- * another device" disclosure — you can't scan your own screen.
+ * Two phases, Google-style:
+ *  1. Account chooser (FRONT screen, shown when the device/user already has
+ *     accounts): pick an account to continue as — one tap switches through the
+ *     SAME `switchToAccount` path the account switcher uses — or "Use another
+ *     account" to reveal the sign-in options.
+ *  2. Sign-in options: the first-party password flow (identifier → password →
+ *     optional 2FA, `usePasswordSignIn`) as the PRIMARY action, with the
+ *     cross-app device flow (same-device deep-link + "sign in on another device"
+ *     QR) as a SECONDARY option below an "or" divider.
  *
- * ALL of the auth-session machinery (session-token creation, QR data, socket +
- * polling, the native deep-link return path, waiting/error/retry state, the
- * open-auth handler, and cleanup) lives in the shared `useOxyAuthSession` hook,
- * which the web `SignInModal` also consumes — neither container re-implements
- * the transport. The Oxy Accounts app is where users manage their cryptographic
- * identity; this screen should NOT be used within the Accounts app itself.
+ * The device-flow machinery lives in the shared `useOxyAuthSession` hook (the
+ * web `SignInModal` consumes it too). This screen should NOT be used within the
+ * Oxy Accounts app itself.
  */
 
 import type React from 'react';
-import { View, Linking } from 'react-native';
+import { useCallback, useState } from 'react';
+import { View, TextInput, Linking, type TextStyle } from 'react-native';
 import type { BaseScreenProps } from '../types/navigation';
 import { useTheme } from '@oxyhq/bloom/theme';
 import { Button } from '@oxyhq/bloom/button';
@@ -24,129 +26,274 @@ import { Loading } from '@oxyhq/bloom/loading';
 import { H4, Text } from '@oxyhq/bloom/typography';
 import { IconCircle } from '@oxyhq/bloom/icon-circle';
 import * as Icons from '@oxyhq/bloom/icons';
+import { toast } from '@oxyhq/bloom';
+import { isDev, logger as loggerUtil } from '@oxyhq/core';
 import { useOxy } from '../context/OxyContext';
 import OxyLogo from '../components/OxyLogo';
 import AnotherDeviceQR from '../components/AnotherDeviceQR';
 import LoadingState from '../components/LoadingState';
+import SignInAccountChooser from '../components/SignInAccountChooser';
+import { useSwitchableAccounts, type SwitchableAccount } from '../hooks/useSwitchableAccounts';
+import { useI18n } from '../hooks/useI18n';
 import { useOxyAuthSession, OXY_ACCOUNTS_WEB_URL } from '../hooks/useOxyAuthSession';
-import { isCrossApexWeb } from '../../utils/crossApex';
+import { usePasswordSignIn } from '../hooks/usePasswordSignIn';
 
 const OxyAuthScreen: React.FC<BaseScreenProps> = ({ goBack, onAuthenticated }) => {
   const bloomTheme = useTheme();
-  const { oxyServices, handleWebSession, clientId } = useOxy();
+  const { oxyServices, handleWebSession, clientId, switchToAccount } = useOxy();
+  const { t } = useI18n();
+  const { accounts } = useSwitchableAccounts();
 
-  const { qrData, qrPayload, isLoading, error, isWaiting, openAuthApproval, openSameDeviceApproval, retry } = useOxyAuthSession(
+  const [useAnother, setUseAnother] = useState(false);
+  const [switchingId, setSwitchingId] = useState<string | null>(null);
+  const showChooser = !useAnother && accounts.length > 0;
+
+  const { qrData, qrPayload, isLoading, error, isWaiting, openSameDeviceApproval, retry } = useOxyAuthSession(
     oxyServices,
     clientId,
     handleWebSession,
     { onSignedIn: onAuthenticated },
   );
 
-  // On a cross-apex web RP, only the "Continue with Oxy" IdP popup establishes a
-  // durable `fedcm_session`. The Commons-app handoffs (same-device deep-link +
-  // cross-device QR) approve OUTSIDE the browser, so they leave no IdP session
-  // and the user would be logged out on reload — hide them there. Off-browser
-  // (native) this is always `false`, so the bottom sheet is unchanged.
-  const crossApexWeb = isCrossApexWeb();
-
-  if (isLoading) {
-    return (
-      <View className="flex-1 items-center justify-center bg-bg">
-        <LoadingState
-          size="large"
-          color={bloomTheme.colors.primary}
-          message="Preparing sign in..."
-        />
-      </View>
-    );
-  }
-
-  if (error) {
-    return (
-      <View className="flex-1 items-center justify-center bg-bg px-screen-margin gap-space-16">
-        <IconCircle icon={Icons.Warning_Stroke2_Corner0_Rounded} />
-        <Text className="font-sans text-body text-text-secondary text-center">{error}</Text>
-        <Button
-          variant="primary"
-          fullWidth
-          className="w-full"
-          onPress={retry}
-          icon={
-            <Icons.ArrowRotateClockwise_Stroke2_Corner0_Rounded
-              size="sm"
-              style={{ color: bloomTheme.colors.primaryForeground }}
-            />
-          }
-        >
-          Try Again
-        </Button>
-      </View>
-    );
-  }
+  const pw = usePasswordSignIn({ onSignedIn: onAuthenticated });
+
+  const handleSelectAccount = useCallback(async (account: SwitchableAccount) => {
+    if (account.isCurrent) {
+      onAuthenticated?.();
+      return;
+    }
+    if (switchingId) return;
+    setSwitchingId(account.accountId);
+    try {
+      await switchToAccount(account.accountId);
+      onAuthenticated?.();
+    } catch (switchError) {
+      if (isDev()) {
+        loggerUtil.warn('OxyAuthScreen: switch account failed', { component: 'OxyAuthScreen' }, switchError as unknown);
+      }
+      toast.error(t('accountSwitcher.toasts.switchFailed') || 'Failed to switch account');
+    } finally {
+      setSwitchingId(null);
+    }
+  }, [switchingId, switchToAccount, onAuthenticated, t]);
+
+  const inputStyle: TextStyle = {
+    width: '100%',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 13,
+    fontSize: 15,
+    marginBottom: 12,
+    borderColor: bloomTheme.colors.border,
+    color: bloomTheme.colors.text,
+    backgroundColor: bloomTheme.colors.backgroundSecondary,
+  };
+
+  const title = showChooser ? t('signin.chooser.title') : 'Sign in to Oxy';
+  const subtitle = showChooser
+    ? t('signin.chooser.subtitle')
+    : 'Continue with your Oxy identity to sign in securely';
 
   return (
     <View className="flex-1 items-center justify-center bg-bg px-screen-margin">
       {/* Branded header */}
       <View className="items-center mb-space-24 gap-space-12">
-        <OxyLogo variant="icon" size={56} />
-        <H4 className="text-headerBold font-headerBold text-text text-center">
-          Sign in to Oxy
-        </H4>
-        <Text className="font-sans text-body text-text-secondary text-center">
-          Continue with your Oxy identity to sign in securely
-        </Text>
+        <OxyLogo variant="icon" size={52} />
+        <H4 className="text-headerBold font-headerBold text-text text-center">{title}</H4>
+        <Text className="font-sans text-body text-text-secondary text-center">{subtitle}</Text>
       </View>
 
-      {/* Primary action — Continue with Oxy */}
-      <Button
-        variant="primary"
-        size="large"
-        fullWidth
-        className="w-full"
-        onPress={openAuthApproval}
-        icon={
-          <OxyLogo variant="icon" size={20} fillColor={bloomTheme.colors.primaryForeground} />
-        }
-      >
-        Continue with Oxy
-      </Button>
-
-      {/* Same-device "Sign in with Oxy" handoff — deep-links into the native Oxy
-          app to approve. Shown only when the handoff backend returned a payload,
-          and never on a cross-apex web RP (approval happens outside the browser
-          → no durable session). */}
-      {!crossApexWeb && qrPayload && (
-        <Button
-          variant="secondary"
-          size="large"
-          fullWidth
-          className="w-full mt-space-12"
-          onPress={openSameDeviceApproval}
-          icon={
-            <OxyLogo variant="icon" size={20} fillColor={bloomTheme.colors.text} />
-          }
-        >
-          Sign in with the Oxy app
-        </Button>
-      )}
+      {showChooser ? (
+        <SignInAccountChooser
+          accounts={accounts}
+          onSelectAccount={handleSelectAccount}
+          onUseAnother={() => setUseAnother(true)}
+          pendingAccountId={switchingId}
+          disabled={switchingId !== null}
+        />
+      ) : (
+        <>
+          {/* Back to the chooser when accounts exist. */}
+          {accounts.length > 0 && (
+            <Button
+              variant="text"
+              size="small"
+              className="self-start mb-space-8"
+              onPress={() => setUseAnother(false)}
+              accessibilityLabel="Choose an account"
+              icon={<Icons.ArrowLeft_Stroke2_Corner0_Rounded size="sm" style={{ color: bloomTheme.colors.textSecondary }} />}
+            >
+              Choose an account
+            </Button>
+          )}
 
-      {/* Waiting status */}
-      {isWaiting && (
-        <View className="flex-row items-center mt-space-16 gap-space-8">
-          <Loading size="small" />
-          <Text className="font-sans text-body text-text-secondary">
-            Waiting for authorization...
-          </Text>
-        </View>
-      )}
+          {/* PRIMARY — first-party password sign-in. Always usable; the device-flow
+              loading/error state below never gates it. */}
+          <View className="w-full">
+            {pw.step === 'identifier' && (
+              <TextInput
+                style={inputStyle}
+                value={pw.identifier}
+                onChangeText={pw.setIdentifier}
+                onSubmitEditing={pw.submitIdentifier}
+                placeholder="Username or email"
+                placeholderTextColor={bloomTheme.colors.textSecondary}
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType="email-address"
+                returnKeyType="next"
+                accessibilityLabel="Username or email"
+              />
+            )}
+
+            {pw.step === 'password' && (
+              <>
+                <Text className="font-sans text-body text-text-secondary text-center mb-space-12">
+                  {pw.identifier}
+                </Text>
+                <TextInput
+                  style={inputStyle}
+                  value={pw.password}
+                  onChangeText={pw.setPassword}
+                  onSubmitEditing={pw.submitPassword}
+                  placeholder="Password"
+                  placeholderTextColor={bloomTheme.colors.textSecondary}
+                  secureTextEntry
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  returnKeyType="go"
+                  accessibilityLabel="Password"
+                />
+              </>
+            )}
+
+            {pw.step === 'twoFactor' && (
+              <TextInput
+                style={inputStyle}
+                value={pw.code}
+                onChangeText={pw.setCode}
+                onSubmitEditing={pw.submitTwoFactor}
+                placeholder={pw.useBackupCode ? 'Backup code' : '6-digit code'}
+                placeholderTextColor={bloomTheme.colors.textSecondary}
+                autoCapitalize="none"
+                autoCorrect={false}
+                keyboardType={pw.useBackupCode ? 'default' : 'number-pad'}
+                returnKeyType="go"
+                accessibilityLabel={pw.useBackupCode ? 'Backup code' : 'Two-factor code'}
+              />
+            )}
+
+            <Button
+              variant="primary"
+              size="large"
+              fullWidth
+              className="w-full"
+              onPress={
+                pw.step === 'identifier' ? pw.submitIdentifier
+                  : pw.step === 'password' ? pw.submitPassword
+                    : pw.submitTwoFactor
+              }
+              loading={pw.isSubmitting}
+              disabled={pw.isSubmitting}
+            >
+              {pw.step === 'identifier' ? 'Continue' : pw.step === 'password' ? 'Sign in' : 'Verify'}
+            </Button>
+
+            {pw.error && (
+              <Text className="font-sans text-body text-destructive text-center mt-space-12">
+                {pw.error}
+              </Text>
+            )}
+
+            {pw.step === 'twoFactor' && (
+              <Button
+                variant="text"
+                size="small"
+                className="mt-space-8"
+                onPress={() => pw.setUseBackupCode(!pw.useBackupCode)}
+              >
+                {pw.useBackupCode ? 'Use authenticator code' : 'Use a backup code'}
+              </Button>
+            )}
+
+            {pw.step !== 'identifier' && (
+              <Button
+                variant="text"
+                size="small"
+                className="mt-space-8"
+                onPress={pw.back}
+                accessibilityLabel="Back"
+              >
+                Back
+              </Button>
+            )}
+          </View>
+
+          {/* "or" divider — separates the password form from the SECONDARY device flow. */}
+          <View className="flex-row items-center w-full my-space-16 gap-space-8">
+            <View className="flex-1" style={{ height: 1, backgroundColor: bloomTheme.colors.border }} />
+            <Text className="font-sans text-caption text-text-tertiary">or</Text>
+            <View className="flex-1" style={{ height: 1, backgroundColor: bloomTheme.colors.border }} />
+          </View>
+
+          {/* SECONDARY — cross-app device flow. Its loading/error state gates ONLY
+              this section; the password form above is always usable. */}
+          {isLoading ? (
+            <LoadingState
+              size="small"
+              color={bloomTheme.colors.primary}
+              message="Preparing sign in…"
+            />
+          ) : error ? (
+            <View className="items-center gap-space-16 w-full">
+              <IconCircle icon={Icons.Warning_Stroke2_Corner0_Rounded} />
+              <Text className="font-sans text-body text-text-secondary text-center">{error}</Text>
+              <Button
+                variant="secondary"
+                fullWidth
+                className="w-full"
+                onPress={retry}
+                icon={
+                  <Icons.ArrowRotateClockwise_Stroke2_Corner0_Rounded
+                    size="sm"
+                    style={{ color: bloomTheme.colors.text }}
+                  />
+                }
+              >
+                Try Again
+              </Button>
+            </View>
+          ) : (
+            <>
+              {qrPayload && (
+                <Button
+                  variant="secondary"
+                  size="large"
+                  fullWidth
+                  className="w-full"
+                  onPress={openSameDeviceApproval}
+                  icon={<OxyLogo variant="icon" size={20} fillColor={bloomTheme.colors.text} />}
+                >
+                  Sign in with the Oxy app
+                </Button>
+              )}
+
+              {isWaiting && (
+                <View className="flex-row items-center mt-space-16 gap-space-8">
+                  <Loading size="small" />
+                  <Text className="font-sans text-body text-text-secondary">
+                    Waiting for authorization…
+                  </Text>
+                </View>
+              )}
 
-      {/* Collapsed "sign in on another device" QR disclosure. Hidden on a
-          cross-apex web RP: a remote Commons-app approval completes via the
-          device-flow claim, which plants no `fedcm_session`. */}
-      {!crossApexWeb && (
-        <View className="w-full mt-space-24">
-          <AnotherDeviceQR qrData={qrData} qrPayload={qrPayload} />
-        </View>
+              <View className="w-full mt-space-24">
+                <AnotherDeviceQR qrData={qrData} qrPayload={qrPayload} />
+              </View>
+            </>
+          )}
+        </>
       )}
 
       {/* Footer — create an account */}

package/src/ui/screens/ProfileScreen.tsx

@@ -178,6 +178,19 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
 
     const displayName = profile ? getAccountDisplayName(profile, locale) : username || '';
 
+    // The singular `location` field was removed from the User contract; derive
+    // the primary place from the `locations` list instead. `locations` is only
+    // reachable through the User index signature (typed `unknown`), so narrow it
+    // defensively before rendering the chip.
+    const primaryLocation = ((): string | undefined => {
+        const locations = profile?.locations;
+        const first: unknown = Array.isArray(locations) ? locations[0] : undefined;
+        if (first && typeof first === 'object' && 'name' in first && typeof first.name === 'string') {
+            return first.name || undefined;
+        }
+        return undefined;
+    })();
+
     return (
         <View style={styles.container} className="bg-bg">
             <ScrollView style={styles.flex} contentContainerStyle={styles.scrollContainer}>
@@ -238,10 +251,10 @@ const ProfileScreen: React.FC<ProfileScreenProps> = ({ userId, username, theme,
                             showChevron={false}
                         />
                     )}
-                    {profile?.location && (
+                    {primaryLocation && (
                         <SettingsListItem
                             icon={<Ionicons name="location-outline" size={INFO_ICON_SIZE} color={bloomTheme.colors.textSecondary} />}
-                            title={profile.location}
+                            title={primaryLocation}
                             showChevron={false}
                         />
                     )}

package/src/ui/screens/__tests__/linkFormat.test.ts

@@ -0,0 +1,73 @@
+import {
+    getLinkTitle,
+    getLinkDescription,
+    linksToListItems,
+} from '../linkFormat';
+
+describe('linkFormat', () => {
+    describe('getLinkTitle', () => {
+        it.each([
+            ['https://example.com', 'example.com'],
+            ['http://example.com/', 'example.com'],
+            ['https://example.com/path/', 'example.com/path'],
+            ['example.com', 'example.com'],
+        ])('strips protocol and trailing slash: %p → %p', (input, expected) => {
+            expect(getLinkTitle(input)).toBe(expected);
+        });
+    });
+
+    describe('getLinkDescription', () => {
+        it('prefixes the url with "Link to "', () => {
+            expect(getLinkDescription('https://example.com')).toBe('Link to https://example.com');
+        });
+    });
+
+    describe('linksToListItems', () => {
+        it('maps a normal string array, preserving valid-link rendering', () => {
+            const result = linksToListItems(['https://example.com/', 'http://oxy.so']);
+            expect(result).toEqual([
+                {
+                    id: 'link-0',
+                    url: 'https://example.com/',
+                    title: 'example.com',
+                    description: 'Link to https://example.com/',
+                },
+                {
+                    id: 'link-1',
+                    url: 'http://oxy.so',
+                    title: 'oxy.so',
+                    description: 'Link to http://oxy.so',
+                },
+            ]);
+        });
+
+        it.each([
+            [null, 'null'],
+            [undefined, 'undefined'],
+            [42, 'a number'],
+            [{ href: 'x' }, 'an object'],
+            [['nested'], 'an array'],
+        ])('does not throw on a non-string element (%s)', (bad) => {
+            // Regression: `links.map(getLinkTitle)` called `.replace` on a
+            // non-string element and crashed the editor. The coercion guard must
+            // yield a string url/title/description instead.
+            const run = () => linksToListItems([bad]);
+            expect(run).not.toThrow();
+            const [item] = run();
+            expect(typeof item.url).toBe('string');
+            expect(typeof item.title).toBe('string');
+            expect(typeof item.description).toBe('string');
+        });
+
+        it('coerces null / undefined to an empty-string url', () => {
+            const result = linksToListItems([null, undefined]);
+            expect(result[0].url).toBe('');
+            expect(result[0].title).toBe('');
+            expect(result[1].url).toBe('');
+        });
+
+        it('returns an empty array for an empty input', () => {
+            expect(linksToListItems([])).toEqual([]);
+        });
+    });
+});

package/src/ui/screens/linkFormat.ts

@@ -0,0 +1,37 @@
+/**
+ * Pure link-display helpers for the profile "links" editor. Kept out of the
+ * screen component so the string-coercion guard can be unit-tested without
+ * rendering the whole React Native screen.
+ */
+
+/** Strip the protocol and any trailing slash from a link URL for display. */
+export const getLinkTitle = (url: string): string =>
+    url.replace(/^https?:\/\//, '').replace(/\/$/, '');
+
+/** Human-readable description for a link URL. */
+export const getLinkDescription = (url: string): string => `Link to ${url}`;
+
+export interface LinkListItem {
+    id: string;
+    url: string;
+    title: string;
+    description: string;
+}
+
+/**
+ * Build editable list items from a raw links array. The array can come from
+ * legacy or untrusted profile data whose elements are not guaranteed to be
+ * strings, so each entry is coerced with `String(item ?? '')` before formatting
+ * — a non-string element must never crash the editor.
+ */
+export function linksToListItems(links: readonly unknown[]): LinkListItem[] {
+    return links.map((item, i) => {
+        const url = String(item ?? '');
+        return {
+            id: `link-${i}`,
+            url,
+            title: getLinkTitle(url),
+            description: getLinkDescription(url),
+        };
+    });
+}

package/src/ui/session/__tests__/createSessionClient.test.ts

@@ -1,4 +1,19 @@
-import { SessionClient } from '@oxyhq/core';
+import { SessionClient, createMemoryAuthStateStore } from '@oxyhq/core';
+
+type Handler = (...args: unknown[]) => void;
+class FakeSocket {
+  connected = false;
+  on(_event: string, _cb: Handler) {}
+  off(_event: string, _cb?: Handler) {}
+  connect() { this.connected = true; }
+  disconnect() { this.connected = false; }
+}
+const ioMock = jest.fn((_uri: string, _opts?: Record<string, unknown>) => new FakeSocket());
+// `createSessionClient` STATICALLY imports `io` from socket.io-client and injects it as
+// the SessionClient `socketFactory`; this mock stands in for that real dependency so the
+// wiring test can assert the factory reaches — and is invoked by — the client.
+jest.mock('socket.io-client', () => ({ __esModule: true, io: (...args: unknown[]) => ioMock(...(args as [string, Record<string, unknown>?])) }));
+
 import { createSessionClient } from '../createSessionClient';
 
 function fakeOxy() {
@@ -12,16 +27,14 @@ function fakeOxy() {
       listeners.add(l);
       return () => listeners.delete(l);
     }),
-    silentSignIn: jest.fn().mockResolvedValue(null),
-    signInWithSharedIdentity: jest.fn().mockResolvedValue(null),
   };
 }
 
 describe('createSessionClient', () => {
-  test('wires a SessionClient instance backed by the host + token transport', () => {
+  test('wires a SessionClient instance backed by the host + device-first token transport', () => {
     const oxy = fakeOxy();
 
-    const { client, host } = createSessionClient(oxy as never);
+    const { client, host } = createSessionClient(oxy as never, createMemoryAuthStateStore());
 
     expect(client).toBeInstanceOf(SessionClient);
     expect(typeof client.bootstrap).toBe('function');
@@ -32,10 +45,40 @@ describe('createSessionClient', () => {
   test('the returned host reflects setCurrentAccountId', () => {
     const oxy = fakeOxy();
 
-    const { host } = createSessionClient(oxy as never);
+    const { host } = createSessionClient(oxy as never, createMemoryAuthStateStore());
 
     expect(host.getCurrentAccountId()).toBeNull();
     host.setCurrentAccountId('u1');
     expect(host.getCurrentAccountId()).toBe('u1');
   });
+
+  test('injects the statically-imported socket.io factory — start() opens a socket without the lazy loader', async () => {
+    ioMock.mockClear();
+    const oxy = fakeOxy();
+
+    const { client } = createSessionClient(oxy as never, createMemoryAuthStateStore());
+    await client.start();
+
+    // The injected `io` was used to open the session socket at the base URL.
+    expect(ioMock).toHaveBeenCalledTimes(1);
+    expect(ioMock).toHaveBeenCalledWith('https://api.oxy.so', expect.objectContaining({ transports: ['websocket'] }));
+    client.stop();
+  });
+
+  test('passes onUnauthenticated through to the SessionClient', async () => {
+    ioMock.mockClear();
+    const oxy = fakeOxy();
+    const onUnauthenticated = jest.fn();
+
+    const { client } = createSessionClient(oxy as never, createMemoryAuthStateStore(), onUnauthenticated);
+
+    // The client was constructed with the callback (no direct getter is exposed;
+    // constructing without throwing + wiring the socket factory is the contract
+    // this factory owns — the callback firing on a zero-account applied state is
+    // covered by @oxyhq/core's SessionClient tests).
+    expect(client).toBeInstanceOf(SessionClient);
+    await client.start();
+    expect(ioMock).toHaveBeenCalledTimes(1);
+    client.stop();
+  });
 });