@ciromaciel/auth-react 1.0.2 → 1.2.0

package/dist/index.esm.js

@@ -1,11 +1,148 @@
 import { create } from 'zustand';
-import { useState, useCallback, useEffect, useMemo, createContext } from 'react';
+import { useState, useCallback, useEffect, useMemo, createContext, useRef } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Navigate, Outlet, useNavigate } from 'react-router-dom';
-import { Modal, Stack, Text, Group, Image, Title, Paper, Divider, Button, TextInput, Loader, Anchor, Center, Box, Avatar, Collapse, FileButton, Tooltip, ThemeIcon, Badge, rem, ActionIcon } from '@mantine/core';
+import { Modal, Stack, Text, Group, Image, Title, Paper, Anchor, NavLink, ActionIcon, Loader, Avatar, Button, Divider, TextInput, Alert, Center, Box, Collapse, FileButton, Tooltip, ThemeIcon, Badge, rem } from '@mantine/core';
 import { useForm } from '@mantine/form';
-import { IconBrandGoogle, IconArrowRight, IconUser, IconPhoto, IconTrash, IconCheck, IconPencil, IconMail, IconShield, IconDevices, IconDeviceMobile, IconLogout, IconUserCircle, IconSettings, IconCreditCard, IconShieldCheck } from '@tabler/icons-react';
+import { IconX, IconArrowRight, IconBrandGoogle, IconArrowLeft, IconRefresh, IconAlertCircle, IconUser, IconPhoto, IconTrash, IconCheck, IconPencil, IconMail, IconShield, IconDevices, IconDeviceMobile, IconLogout, IconUserCircle, IconSettings, IconCreditCard, IconShieldCheck } from '@tabler/icons-react';
+
+/**
+ * The accounts that already signed in on this browser.
+ *
+ * `<SignIn />` offers them before the empty email field: for a returning
+ * person, choosing the account IS the click that sends the code. Nothing here
+ * is a credential — a saved email still has to receive and type a fresh code —
+ * so the list is a shortcut, never a session.
+ *
+ * WHAT IS KEPT, AND WHEN
+ *
+ * Email, the way in (`'code'` or a provider id such as `'google'`) and the time
+ * of the last sign-in. No token, name or picture: that is everything needed to
+ * draw a row, and the rest arrives with the session.
+ *
+ * An email enters only after a session exists — the code confirmed, or the
+ * provider's token back in the fragment. Never on "send code": a typo there
+ * would otherwise become a permanent suggestion.
+ *
+ * WHY IT SURVIVES SIGN-OUT AND IDENTITY SWITCHES
+ *
+ * The list exists precisely for the person who left and is coming back, so
+ * signing out does not clear it; removing an account is an explicit action on
+ * the screen. The key is in `KEEP` in `identitySwitch.js` for the same reason:
+ * the list belongs to the browser, not to whichever account is signed in, and
+ * holds no data of any account beyond its own email.
+ *
+ * `localStorage` is per origin, so each panel keeps its own list.
+ */
+
+const RECENT_ACCOUNTS_KEY = 'auth:recent-accounts';
+
+// Five rows fit the 350px card with no scroll. The oldest drops out on its
+// own; signing in with it again puts it back on top.
+const MAX_RECENT_ACCOUNTS = 5;
+
+// Which provider this tab left for. `sessionStorage` because the answer only
+// matters to the tab that comes back, and it expires so an abandoned consent
+// screen does not label a later, unrelated token.
+const SOCIAL_DEPARTURE_KEY = 'auth:social-departure';
+const SOCIAL_DEPARTURE_TTL_MS = 15 * 60 * 1000;
+const normalizeEmail = email => String(email ?? '').trim().toLowerCase();
+
+/**
+ * The saved accounts, most recent first. Never throws: a private window,
+ * blocked storage or a hand-edited value all read as an empty list.
+ *
+ * @returns {{ email: string, method: string, lastUsedAt: number }[]}
+ */
+function listRecentAccounts() {
+  try {
+    const raw = window.localStorage.getItem(RECENT_ACCOUNTS_KEY);
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(account => account && typeof account.email === 'string' && account.email.includes('@')).map(account => ({
+      email: normalizeEmail(account.email),
+      method: typeof account.method === 'string' && account.method ? account.method : 'code',
+      lastUsedAt: Number(account.lastUsedAt) || 0
+    })).sort((a, b) => b.lastUsedAt - a.lastUsedAt).slice(0, MAX_RECENT_ACCOUNTS);
+  } catch {
+    return [];
+  }
+}
+function writeRecentAccounts(accounts) {
+  try {
+    window.localStorage.setItem(RECENT_ACCOUNTS_KEY, JSON.stringify(accounts));
+  } catch {
+    // No storage: the screen simply keeps asking for the email.
+  }
+}
+
+/**
+ * Puts the account on top of the list, creating it or refreshing it.
+ *
+ * @param {string} email
+ * @param {string} [method='code'] - `'code'` or the provider id
+ * @returns the list as it stands after the write
+ */
+function rememberAccount(email, method = 'code') {
+  const normalized = normalizeEmail(email);
+  if (!normalized.includes('@')) return listRecentAccounts();
+  const next = [{
+    email: normalized,
+    method: method || 'code',
+    lastUsedAt: Date.now()
+  }, ...listRecentAccounts().filter(account => account.email !== normalized)].slice(0, MAX_RECENT_ACCOUNTS);
+  writeRecentAccounts(next);
+  return next;
+}
+
+/**
+ * Removes one account from this browser's list. The account itself, its
+ * sessions and the lists of other panels are untouched.
+ *
+ * @returns the list as it stands after the removal
+ */
+function forgetAccount(email) {
+  const normalized = normalizeEmail(email);
+  const next = listRecentAccounts().filter(account => account.email !== normalized);
+  writeRecentAccounts(next);
+  return next;
+}
+
+/** Records the provider this tab is leaving for. */
+function markSocialDeparture(provider) {
+  try {
+    window.sessionStorage.setItem(SOCIAL_DEPARTURE_KEY, JSON.stringify({
+      provider,
+      at: Date.now()
+    }));
+  } catch {
+    // No storage: the account is not remembered, and the sign-in still works.
+  }
+}
+
+/**
+ * Reads and clears the provider this tab left for, if it left recently.
+ *
+ * Read BEFORE an identity switch runs: the switch clears `sessionStorage`.
+ */
+function takeSocialDeparture() {
+  try {
+    const raw = window.sessionStorage.getItem(SOCIAL_DEPARTURE_KEY);
+    if (!raw) return null;
+    window.sessionStorage.removeItem(SOCIAL_DEPARTURE_KEY);
+    const {
+      provider,
+      at
+    } = JSON.parse(raw);
+    if (typeof provider !== 'string' || !provider) return null;
+    if (!(Date.now() - Number(at) < SOCIAL_DEPARTURE_TTL_MS)) return null;
+    return provider;
+  } catch {
+    return null;
+  }
+}
 
 /**
  * The identity switch — when the panel stops being one person and becomes
@@ -104,7 +241,12 @@ const KEEP = new Set([
 // The switch beacon: a timestamp the sibling tabs listen for. Wiping it
 // would make the NEXT write look unchanged to the browser in some cases,
 // and the event that carries the switch would not fire.
-'auth:identity-switched']);
+'auth:identity-switched',
+// The accounts that signed in on this browser (`recent-accounts.js`). It
+// belongs to the browser, not to whoever is signed in, and holds nothing
+// of any account beyond its email — wiping it on every switch would empty
+// the sign-in shortcuts each time an operator impersonates someone.
+RECENT_ACCOUNTS_KEY]);
 function dropStoredAccountState() {
   try {
     const doomed = [];
@@ -583,14 +725,22 @@ const getSocialProviders = async () => {
  * `redirect` is where to come back to; the worker validates it against the
  * application's allowlist BEFORE leaving, and stores the validated value. It
  * defaults to the current page.
+ *
+ * `rememberAccount: false` keeps the account off this browser's recent list
+ * (`recent-accounts.js`) when the token comes back.
  */
 const startSocialSignIn = (provider, {
-  redirect
+  redirect,
+  rememberAccount: shouldRemember = true
 } = {}) => {
   const destination = redirect || window.location.href.split('#')[0];
   const url = new URL(`${API_BASE}/auth/sign-in/${provider}`);
   url.searchParams.set('redirect', destination);
   if (API_KEY && !INTERNAL_MODE) url.searchParams.set('api_key', API_KEY);
+
+  // The fragment that comes back carries only the token, not which provider
+  // issued it — so the tab notes where it went before leaving.
+  if (shouldRemember) markSocialDeparture(provider);
   window.location.assign(url.toString());
 };
 
