@oxy.so/services 4.0.7 → 6.0.0

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

@@ -0,0 +1,123 @@
+/**
+ * The shell every Oxy sign-in screen shares — the in-app account dialog and
+ * every page of the auth.oxy.so IdP render these, so the two cannot drift:
+ *
+ *   header   the Oxy mark (56), then the title (48/800, tight) and a 18px
+ *            description, 8 apart
+ *   screen   blocks 24 apart, at most 448 wide
+ *   split    from `md`, Bloom `AuthCard`'s split base — max 880, radius 24,
+ *            1px border, two equal columns, the right one on the secondary
+ *            surface; below `md` the right column is dropped, not stacked
+ *   loading  an indeterminate spinner holding the screen's height
+ *   terms    one centred caption linking the Terms of Service and Privacy Policy
+ *
+ * Layout is NativeWind `className` (breakpoints included). Type stays on
+ * Bloom `Text`'s own ramp through `style` — a `className` there drops its
+ * default family — and colours come from the Bloom theme.
+ */
+
+import type React from 'react';
+import { ActivityIndicator, Linking, Text as RNText } from 'react-native';
+import { View } from 'react-native-css/components';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { Text } from '@oxy.so/bloom/typography';
+import { useI18n } from '../../hooks/useI18n';
+import { LogoIcon } from '../logo/LogoIcon';
+
+const LOGO_HEIGHT = 56;
+const TERMS_URL = 'https://oxy.so/company/transparency/policies/terms-of-service';
+const PRIVACY_URL = 'https://oxy.so/company/transparency/policies/privacy';
+
+const TITLE = { fontSize: 48, lineHeight: 48, fontWeight: '800', letterSpacing: -1.2 } as const;
+const DESCRIPTION = { fontSize: 18, lineHeight: 28 } as const;
+const TERMS = { fontSize: 14, lineHeight: 20, textAlign: 'center', paddingHorizontal: 24 } as const;
+
+export interface OxyAuthScreenHeaderProps {
+  title: string;
+  description?: React.ReactNode;
+}
+
+/** The Oxy mark over the screen's title and description. */
+export const OxyAuthScreenHeader: React.FC<OxyAuthScreenHeaderProps> = ({ title, description }) => {
+  const theme = useTheme();
+  return (
+    <View className="gap-6">
+      <LogoIcon height={LOGO_HEIGHT} />
+      <View className="max-w-[90%] gap-2">
+        <Text accessibilityRole="header" style={[TITLE, { color: theme.colors.text }]}>
+          {title}
+        </Text>
+        {description != null && description !== '' ? (
+          typeof description === 'string' ? (
+            <Text style={[DESCRIPTION, { color: theme.colors.textSecondary }]}>
+              {description}
+            </Text>
+          ) : (
+            description
+          )
+        ) : null}
+      </View>
+    </View>
+  );
+};
+
+/** A sign-in screen's column: its blocks 24 apart. `className` extends it (the split's form column). */
+export const OxyAuthScreen: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className }) => (
+  <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 }) => {
+  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"
+    >
+      {/* 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>
+      <View
+        className="hidden md:flex md:flex-1 md:basis-0 md:min-w-0 items-center justify-center overflow-hidden p-8"
+        style={{ backgroundColor: theme.colors.backgroundSecondary }}
+      >
+        {aside}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * The screen while there is nothing to show yet. React Native's own indicator:
+ * `@oxy.so/bloom/loading` can tree-shake to `undefined` in a rolldown-vite
+ * production bundle when co-imported with `@oxy.so/bloom/button`.
+ */
+export const OxyAuthLoading: React.FC = () => {
+  const theme = useTheme();
+  return (
+    <View className="min-h-[300px] items-center justify-center">
+      <ActivityIndicator size="large" color={theme.colors.primary} />
+    </View>
+  );
+};
+
+/** "By continuing, you agree to our Terms of Service and Privacy Policy." */
+export const OxyAuthTerms: React.FC = () => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const link = { color: theme.colors.text, textDecorationLine: 'underline' as const };
+  return (
+    <Text style={[TERMS, { color: theme.colors.textSecondary }]}>
+      {t('signin.terms.before')}{' '}
+      <RNText accessibilityRole="link" style={link} onPress={() => void Linking.openURL(TERMS_URL)}>
+        {t('signin.terms.termsLink')}
+      </RNText>{' '}
+      {t('signin.terms.and')}{' '}
+      <RNText accessibilityRole="link" style={link} onPress={() => void Linking.openURL(PRIVACY_URL)}>
+        {t('signin.terms.privacyLink')}
+      </RNText>
+      .
+    </Text>
+  );
+};

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

@@ -0,0 +1,392 @@
+/**
+ * THE Oxy sign-in screen. The account dialog every Oxy app opens and the
+ * auth.oxy.so page render this one component; only where it is mounted
+ * 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).
+ *
+ * `signInMethods.ts` owns which blocks a platform gets.
+ */
+
+import type React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { Linking, Platform, Text as RNText, StyleSheet, View } from 'react-native';
+import { View as CssView } from 'react-native-css/components';
+import { AuthMediaCarousel } from '@oxy.so/bloom/auth-card';
+import { Button } from '@oxy.so/bloom/button';
+import { Divider } from '@oxy.so/bloom/divider';
+import { RiKey2Line } from '@oxy.so/bloom/icons/RiKey2Line';
+import { RiQrCodeLine } from '@oxy.so/bloom/icons/RiQrCodeLine';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { TextField, TextFieldHint, TextFieldInput, TextFieldLabel } from '@oxy.so/bloom/text-field';
+import { toast } from '@oxy.so/bloom/toast';
+import { Text } from '@oxy.so/bloom/typography';
+import type { SwitcherContextRow } from '@oxy.so/core';
+import { useQueryClient } from '@tanstack/react-query';
+import { useOxy } from '../../context/OxyContext';
+import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
+import { useDeviceSwitcher } from '../../hooks/useDeviceSwitcher';
+import { useI18n } from '../../hooks/useI18n';
+import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
+import { isWebBrowser } from '../../utils/isWebBrowser';
+import { SubtleLink } from '../authChooser/primitives';
+import { SIGN_IN_SLIDES } from './artwork';
+import { InlineCommonsQr } from './InlineCommonsQr';
+import { OxyAccountPicker } from './OxyAccountPicker';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthSplit, OxyAuthTerms } from './OxyAuthScreen';
+import { RATE_LIMIT_SECONDS, describePasskeyError, isRateLimited } from './passkeyError';
+import { resolveSignInMethods } from './signInMethods';
+
+export interface OxySignInPanelProps {
+  /** This screen signed the origin in. */
+  onSignedIn: () => void;
+  /** "New to Oxy? Create one". */
+  onCreateAccount: () => void;
+  /** "Lost your passkey? Recover your account" — auth.oxy.so's page only. */
+  onRecover?: () => void;
+  /** A handle to pre-fill, skipping the picker (a re-authentication). */
+  loginHint?: string;
+  /** The app being continued to, when there is one. */
+  appName?: string | null;
+  /**
+   * `dialog` — inside the account dialog, which the controller closes itself
+   * once a request it runs signs in, and where a request shows in place.
+   * `page`   — a page of its own (auth.oxy.so): a request opens the dialog to
+   * show it, and its completion is reported through `onSignedIn` too.
+   */
+  host?: 'dialog' | 'page';
+}
+
+export const OxySignInPanel: React.FC<OxySignInPanelProps> = ({
+  onSignedIn,
+  onCreateAccount,
+  onRecover,
+  loginHint,
+  appName = null,
+  host = 'page',
+}) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const queryClient = useQueryClient();
+  const { accountDialogController: controller, openAccountDialog, signInWithPasskey, continueOnAuth } = useOxy();
+  const snapshot = useAccountDialogSnapshot(controller);
+  const { principals, activeContext } = useDeviceSwitcher();
+
+  const methods = resolveSignInMethods({
+    web: isWebBrowser(),
+    host,
+    commonsAvailability: snapshot.commonsAvailability,
+  });
+
+  const [showForm, setShowForm] = useState(Boolean(loginHint));
+  const [identifier, setIdentifier] = useState(loginHint ?? '');
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [rateLimitSeconds, setRateLimitSeconds] = useState(0);
+  const blocked = pending || rateLimitSeconds > 0;
+
+  // The countdown after a 429: one tick a second until the person may retry.
+  useEffect(() => {
+    if (rateLimitSeconds <= 0) return;
+    const timer = setTimeout(() => setRateLimitSeconds((seconds) => Math.max(0, seconds - 1)), 1000);
+    return () => clearTimeout(timer);
+  }, [rateLimitSeconds]);
+
+  // On a page, a request the controller runs (the embedded QR, or one shown in
+  // the dialog opened over it) finishes the page's sign-in too. Only one that
+  // STARTED here: a completion already on the controller is somebody else's.
+  const [mountedAttempt] = useState(snapshot.signIn.attempt);
+  const completedHere = snapshot.signIn.phase === 'completed' && snapshot.signIn.attempt !== mountedAttempt;
+  useEffect(() => {
+    if (host === 'page' && completedHere) onSignedIn();
+  }, [host, completedHere, onSignedIn]);
+
+  /** Show the request a controller call just started — the dialog is where it lives. */
+  const showRequest = useCallback(() => {
+    if (host === 'page') openAccountDialog('qr');
+  }, [host, openAccountDialog]);
+
+  // These open a window or leave the page, so they run straight from the
+  // press, before any await.
+  const continueWithOxy = () => {
+    void controller?.signInWithOxy();
+    showRequest();
+  };
+  const signInOnOxy = () => {
+    void continueOnAuth('signin').then((result) => {
+      if (result.status === 'signed-in') onSignedIn();
+      else if (result.status === 'failed') toast.error(t('signin.errors.failed'));
+    });
+  };
+  const useAnotherDevice = () => {
+    void controller?.showQr();
+    showRequest();
+  };
+  const getCommons = () => {
+    Promise.resolve()
+      .then(() => Linking.openURL(getCommonsAcquisitionUrl(Platform.OS)))
+      .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
+  };
+
+  const runPasskey = async (username: string | undefined, failToast: string) => {
+    if (blocked) return;
+    setError(null);
+    setPending(true);
+    try {
+      await signInWithPasskey({ username });
+      onSignedIn();
+    } catch (err) {
+      if (isRateLimited(err)) {
+        setRateLimitSeconds(RATE_LIMIT_SECONDS);
+      } else {
+        const message = describePasskeyError(err, t);
+        setError(message);
+        toast.error(failToast, { description: message });
+      }
+    } finally {
+      setPending(false);
+    }
+  };
+  const submitUsername = () => {
+    const username = identifier.trim();
+    if (username) void runPasskey(username, t('signin.errors.failed'));
+    else setError(t('signin.username.required'));
+  };
+
+  // A returning device starts at WHO. Not while adding an account from inside
+  // a signed-in app: the rows are the accounts it would add.
+  const pickerAllowed = host === 'dialog' ? !snapshot.hasSession : activeContext !== null;
+  const reauthenticate = (context: SwitcherContextRow) => {
+    setIdentifier(context.handle ?? '');
+    setShowForm(true);
+  };
+  const selectContext = async (context: SwitcherContextRow) => {
+    const outcome = await controller?.chooseContext(context.contextId).catch(() => 'failed' as const);
+    switch (outcome) {
+      case 'switched':
+        // Every account-scoped query now describes somebody else.
+        void queryClient.invalidateQueries();
+        onSignedIn();
+        return;
+      case 'current':
+        onSignedIn();
+        return;
+      case 'signing-in':
+        // The request for that account is running; it shows where requests do.
+        showRequest();
+        return;
+      case 'failed':
+        // The pair could not be activated as it stands: sign in as it explicitly.
+        if (methods.passkey && context.handle) reauthenticate(context);
+        else toast.error(t('accountSwitcher.toasts.activateFailed'));
+        return;
+      default:
+        return;
+    }
+  };
+
+  const showsPicker = pickerAllowed && !showForm && principals.length > 0;
+  // auth.oxy.so's page is the split card from `md`.
+  const splits = methods.commons === 'qr';
+
+  if (showsPicker) {
+    return (
+      <OxyAccountPicker
+        principals={principals}
+        appName={appName}
+        signedOut={!snapshot.hasSession}
+        pendingContextId={snapshot.activatingContextId}
+        isLoading={snapshot.activatingContextId !== null}
+        onSelectContext={(context) => void selectContext(context)}
+        onUseAnother={() => {
+          setIdentifier('');
+          setShowForm(true);
+        }}
+      />
+    );
+  }
+
+  const shownError = rateLimitSeconds > 0 ? t('signin.errors.rateLimited', { seconds: rateLimitSeconds }) : error;
+
+  const adding = host === 'dialog' && snapshot.hasSession;
+  const title = adding ? t('signin.addAccountTitle') : t('signin.title');
+  const description = adding
+    ? t('signin.addAccountSubtitle')
+    : appName
+      ? t('signin.subtitleToApp', { app: appName })
+      : t('signin.subtitle');
+  const noAccount = (
+    <Text style={[styles.note, styles.noAccount, { color: theme.colors.textSecondary }]}>
+      {t('signin.noAccount')}{' '}
+      <RNText
+        accessibilityRole="link"
+        onPress={onCreateAccount}
+        style={[styles.noAccountLink, { color: theme.colors.text }]}
+        testID="create-account-link"
+      >
+        {t('signin.createAccount')}
+      </RNText>
+    </Text>
+  );
+  // One solid action per screen: the username's Continue when there is one.
+  const commonsAppearance = methods.passkey ? 'outline' : 'solid';
+
+  const continueWithOxyButton = (
+    <Button
+      appearance={commonsAppearance}
+      tone={commonsAppearance === 'solid' ? 'action' : 'neutral'}
+      size="lg"
+      fullWidth
+      onPress={methods.commons === 'window' ? signInOnOxy : continueWithOxy}
+      testID="continue-with-oxy"
+    >
+      {t('accountSwitcher.continueWithOxy')}
+    </Button>
+  );
+
+  const form = (
+    <OxyAuthScreen className={splits ? 'md:max-w-none' : undefined}>
+      <OxyAuthScreenHeader title={title} description={description} />
+
+      {/* 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 === 'get-commons' ? (
+        <View style={styles.stack}>
+          <Text style={[styles.note, { color: theme.colors.textSecondary }]}>{t('accountSwitcher.commonsNotInstalled')}</Text>
+          <Button appearance="solid" tone="action" size="lg" fullWidth onPress={getCommons} testID="get-commons-button">
+            {t('accountSwitcher.getCommons')}
+          </Button>
+        </View>
+      ) : null}
+
+      {methods.passkey ? (
+        <View style={styles.stack}>
+          <View style={styles.field}>
+            <TextFieldLabel nativeID="username-label">{t('signin.username.label')}</TextFieldLabel>
+            <TextField invalid={shownError !== null} disabled={blocked} radius={999} style={styles.input}>
+              <TextFieldInput
+                testID="username"
+                label={t('signin.username.label')}
+                value={identifier}
+                onValueChange={(value) => {
+                  setIdentifier(value);
+                  if (error) setError(null);
+                }}
+                placeholder={t('signin.username.placeholder')}
+                autoComplete="username"
+                autoCapitalize="none"
+                autoCorrect={false}
+                autoFocus={Platform.OS === 'web'}
+                returnKeyType="go"
+                onSubmitEditing={submitUsername}
+                aria-required
+              />
+            </TextField>
+            {shownError ? <TextFieldHint invalid>{shownError}</TextFieldHint> : null}
+          </View>
+          {noAccount}
+          <Button
+            appearance="solid"
+            tone="action"
+            size="lg"
+            fullWidth
+            loading={pending}
+            disabled={blocked}
+            onPress={submitUsername}
+            testID="username-continue"
+          >
+            {t('signin.actions.continue')}
+          </Button>
+        </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>}
+
+      {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 : (
+        <Button
+          appearance="outline"
+          tone="neutral"
+          size="lg"
+          fullWidth
+          leadingIcon={RiQrCodeLine}
+          onPress={useAnotherDevice}
+          testID="scan-qr"
+        >
+          {t('accountSwitcher.scanQr')}
+        </Button>
+      )}
+
+      {methods.passkey ? null : noAccount}
+      {onRecover ? (
+        <SubtleLink label={t('signin.recoverLink')} theme={theme} onPress={onRecover} testID="recover-link" />
+      ) : null}
+      <OxyAuthTerms />
+    </OxyAuthScreen>
+  );
+
+  if (!splits) return form;
+  return (
+    <OxyAuthSplit
+      aside={
+        <>
+          <AuthMediaCarousel slides={SIGN_IN_SLIDES} style={StyleSheet.absoluteFill} />
+          <InlineCommonsQr controller={controller} />
+        </>
+      }
+    >
+      {form}
+    </OxyAuthSplit>
+  );
+};
+
+const styles = StyleSheet.create({
+  stack: {
+    gap: 12,
+  },
+  field: {
+    gap: 6,
+  },
+  note: {
+    fontSize: 14,
+    lineHeight: 20,
+    textAlign: 'center',
+  },
+  noAccount: {
+    textAlign: 'left',
+  },
+  noAccountLink: {
+    textDecorationLine: 'underline',
+  },
+  input: {
+    height: 40,
+  },
+});

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

@@ -0,0 +1,86 @@
+/**
+ * Account creation in the account dialog.
+ *
+ * On the web the account is made on auth.oxy.so, in its window over the app
+ * (`onCreateOnWeb`), and this app is signed in as it. On native, Commons
+ * creates the identity: straight in when it is installed, "Get Commons"
+ * otherwise.
+ */
+
+import type React from 'react';
+import { useCallback } from 'react';
+import { Linking, Platform } from 'react-native';
+import { Button } from '@oxy.so/bloom/button';
+import { RiKey2Line } from '@oxy.so/bloom/icons/RiKey2Line';
+import { useTheme } from '@oxy.so/bloom/theme';
+import { toast } from '@oxy.so/bloom/toast';
+import { useOxy } from '../../context/OxyContext';
+import { useAccountDialogSnapshot } from '../../hooks/accountDialogSnapshot';
+import { useI18n } from '../../hooks/useI18n';
+import { getCommonsAcquisitionUrl } from '../../utils/commonsStoreLinks';
+import { isWebBrowser } from '../../utils/isWebBrowser';
+import { SubtleLink } from '../authChooser/primitives';
+import { OxyAuthScreen, OxyAuthScreenHeader, OxyAuthTerms } from './OxyAuthScreen';
+
+/** Commons' own identity-creation deep link. */
+const COMMONS_CREATE_IDENTITY_URL = 'oxycommons://create-identity';
+
+export interface OxySignUpPanelProps {
+  /** "Already have an account? Sign in". */
+  onSignIn: () => void;
+  /** The web's one action: auth.oxy.so's sign-up, in its window. */
+  onCreateOnWeb: () => void;
+}
+
+export const OxySignUpPanel: React.FC<OxySignUpPanelProps> = ({ onSignIn, onCreateOnWeb }) => {
+  const theme = useTheme();
+  const { t } = useI18n();
+  const { accountDialogController: controller } = useOxy();
+  const snapshot = useAccountDialogSnapshot(controller);
+  const web = isWebBrowser();
+
+  const openExternal = useCallback(
+    (url: string) => {
+      Promise.resolve()
+        .then(() => Linking.openURL(url))
+        .catch(() => toast.error(t('accountSwitcher.linkOpenFailed')));
+    },
+    [t],
+  );
+
+  const commonsInstalled = snapshot.commonsAvailability === 'available';
+
+  return (
+    <OxyAuthScreen>
+      <OxyAuthScreenHeader title={t('signup.title')} description={web ? t('signup.webSubtitle') : t('signup.subtitle')} />
+      {web ? (
+        <Button
+          appearance="solid"
+          tone="action"
+          size="lg"
+          fullWidth
+          leadingIcon={RiKey2Line}
+          onPress={onCreateOnWeb}
+          testID="signup-open-identity"
+        >
+          {t('signup.createAccount')}
+        </Button>
+      ) : (
+        <Button
+          appearance="solid"
+          tone="action"
+          size="lg"
+          fullWidth
+          onPress={() =>
+            openExternal(commonsInstalled ? COMMONS_CREATE_IDENTITY_URL : getCommonsAcquisitionUrl(Platform.OS))
+          }
+          testID="signup-commons"
+        >
+          {commonsInstalled ? t('signup.createInCommons') : t('accountSwitcher.getCommons')}
+        </Button>
+      )}
+      <SubtleLink label={t('signup.backToSignInLink')} theme={theme} onPress={onSignIn} testID="back-to-sign-in" />
+      <OxyAuthTerms />
+    </OxyAuthScreen>
+  );
+};

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

@@ -0,0 +1,13 @@
+/**
+ * The photos the sign-in split card's carousel turns through. Shipped with the
+ * SDK and imported like its icon fonts, so every host serves them from its own
+ * origin — nothing to allow in anyone's CSP.
+ */
+
+import type { AuthMediaSlide } from '@oxy.so/bloom/auth-card';
+import slide1 from '../../../assets/signIn/slide-1.jpg';
+import slide2 from '../../../assets/signIn/slide-2.jpg';
+import slide3 from '../../../assets/signIn/slide-3.jpg';
+import slide4 from '../../../assets/signIn/slide-4.jpg';
+
+export const SIGN_IN_SLIDES: AuthMediaSlide[] = [slide1, slide2, slide3, slide4].map((source) => ({ source }));

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

@@ -0,0 +1,44 @@
+/**
+ * The message for a failed passkey sign-in, and whether it was rate-limited.
+ *
+ * A dismissed or timed-out browser prompt rejects with a `NotAllowedError` /
+ * `AbortError` DOMException, often re-wrapped by `@simplewebauthn/browser` as a
+ * `WebAuthnError` whose `cause` is the original — so the cancellation shape is
+ * looked for along the cause chain, and reported calmly instead of as the raw
+ * "The operation either timed out or was not allowed…".
+ */
+
+import type { Translate } from '../authChooser/types';
+
+/** How long the surface waits after a 429 before it lets the person retry. */
+export const RATE_LIMIT_SECONDS = 60;
+
+function isCancellation(error: unknown): boolean {
+  let current: unknown = error;
+  for (let depth = 0; depth < 5 && current instanceof Error; depth += 1) {
+    if (current.name === 'NotAllowedError' || current.name === 'AbortError') return true;
+    // `@simplewebauthn/browser`'s stable code for an aborted ceremony.
+    if ((current as { code?: unknown }).code === 'ERROR_CEREMONY_ABORTED') return true;
+    current = (current as { cause?: unknown }).cause;
+  }
+  return false;
+}
+
+/** An HTTP status off a thrown SDK error (ApiError- or axios-shaped). */
+function errorStatus(error: unknown): number | undefined {
+  return (
+    (error as { status?: number } | undefined)?.status ??
+    (error as { response?: { status?: number } } | undefined)?.response?.status
+  );
+}
+
+export function isRateLimited(error: unknown): boolean {
+  return errorStatus(error) === 429;
+}
+
+/** The inline message for a passkey ceremony that did not sign anyone in. */
+export function describePasskeyError(error: unknown, t: Translate): string {
+  if (isCancellation(error)) return t('signin.errors.passkeyCancelled');
+  if (error instanceof Error && error.message.trim().length > 0) return error.message;
+  return t('signin.errors.passkeyFailed');
+}