@oxy.so/services 6.1.0 → 6.2.0

package/src/ui/components/signIn/OxyAuthScreen.tsx

@@ -66,20 +66,29 @@ export const OxyAuthScreen: React.FC<{ children: React.ReactNode; className?: st
   <View className={`w-full max-w-[448px] self-center gap-6 ${className ?? ''}`}>{children}</View>
 );
 
-/** The split card: `children` on the left and, from `md`, `aside` on the right. */
-export const OxyAuthSplit: React.FC<{ children: React.ReactNode; aside: React.ReactNode }> = ({ children, aside }) => {
+/**
+ * The split card: `children` on the left and, from `md`, `aside` on the right.
+ * `bare` inside a surface that already is the card (the account dialog): no
+ * border of its own, and the right column is a rounded tile within the
+ * dialog's margins.
+ */
+export const OxyAuthSplit: React.FC<{ children: React.ReactNode; aside: React.ReactNode; bare?: boolean }> = ({
+  children,
+  aside,
+  bare = false,
+}) => {
   const theme = useTheme();
   return (
     <View
-      className="w-full self-center md:max-w-[880px] md:flex-row md:rounded-3xl md:border md:border-border md:bg-card md:overflow-hidden"
+      className={`w-full self-center md:max-w-[880px] md:flex-row ${bare ? 'md:gap-8' : 'md:rounded-3xl md:border md:border-border md:bg-card md:overflow-hidden'}`}
     >
       {/* Padding on an inner box: a padded flex item cannot shrink its base
           size below its padding, which breaks the two equal tracks. */}
       <View className="md:flex-1 md:basis-0 md:min-w-0">
-        <View className="md:p-8">{children}</View>
+        <View className={bare ? '' : 'md:p-8'}>{children}</View>
       </View>
       <View
-        className="hidden md:flex md:flex-1 md:basis-0 md:min-w-0 items-center justify-center overflow-hidden p-8"
+        className={`hidden md:flex md:flex-1 md:basis-0 md:min-w-0 items-center justify-center overflow-hidden p-8 ${bare ? 'rounded-[20px]' : ''}`}
         style={{ backgroundColor: theme.colors.backgroundSecondary }}
       >
         {aside}

package/src/ui/components/signIn/OxySignInPanel.tsx

@@ -4,18 +4,18 @@
  * differs (`host`).
  *
  *   picker   a returning device: "Choose an account", then "Use another account"
- *   entry    the header, the Commons way in, and the way in for someone with no
- *            account. On auth.oxy.so (`page`) also the username with its
- *            Continue — a username-first passkey sign-in, which takes a
- *            platform passkey AND a hardware security key with no resident
- *            credential (a U2F key such as a Titan) — and "or continue with" the
- *            discoverable passkey. From `md` that page is Bloom `AuthCard`'s
- *            split card, with the embedded QR over its photo carousel in the
- *            right column; below `md` it is "Continue with Oxy" at the top.
- *            In an app's dialog on the web, "Continue with Oxy" opens that page
- *            in a window over the app, like "Sign in with Google": the browser's
- *            session lives on auth.oxy.so, so every Oxy app shares it. On
- *            native it is "Continue with Oxy" ("Get Commons" without Commons).
+ *   entry    the header, the Commons way in, the passkey, and the way in for
+ *            someone with no account. On the web, from `md`, the screen is
+ *            Bloom `AuthCard`'s split card and the Commons way in is the
+ *            embedded QR over its photo carousel, in the right column (the
+ *            account dialog grows to that card); below `md` it is "Continue
+ *            with Oxy" at the top. The passkey belongs to `oxy.so`: on
+ *            auth.oxy.so (`page`) it runs here — the username with its Continue,
+ *            a username-first ceremony that takes a hardware security key with
+ *            no resident credential too, and the discoverable passkey — and in
+ *            an app's dialog it opens auth.oxy.so's window for that one step, as
+ *            does "Create account". On native it is "Continue with Oxy" ("Get
+ *            Commons" without Commons).
  *
  * `signInMethods.ts` owns which blocks a platform gets.
  */
@@ -39,6 +39,7 @@ import { useOxy } from '../../context/OxyContext';
 import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
 import { useDeviceSwitcher } from '../../hooks/useDeviceSwitcher';
 import { useI18n } from '../../hooks/useI18n';
+import { useSurfaceFrameWidth } from '../../hooks/useSurfaceFrameWidth';
 import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
 import { isWebBrowser } from '../../utils/isWebBrowser';
 import { SubtleLink } from '../authChooser/primitives';
@@ -49,6 +50,9 @@ import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from '
 import { RATE_LIMIT_SECONDS, describePasskeyError, isRateLimited } from './passkeyError';
 import { resolveSignInMethods } from './signInMethods';
 
+/** Bloom `AuthCard`'s split card width, which the account dialog grows to for it. */
+const SPLIT_WIDTH = 880;
+
 export interface OxySignInPanelProps {
   /** This screen signed the origin in. */
   onSignedIn: () => void;
@@ -124,7 +128,8 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     void controller?.signInWithOxy();
     showRequest();
   };
-  const signInOnOxy = () => {
+  // The passkey is `oxy.so`'s: in an app it runs in auth.oxy.so's window.
+  const passkeyOnOxy = () => {
     void continueOnAuth('signin').then((result) => {
       if (result.status === 'signed-in') onSignedIn();
       else if (result.status === 'failed') toast.error(t('signin.errors.failed'));
@@ -189,7 +194,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         return;
       case 'failed':
         // The pair could not be activated as it stands: sign in as it explicitly.
-        if (methods.passkey && context.handle) reauthenticate(context);
+        if (methods.passkey === 'here' && context.handle) reauthenticate(context);
         else toast.error(t('accountSwitcher.toasts.activateFailed'));
         return;
       default:
@@ -198,8 +203,11 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   };
 
   const showsPicker = pickerAllowed && !showForm && principals.length > 0;
-  // auth.oxy.so's page is the split card from `md`.
+  // The web entry is the split card from `md`. In the account dialog it grows
+  // the dialog to that card; below `md` the dialog is a bottom sheet, which a
+  // width does not touch.
   const splits = methods.commons === 'qr';
+  useSurfaceFrameWidth(host === 'dialog' && !showsPicker && splits ? SPLIT_WIDTH : null);
 
   if (showsPicker) {
     return (
@@ -241,7 +249,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
     </Text>
   );
   // One solid action per screen: the username's Continue when there is one.
-  const commonsAppearance = methods.passkey ? 'outline' : 'solid';
+  const commonsAppearance = methods.passkey === 'here' ? 'outline' : 'solid';
 
   const continueWithOxyButton = (
     <Button
@@ -249,13 +257,28 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
       tone={commonsAppearance === 'solid' ? 'action' : 'neutral'}
       size="lg"
       fullWidth
-      onPress={methods.commons === 'window' ? signInOnOxy : continueWithOxy}
+      onPress={continueWithOxy}
       testID="continue-with-oxy"
     >
       {t('accountSwitcher.continueWithOxy')}
     </Button>
   );
 
+  const passkeyButton = (
+    <Button
+      appearance="outline"
+      tone="neutral"
+      size="lg"
+      fullWidth
+      leadingIcon={RiKey2Line}
+      disabled={methods.passkey === 'here' && blocked}
+      onPress={methods.passkey === 'here' ? () => void runPasskey(undefined, t('signin.errors.failed')) : passkeyOnOxy}
+      testID="passkey-sign-in"
+    >
+      {t('signin.methods.passkey')}
+    </Button>
+  );
+
   const form = (
     <OxyAuthScreen className={splits ? 'md:max-w-none' : undefined}>
       <OxyAuthScreenHeader title={title} description={description} />
@@ -263,7 +286,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
       {/* Below `md` this screen is the phone a QR would be scanned with. */}
       {splits ? <CssView className="md:hidden">{continueWithOxyButton}</CssView> : null}
 
-      {methods.commons === 'continue' || methods.commons === 'window' ? continueWithOxyButton : null}
+      {methods.commons === 'continue' ? continueWithOxyButton : null}
       {methods.commons === 'get-commons' ? (
         <View style={styles.stack}>
           <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{t('accountSwitcher.commonsNotInstalled')}</Text>
@@ -273,7 +296,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         </View>
       ) : null}
 
-      {methods.passkey ? (
+      {methods.passkey === 'here' ? (
         <View style={styles.stack}>
           <View style={styles.field}>
             <TextFieldLabel nativeID="username-label">{t('signin.username.label')}</TextFieldLabel>
@@ -314,24 +337,17 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         </View>
       ) : null}
 
-      {/* The alternatives to the screen's primary way in, always under it. The
-          window an app opens on the web is where they all are. */}
-      {methods.commons === 'window' ? null : <Divider>{t('signin.orContinueWith')}</Divider>}
+      {/* The alternatives to the screen's primary way in, always under it. In an
+          app's dialog, from `md`, the QR beside it IS the primary way in. */}
+      {methods.passkey === 'window' ? (
+        <CssView className="md:hidden">
+          <Divider>{t('signin.orContinueWith')}</Divider>
+        </CssView>
+      ) : (
+        <Divider>{t('signin.orContinueWith')}</Divider>
+      )}
 
-      {methods.passkey ? (
-        <Button
-          appearance="outline"
-          tone="neutral"
-          size="lg"
-          fullWidth
-          leadingIcon={RiKey2Line}
-          disabled={blocked}
-          onPress={() => void runPasskey(undefined, t('signin.errors.failed'))}
-          testID="passkey-sign-in"
-        >
-          {t('signin.methods.passkey')}
-        </Button>
-      ) : methods.commons === 'window' ? null : (
+      {methods.passkey === 'none' ? (
         <Button
           appearance="outline"
           tone="neutral"
@@ -343,9 +359,11 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
         >
           {t('accountSwitcher.scanQr')}
         </Button>
+      ) : (
+        passkeyButton
       )}
 
-      {methods.passkey ? null : noAccount}
+      {methods.passkey === 'here' ? null : noAccount}
       {onRecover ? (
         <SubtleLink label={t('signin.recoverLink')} theme={theme} onPress={onRecover} testID="recover-link" />
       ) : null}
@@ -356,6 +374,7 @@ export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
   if (!splits) return form;
   return (
     <OxyAuthSplit
+      bare={host === 'dialog'}
       aside={
         <>
           <AuthMediaCarousel slides={SIGN_IN_SLIDES} style={StyleSheet.absoluteFill} />

package/src/ui/components/signIn/signInMethods.ts

@@ -1,34 +1,38 @@
 /**
  * Which sign-in methods a surface offers, from where it runs.
  *
- * One screen everywhere; only the transport behind each block changes:
+ * One screen everywhere, and sign-in happens IN it (ADR 0029 D1):
  *
- *  - auth.oxy.so (`page`) is where the web signs in: the embedded Commons QR
- *    (the split card's right column from `md`, "Continue with Oxy" below it),
- *    the username with its Continue, and the passkey — asserted right here,
- *    on the one origin every Oxy passkey belongs to;
- *  - an app's account dialog on the web (`dialog`) opens that screen in a
- *    window over the app ("Continue with Oxy"), like "Sign in with Google":
- *    the browser's session lives on auth.oxy.so, so every Oxy app shares it;
- *  - native signs in with Commons: "Continue with Oxy", or "Get Commons" on a
- *    device that has no Commons to continue with.
+ *  - the COMMONS way in — on the web the embedded QR (the split card's right
+ *    column from `md`, with "Continue with Oxy" below `md`, where the screen
+ *    is the phone that would scan it); on native "Continue with Oxy", and
+ *    "Get Commons" on a device that has no Commons to continue with;
+ *  - the PASSKEY — it belongs to `oxy.so`, so it runs right here on auth.oxy.so
+ *    (`page`: the username with its Continue, and the discoverable passkey), and
+ *    in an app's dialog on the web it opens auth.oxy.so's window for that one
+ *    step (with account creation); native has none, Commons holds the identity.
  */
 
 import type { CommonsAvailability } from '@oxy.so/core';
 
 /**
- * `qr`          — auth.oxy.so: the embedded QR from `md`, "Continue with Oxy" below.
- * `window`      — an app on the web: "Continue with Oxy" opens auth.oxy.so's window.
+ * `qr`          — the web: the embedded QR from `md`, "Continue with Oxy" below.
  * `continue`    — native "Continue with Oxy": Oxy picks the route (shared
  *                 keychain, Commons on this device, a push, or the QR view).
  * `get-commons` — native, and Commons is not installed here.
  */
-export type CommonsEntry = 'qr' | 'window' | 'continue' | 'get-commons';
+export type CommonsEntry = 'qr' | 'continue' | 'get-commons';
+
+/**
+ * `here`   — auth.oxy.so: the username and the passkey run on this page.
+ * `window` — an app's dialog on the web: the passkey opens auth.oxy.so's window.
+ * `none`   — native.
+ */
+export type PasskeyEntry = 'here' | 'window' | 'none';
 
 export interface SignInMethods {
   commons: CommonsEntry;
-  /** The username and passkey block: only on auth.oxy.so. */
-  passkey: boolean;
+  passkey: PasskeyEntry;
 }
 
 export interface SignInSurfaceFacts {
@@ -42,10 +46,10 @@ export interface SignInSurfaceFacts {
 
 export function resolveSignInMethods(facts: SignInSurfaceFacts): SignInMethods {
   if (facts.web) {
-    return facts.host === 'page' ? { commons: 'qr', passkey: true } : { commons: 'window', passkey: false };
+    return { commons: 'qr', passkey: facts.host === 'page' ? 'here' : 'window' };
   }
   return {
     commons: facts.commonsAvailability === 'unavailable' ? 'get-commons' : 'continue',
-    passkey: false,
+    passkey: 'none',
   };
 }

package/src/ui/context/OxyContext.tsx

@@ -785,10 +785,10 @@ export const OxyRuntimeProvider: React.FC<OxyRuntimeProviderProps> = ({
     [webAuthMode, oxyServices, clientId, authorizeBaseUrl, isIdentityBound, user?.id],
   );
 
-  // On the web an Oxy app signs in and creates accounts in auth.oxy.so's
-  // window over the app, like "Sign in with Google": the passkey belongs to
-  // that origin, and the browser's session lives there, shared by every Oxy
-  // app. A blocked window falls back to the same page in this tab.
+  // What only auth.oxy.so can do for an Oxy app on the web — assert the
+  // `oxy.so` passkey, create or recover a passkey account — runs in its window
+  // over the app, for that one step. A blocked window falls back to the same
+  // page in this tab.
   const continueOnAuth = useCallback(
     (screen: OxyAuthScreen): Promise<WebOAuthSignInResult> =>
       startWebOAuthSignInForContext({

package/src/ui/context/oxyContextTypes.ts

@@ -131,10 +131,10 @@ export interface OxyContextState {
   startWebOAuthSignIn: (options: StartWebOAuthSignInOptions) => Promise<WebOAuthSignInResult>;
 
   /**
-   * Sign in (`signin`), create an account (`signup`) or recover one
-   * (`recover`) in auth.oxy.so's window over the app, where the browser's
-   * shared Oxy session lives. Web only; call it from the press, so the window
-   * opens with the gesture.
+   * The passkey sign-in (`signin`), account creation (`signup`) or recovery
+   * (`recover`) in auth.oxy.so's window over the app — the one step the
+   * account dialog cannot run itself, since the passkey belongs to `oxy.so`.
+   * Web only; call it from the press, so the window opens with the gesture.
    */
   continueOnAuth: (screen: OxyAuthScreen) => Promise<WebOAuthSignInResult>;
 

package/src/ui/hooks/useSurfaceFrameWidth.ts

@@ -0,0 +1,21 @@
+import { createContext, useContext, useLayoutEffect } from 'react';
+
+/**
+ * A screen's say in how wide its surface is.
+ *
+ * `SurfaceScreen` is the ONE host that declares the surface's dialog frame, so
+ * a screen whose views need different widths (the account dialog: the 420 menu,
+ * the sign-in's 880 split card) hands its width to that host rather than
+ * declaring a second frame. A change morphs the centered card to it.
+ */
+export const SurfaceFrameWidthContext = createContext<((maxWidth: number | null) => void) | null>(null);
+
+/** Ask the surface for `maxWidth` (px) while this is mounted; `null` keeps the surface's own. */
+export function useSurfaceFrameWidth(maxWidth: number | null): void {
+  const setWidth = useContext(SurfaceFrameWidthContext);
+  useLayoutEffect(() => {
+    if (!setWidth) return;
+    setWidth(maxWidth);
+    return () => setWidth(null);
+  }, [setWidth, maxWidth]);
+}