@@ -609,6 +759,11 @@ const consumeSocialToken = () => {
   const token = params.get('token');
   if (!token) return null;
 
+  // Read before the identity switch below: it clears `sessionStorage`, where
+  // the departure is noted. A token without a departure (a handoff between
+  // panels) is not a sign-in made here, and does not enter the list.
+  const provider = takeSocialDeparture();
+
   /*
    * A social sign-in can land on a tab that already belongs to SOMEBODY ELSE.
    *
@@ -641,6 +796,10 @@ const consumeSocialToken = () => {
     if (before && after && before !== after) markIdentitySwitching();
   }
   setStoredToken(token);
+  if (provider) {
+    const email = decodeJWT(token)?.email;
+    if (email) rememberAccount(email, provider);
+  }
   params.delete('token');
   const rest = params.toString();
   window.history.replaceState(null, '', `${window.location.pathname}${window.location.search}${rest ? `#${rest}` : ''}`);
@@ -659,6 +818,9 @@ const consumeSocialError = () => {
   const params = new URLSearchParams(window.location.search);
   const reason = params.get('social_error');
   if (!reason) return null;
+
+  // The trip failed: the departure noted for it must not label a later token.
+  takeSocialDeparture();
   params.delete('social_error');
   const rest = params.toString();
   window.history.replaceState(null, '', `${window.location.pathname}${rest ? `?${rest}` : ''}${window.location.hash}`);
@@ -2027,6 +2189,156 @@ function AuthCard({
   });
 }
 
+const PROVIDER_NAMES = {
+  google: 'Google',
+  github: 'GitHub'
+};
+const providerName = method => PROVIDER_NAMES[method] || method.charAt(0).toUpperCase() + method.slice(1);
+const RELATIVE = new Intl.RelativeTimeFormat('pt-BR', {
+  numeric: 'auto'
+});
+
+/** "há 2 horas", "ontem", "há 6 dias" — the unit that reads naturally. */
+function formatLastUsed(timestamp, now = Date.now()) {
+  const minutes = Math.round((timestamp - now) / 60000);
+  if (Math.abs(minutes) < 1) return RELATIVE.format(0, 'second');
+  if (Math.abs(minutes) < 60) return RELATIVE.format(minutes, 'minute');
+  const hours = Math.round(minutes / 60);
+  if (Math.abs(hours) < 24) return RELATIVE.format(hours, 'hour');
+  const days = Math.round(hours / 24);
+  if (Math.abs(days) < 30) return RELATIVE.format(days, 'day');
+  const months = Math.round(days / 30);
+  if (Math.abs(months) < 12) return RELATIVE.format(months, 'month');
+  return RELATIVE.format(Math.round(days / 365), 'year');
+}
+
+/** "ciro" → "C", "qa+monitors" → "QM". */
+function initialsOf(email) {
+  const local = email.split('@')[0];
+  const parts = local.split(/[.+_-]/).filter(Boolean);
+  return ((parts[0] || local).charAt(0) + (parts[1] ? parts[1].charAt(0) : '')).toUpperCase();
+}
+
+/**
+ * The first step for someone this browser already knows.
+ *
+ * Each row is the whole action: clicking it sends the code (or leaves for the
+ * provider the account used last time), so a returning person goes from
+ * opening the screen to typing the code in one click.
+ *
+ * Removing is behind "Gerenciar" on purpose. An × always in view sits right
+ * next to the row the person came to click, and a slip would drop the account
+ * they meant to use. Nothing is lost by removing — signing in again brings the
+ * account back — so there is no confirmation step either.
+ */
+function RecentAccounts({
+  accounts,
+  pickingEmail = null,
+  managing = false,
+  onToggleManage,
+  onPick,
+  onForget,
+  onUseOther,
+  labels = {}
+}) {
+  const busy = !!pickingEmail;
+  return /*#__PURE__*/jsxs(Stack, {
+    gap: "md",
+    children: [/*#__PURE__*/jsxs(Stack, {
+      gap: 8,
+      children: [/*#__PURE__*/jsxs(Group, {
+        justify: "space-between",
+        align: "baseline",
+        wrap: "nowrap",
+        children: [/*#__PURE__*/jsx(Text, {
+          fz: 11,
+          fw: 800,
+          lh: 1,
+          tt: "uppercase",
+          lts: "1.5px",
+          c: "gray.4",
+          children: labels.recentAccountsHeading || 'Contas neste navegador'
+        }), /*#__PURE__*/jsx(Anchor, {
+          component: "button",
+          type: "button"
+          /*
+           * The size of the heading it sits beside, not of body
+           * text: it is a secondary control of the list, and at
+           * 14px it outweighed the 11px label it annotates.
+           */,
+          fz: 12,
+          lh: 1,
+          c: "dimmed",
+          onClick: busy ? undefined : onToggleManage,
+          children: managing ? labels.recentAccountsDone || 'Concluir' : labels.recentAccountsManage || 'Gerenciar'
+        })]
+      }), /*#__PURE__*/jsx(Paper, {
+        withBorder: true,
+        radius: 0,
+        p: 0,
+        children: accounts.map((account, index) => {
+          const isPicking = pickingEmail === account.email;
+          const isSocial = account.method !== 'code';
+          const description = isPicking ? isSocial ? `${labels.openingProvider || 'Abrindo o'} ${providerName(account.method)}…` : labels.sendingCode || 'Enviando código…' : `${labels.lastUsed || 'Último acesso'} ${formatLastUsed(account.lastUsedAt)}${isSocial ? ` · ${providerName(account.method)}` : ''}`;
+          return /*#__PURE__*/jsx(NavLink, {
+            /*
+             * A `div` while managing: the row then holds the
+             * remove button, and a button inside a button is
+             * invalid HTML that browsers repair by splitting
+             * the row in two.
+             */
+            component: managing ? 'div' : 'button',
+            type: managing ? undefined : 'button',
+            "aria-disabled": busy || undefined,
+            onClick: managing || busy ? undefined : () => onPick(account),
+            noWrap: true,
+            label: /*#__PURE__*/jsx(Text, {
+              fz: 14,
+              fw: 600,
+              c: "gray.9",
+              truncate: true,
+              children: account.email
+            }),
+            description: description,
+            leftSection: /*#__PURE__*/jsx(Avatar, {
+              radius: 0,
+              size: 36,
+              color: "gray",
+              variant: "light",
+              children: initialsOf(account.email)
+            }),
+            rightSection: managing ? /*#__PURE__*/jsx(ActionIcon, {
+              variant: "subtle",
+              color: "gray",
+              "aria-label": `${labels.removeAccount || 'Remover'} ${account.email}`,
+              onClick: () => onForget(account),
+              children: /*#__PURE__*/jsx(IconX, {
+                size: 16
+              })
+            }) : isPicking ? /*#__PURE__*/jsx(Loader, {
+              size: 14
+            }) : /*#__PURE__*/jsx(IconArrowRight, {
+              size: 16,
+              color: "var(--mantine-color-gray-5)"
+            }),
+            py: 10,
+            style: index > 0 ? {
+              borderTop: '1px solid var(--mantine-color-gray-2)'
+            } : undefined
+          }, account.email);
+        })
+      })]
+    }), /*#__PURE__*/jsx(Button, {
+      type: "button",
+      variant: "default",
+      fullWidth: true,
+      "aria-disabled": busy,
+      onClick: busy ? undefined : onUseOther,
+      children: labels.useOtherEmail || 'Usar outro e-mail'
+    })]
+  });
+}
+
 const MARKS = {
   google: IconBrandGoogle
 };
@@ -2048,7 +2360,11 @@ const MARKS = {
 function SocialButtons({
   labels = {},
   redirect,
-  disabled = false
+  disabled = false,
+  // Whether the account returning from the provider joins this browser's
+  // recent list (`recent-accounts.js`). `<SignIn recentAccounts={false}>`
+  // turns it off here too.
+  rememberAccount = true
 }) {
   const [providers, setProviders] = useState(null);
   const [leaving, setLeaving] = useState(null);
@@ -2092,7 +2408,8 @@ function SocialButtons({
           // `oauth_states` row.
           setLeaving(provider.provider);
           startSocialSignIn(provider.provider, {
-            redirect
+            redirect,
+            rememberAccount
           });
         },
         children: /*#__PURE__*/jsxs(Group, {
@@ -2201,6 +2518,102 @@ function TermsNotice({
   });
 }
 
+/**
+ * What a failed `verify` means for the person, read from the worker's answer.
+ *
+ * The HTTP status carries the case — `code` is `VALIDATION_ERROR` for both a
+ * wrong and an expired code, so it cannot tell them apart:
+ *   - 400 with `details.attemptsLeft`: wrong code, the request is still open;
+ *   - 400 without it: no open request for this email (already replaced);
+ *   - 429: the fifth wrong try destroyed the request;
+ *   - 410: the code outlived its minutes, and was destroyed too.
+ *
+ * Anything else — the network, a 500 — is not about the code, and must not
+ * lock the field.
+ */
+function describeCodeFailure(error) {
+  if (error?.status === 429) return {
+    kind: 'exhausted',
+    isLocked: true
+  };
+  if (error?.status === 410) return {
+    kind: 'expired',
+    isLocked: true
+  };
+  if (error?.status === 400) {
+    const attemptsLeft = error?.details?.attemptsLeft;
+    return {
+      kind: 'wrong',
+      isLocked: false,
+      attemptsLeft: Number.isInteger(attemptsLeft) ? attemptsLeft : null
+    };
+  }
+  return {
+    kind: 'other',
+    isLocked: false,
+    message: error?.message || null
+  };
+}
+
+/**
+ * The notice above the code field.
+ *
+ * It sits ABOVE the field, not under it, and says what to do next — not only
+ * that something failed. The field's own error line was 12px of red under a
+ * cleared input, next to a greyed-out button: it read as a frozen screen.
+ *
+ * The most common cause gets named: a new code invalidates the previous one,
+ * and the person is often reading an older email.
+ */
+function CodeFailureNotice({
+  failure,
+  labels
+}) {
+  if (!failure) return null;
+  const texts = {
+    wrong: {
+      title: labels.wrongCodeTitle || 'Código incorreto',
+      body: [labels.wrongCodeHint || 'Confira o e-mail mais recente: um código novo invalida o anterior.', failure.attemptsLeft === 1 ? labels.lastAttempt || 'Esta é a última tentativa.' : failure.attemptsLeft > 1 ? labels.attemptsLeft ? labels.attemptsLeft(failure.attemptsLeft) : `Restam ${failure.attemptsLeft} tentativas.` : null].filter(Boolean).join(' ')
+    },
+    exhausted: {
+      title: labels.attemptsExhaustedTitle || 'Tentativas esgotadas',
+      body: labels.attemptsExhausted || 'Por segurança, este código foi cancelado. Peça um novo para continuar.'
+    },
+    expired: {
+      title: labels.codeExpiredTitle || 'Código expirado',
+      body: labels.codeExpired || 'O código vale por poucos minutos. Peça um novo para continuar.'
+    },
+    other: {
+      title: labels.codeFailedTitle || 'Não foi possível entrar',
+      body: failure.message || labels.invalidCode || 'Tente de novo em instantes.'
+    }
+  }[failure.kind];
+  return /*#__PURE__*/jsx(Alert, {
+    color: "red",
+    variant: "light",
+    radius: 0,
+    icon: /*#__PURE__*/jsx(IconAlertCircle, {
+      size: 18
+    }),
+    title: texts.title
+    /*
+     * `role="alert"` is Mantine's default and is what makes a screen
+     * reader announce the failure without the person moving focus away
+     * from the field they are about to retype in.
+     */,
+    styles: {
+      root: {
+        border: '1px solid var(--mantine-color-red-2)'
+      }
+    },
+    children: /*#__PURE__*/jsx(Text, {
+      size: "sm",
+      lh: 1.45,
+      children: texts.body
+    })
+  });
+}
+
 // The OAuth flow's pass-through screen.
 //
 // The panel is not the destination here: the user is authorizing an MCP client
@@ -2291,6 +2704,15 @@ function SignIn({
    * `false` opts out entirely, for a screen that wants the emailed code only.
    */
   socialLogin = 'auto',
+  /*
+   * The accounts that already signed in on this browser, offered before the
+   * empty field (`recent-accounts.js`). With none saved the screen is exactly
+   * the email form, so the default changes nothing for a first visit.
+   *
+   * `false` neither shows nor saves: a shared computer, or an internal panel,
+   * should not remember who used it.
+   */
+  recentAccounts = true,
   ...cardProps
 }) {
   const user = useAuthStore(s => s.user);
@@ -2304,7 +2726,18 @@ function SignIn({
   // present it again: it is the (email, code) pair the server validates.
   const [sentTo, setSentTo] = useState(null);
   const [code, setCode] = useState('');
-  const [codeError, setCodeError] = useState(null);
+  const [codeFailure, setCodeFailure] = useState(null);
+  const [isCodeResent, setIsCodeResent] = useState(false);
+  const codeInputRef = useRef(null);
+
+  // Read once, on mount: the list only changes through this screen, and
+  // every change below writes the new list back into state.
+  const [accounts, setAccounts] = useState(() => recentAccounts ? listRecentAccounts() : []);
+  const [isChoosingOther, setIsChoosingOther] = useState(false);
+  const [isManaging, setIsManaging] = useState(false);
+  const [pickingEmail, setPickingEmail] = useState(null);
+  const isShowingAccounts = recentAccounts && accounts.length > 0 && !isChoosingOther;
+  const isCodeLocked = !!codeFailure?.isLocked;
 
   // Hook that fetches the application's logo
   const applicationLogo = useApplicationLogo();
@@ -2351,18 +2784,66 @@ function SignIn({
 
   // Step 1 — ask for the code.
   const handleRequest = async values => {
-    if (sending) return;
+    if (sending) return false;
     try {
       await requestCode(values.email);
       setSentTo(values.email);
       setCode('');
-      setCodeError(null);
+      setCodeFailure(null);
       onCodeSent?.(values.email);
+      return true;
     } catch (error) {
-      onError?.(error);
+      // Nothing on the card shows this one: the app's notification is
+      // the only place the person learns the code was not sent.
+      onError?.(error, {
+        step: 'request',
+        isShownOnCard: false
+      });
+      return false;
     }
   };
 
+  // A new code, from the code step. The worker replaces the request, so the
+  // attempts start over and the previous code stops working — the notice
+  // says so, or the person keeps typing the one from the older email.
+  const handleResend = async () => {
+    const isSent = await handleRequest({
+      email: sentTo
+    });
+    setIsCodeResent(isSent);
+    if (isSent) codeInputRef.current?.focus();
+  };
+
+  // Step 1, from the list — the click on a saved account IS the request.
+  //
+  // An account that came in through a provider goes back to that provider,
+  // as long as the application still offers it. If the owner turned it off
+  // in the meantime the emailed code still works for the same email, so that
+  // is the fallback rather than a dead row.
+  const handlePick = async account => {
+    if (pickingEmail || sending) return;
+    setPickingEmail(account.email);
+    if (account.method !== 'code' && socialLogin !== false) {
+      const providers = await getSocialProviders();
+      if (providers?.some(provider => provider.provider === account.method)) {
+        // The page is leaving; the row keeps its spinner until it does.
+        startSocialSignIn(account.method, {
+          rememberAccount: recentAccounts
+        });
+        return;
+      }
+    }
+    await handleRequest({
+      email: account.email
+    });
+    setPickingEmail(null);
+  };
+  const handleForget = account => {
+    const next = forgetAccount(account.email);
+    setAccounts(next);
+    if (next.length === 0) setIsManaging(false);
+  };
+
   // Step 2 — trade the code for the session.
   //
   // The redirect is decided AND EXECUTED before onSuccess.
@@ -2380,9 +2861,15 @@ function SignIn({
   // signals that navigation was taken over — now as information, not as a
   // trap.
   const handleVerify = async value => {
-    setCodeError(null);
+    setCodeFailure(null);
+    setIsCodeResent(false);
     try {
       const result = await verifyCode(sentTo, value);
+
+      // Only now, with a session: an email that never received a valid
+      // code never becomes a suggestion. Written before the redirect,
+      // which may unmount this screen.
+      if (recentAccounts) setAccounts(rememberAccount(sentTo, 'code'));
       const target = handleRedirect ? getRedirectFromLocation(redirectOrigins) : null;
       if (target) applyRedirect(target, navigate);
       onSuccess?.(result?.user ?? null, {
@@ -2390,12 +2877,19 @@ function SignIn({
         redirectHandled: !!target
       });
     } catch (error) {
-      // The code error belongs to the field, not to the global
-      // notification: the person is looking at the eight characters they
-      // just typed.
-      setCodeError(error?.message || labels.invalidCode || 'Código inválido.');
+      // The failure belongs to this card, not to the global notification:
+      // the person is looking at the eight characters they just typed.
+      // The field goes back empty and focused, ready for the next try.
+      setCodeFailure(describeCodeFailure(error));
       setCode('');
-      onError?.(error);
+      codeInputRef.current?.focus();
+      // Still reported — an app may log it — but flagged: the card
+      // already explains it, and a notification repeating "Código
+      // inválido" in the corner would say it twice.
+      onError?.(error, {
+        step: 'verify',
+        isShownOnCard: true
+      });
     }
   };
 
@@ -2417,17 +2911,43 @@ function SignIn({
     logo: finalLogo,
     logoWidth: logoWidth,
     title: title,
-    subtitle: sentTo ? labels.codeSent || 'Digite o código que enviamos' : subtitle,
+    subtitle: sentTo ? labels.codeSent || 'Digite o código que enviamos' : isShowingAccounts ? labels.recentAccountsSubtitle || 'Escolha a conta que vai receber o código' : subtitle,
     variant: variant,
     opened: opened,
     onClose: onClose,
     modalProps: modalProps,
     ...cardProps,
-    children: !sentTo ? /*#__PURE__*/jsx("form", {
+    children: !sentTo && isShowingAccounts ? /*#__PURE__*/jsx(RecentAccounts, {
+      accounts: accounts,
+      pickingEmail: pickingEmail,
+      managing: isManaging,
+      onToggleManage: () => setIsManaging(value => !value),
+      onPick: handlePick,
+      onForget: handleForget,
+      onUseOther: () => {
+        setIsManaging(false);
+        setIsChoosingOther(true);
+      },
+      labels: labels
+    }) : !sentTo ? /*#__PURE__*/jsx("form", {
       onSubmit: form.onSubmit(handleRequest),
       children: /*#__PURE__*/jsxs(Stack, {
         gap: "md",
-        children: [/*#__PURE__*/jsx(TextInput, {
+        children: [recentAccounts && accounts.length > 0 && /*#__PURE__*/jsx(Anchor, {
+          component: "button",
+          type: "button",
+          size: "sm",
+          c: "dimmed",
+          w: "fit-content",
+          onClick: () => setIsChoosingOther(false),
+          children: /*#__PURE__*/jsxs(Group, {
+            gap: 6,
+            wrap: "nowrap",
+            children: [/*#__PURE__*/jsx(IconArrowLeft, {
+              size: 14
+            }), `${labels.savedAccounts || 'Contas salvas'} (${accounts.length})`]
+          })
+        }), /*#__PURE__*/jsx(TextInput, {
           label: labels.email || 'Email',
           placeholder: labels.emailPlaceholder || 'seu@email.com',
           type: "email",
@@ -2469,7 +2989,8 @@ function SignIn({
           children: sending ? labels.sendingCode || 'Enviando…' : labels.sendCodeButton || 'Enviar código'
         }), socialLogin !== false && /*#__PURE__*/jsx(SocialButtons, {
           labels: labels,
-          disabled: sending
+          disabled: sending,
+          rememberAccount: recentAccounts
         }), /*#__PURE__*/jsx(TermsNotice, {
           url: termsUrl,
           text: labels.termsNotice || 'Criando uma conta, você concorda com todos os nossos',
@@ -2478,7 +2999,27 @@ function SignIn({
       })
     }) : /*#__PURE__*/jsxs(Stack, {
       gap: "md",
-      children: [/*#__PURE__*/jsx(TextInput, {
+      children: [isCodeResent && /*#__PURE__*/jsx(Alert, {
+        color: "gray",
+        variant: "light",
+        radius: 0,
+        p: "xs",
+        children: /*#__PURE__*/jsxs(Text, {
+          size: "xs",
+          lh: 1.4,
+          children: [/*#__PURE__*/jsx(Text, {
+            span: true,
+            inherit: true,
+            fw: 700,
+            c: "gray.9",
+            children: labels.codeResentTitle || 'Novo código enviado.'
+          }), ' ', labels.codeResent || 'O anterior deixou de valer.']
+        })
+      }), /*#__PURE__*/jsx(CodeFailureNotice, {
+        failure: codeFailure,
+        labels: labels
+      }), /*#__PURE__*/jsx(TextInput, {
+        ref: codeInputRef,
         label: labels.codeLabel || 'Código de acesso'
         /*
          * The email is the field's description, not the subtitle:
@@ -2498,26 +3039,56 @@ function SignIn({
         value: code,
         onChange: event => {
           setCode(event.currentTarget.value);
-          if (codeError) setCodeError(null);
+          // Typing again is the correction: the notice has
+          // done its job. A locked field cannot be typed in,
+          // so an exhausted or expired notice stays.
+          if (codeFailure) setCodeFailure(null);
         },
         onKeyDown: event => {
           if (event.key === 'Enter' && code.trim()) handleVerify(code);
         },
         autoFocus: true,
         autoComplete: "one-time-code",
-        readOnly: verifying,
-        error: codeError
-      }), /*#__PURE__*/jsx(Button, {
+        readOnly: verifying
+        /*
+         * No `error` on the field: the notice above carries the
+         * failure, and a red border around an empty field turned
+         * the PLACEHOLDER red — "ABCD-EFGH" read as the code the
+         * person had typed. With the request gone there is
+         * nothing left to type into.
+         */,
+        disabled: isCodeLocked
+      }), isCodeLocked ?
+      /*#__PURE__*/
+      /*
+       * The request is gone: confirming can only fail again, so
+       * the one action that works takes the button's place.
+       */
+      jsx(Button, {
+        type: "button",
+        fullWidth: true,
+        "aria-disabled": sending,
+        onClick: sending ? undefined : handleResend,
+        leftSection: sending ? /*#__PURE__*/jsx(Loader, {
+          size: 14,
+          color: "gray.0"
+        }) : /*#__PURE__*/jsx(IconRefresh, {
+          size: 16
+        }),
+        children: sending ? labels.sendingCode || 'Enviando…' : labels.sendNewCode || 'Enviar novo código'
+      }) : /*#__PURE__*/jsx(Button, {
         type: "button",
         fullWidth: true
-        // Same reason as the previous step: `disabled` would fade
-        // the button exactly while signing in happens. With no
-        // code typed it stays genuinely disabled — there is no
-        // action in progress to hide there.
+        // Same reason as the previous step: `disabled` would
+        // fade the button exactly while signing in happens.
+        //
+        // Never disabled for an empty field either. Right
+        // after a failure the field is empty on purpose, and
+        // a grey button there read as a frozen screen; the
+        // click sends the cursor to the field instead.
         ,
         "aria-disabled": verifying,
-        disabled: !code.trim(),
-        onClick: verifying ? undefined : () => handleVerify(code),
+        onClick: verifying ? undefined : () => code.trim() ? handleVerify(code) : codeInputRef.current?.focus(),
         leftSection: verifying ? /*#__PURE__*/jsx(Loader, {
           size: 14,
           color: "gray.0"
@@ -2535,15 +3106,17 @@ function SignIn({
           onClick: () => {
             setSentTo(null);
             setCode('');
-            setCodeError(null);
+            setCodeFailure(null);
+            setIsCodeResent(false);
+            // The label promises another email: the form,
+            // not the list the person may have come from.
+            setIsChoosingOther(true);
           },
           children: labels.changeEmail || 'Usar outro e-mail'
-        }), /*#__PURE__*/jsx(Anchor, {
+        }), !isCodeLocked && /*#__PURE__*/jsx(Anchor, {
           size: "sm",
           c: "dimmed",
-          onClick: sending ? undefined : () => handleRequest({
-            email: sentTo
-          }),
+          onClick: sending ? undefined : handleResend,
           children: sending ? labels.sendingCode || 'Enviando…' : labels.resendCode || 'Reenviar código'
         })]
       })]
@@ -3527,5 +4100,5 @@ function SignOutButton({
   });
 }
 
-export { AuthCard, AuthLoaded, AuthLoading, AuthProvider, GuestOnly, IDENTITY_CHANGED_EVENT, Protect, SignIn, SignInButton, SignOutButton, SignedIn, SignedOut, SocialButtons, TOKEN_STORAGE_KEY, UserInformation, UserProfile, Wordmark, announceIdentityChange, applyRedirect, clearIdentitySwitching, configure, consumeSocialError, consumeSocialToken, decodeJWT, endImpersonation, getApiUrl, getApplicationInfo, getCurrentUser, getLinkedProviders, getRedirectFromLocation, getSession, getSocialProviders, isAuthenticated, isIdentitySwitching, isInternal, listSessions, markIdentitySwitching, pollCode, refreshToken, requestCode, resolveRedirect, revokeOtherSessions, revokeSession, setStoredToken, shouldSignOutOn401, signOut, startSocialLink, startSocialSignIn, unlinkSocialProvider, updateProfile, useApplicationLogo, useAuth, useAuthLoading, useAuthStore, useCheckToken, useImpersonation, useSession, useSessions, useSignIn, useSignOut, useUser, verifyCode };
+export { AuthCard, AuthLoaded, AuthLoading, AuthProvider, GuestOnly, IDENTITY_CHANGED_EVENT, MAX_RECENT_ACCOUNTS, Protect, RECENT_ACCOUNTS_KEY, SignIn, SignInButton, SignOutButton, SignedIn, SignedOut, SocialButtons, TOKEN_STORAGE_KEY, UserInformation, UserProfile, Wordmark, announceIdentityChange, applyRedirect, clearIdentitySwitching, configure, consumeSocialError, consumeSocialToken, decodeJWT, endImpersonation, forgetAccount, getApiUrl, getApplicationInfo, getCurrentUser, getLinkedProviders, getRedirectFromLocation, getSession, getSocialProviders, isAuthenticated, isIdentitySwitching, isInternal, listRecentAccounts, listSessions, markIdentitySwitching, pollCode, refreshToken, rememberAccount, requestCode, resolveRedirect, revokeOtherSessions, revokeSession, setStoredToken, shouldSignOutOn401, signOut, startSocialLink, startSocialSignIn, unlinkSocialProvider, updateProfile, useApplicationLogo, useAuth, useAuthLoading, useAuthStore, useCheckToken, useImpersonation, useSession, useSessions, useSignIn, useSignOut, useUser, verifyCode };
 //# sourceMappingURL=index.esm.js.map