@ciromaciel/auth-react 1.1.0 → 1.3.0

package/dist/index.js

@@ -112,6 +112,28 @@ function forgetAccount(email) {
   return next;
 }
 
+/**
+ * Replaces the local copy with the list the worker returned.
+ *
+ * The worker's list is the one every panel shares, so when it has accounts it
+ * wins: an account removed on another panel must not come back from this
+ * panel's stale copy. An EMPTY answer does not wipe the local one — it is what
+ * a browser that signed in before the shared list existed gets, and those
+ * shortcuts are still true.
+ *
+ * @returns the list to show
+ */
+function adoptRecentAccounts(remote) {
+  if (!Array.isArray(remote) || remote.length === 0) return listRecentAccounts();
+  const next = remote.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);
+  writeRecentAccounts(next);
+  return next;
+}
+
 /** Records the provider this tab is leaving for. */
 function markSocialDeparture(provider) {
   try {
@@ -693,6 +715,64 @@ const updateProfile = async data => {
   });
 };
 
+/*--- Recent accounts ------------------------------------------------------*/
+
+/*
+ * The server's copy of this browser's sign-in shortcuts.
+ *
+ * `localStorage` is per origin, so a list kept only there stayed on the panel
+ * where the person signed in. The worker keeps it in an HttpOnly cookie on its
+ * own host, which every panel of the application reaches — and answers only to
+ * the origins the application allows (`routes/recent-accounts.js`).
+ *
+ * All three fail soft: the shortcuts are a convenience, and a network error or
+ * an origin the worker refuses must never cost the sign-in. `null` means "no
+ * answer", which the screen reads as "keep what you have".
+ */
+
+/** The list for this application, or `null` when the worker did not answer. */
+const fetchRecentAccounts = async () => {
+  try {
+    const response = await api('/auth/recent-accounts');
+    return Array.isArray(response?.items) ? response.items : null;
+  } catch {
+    return null;
+  }
+};
+
+/**
+ * Records the account of the CURRENT session. The worker reads the email from
+ * the session, never from here. `keepalive` because the screen is usually
+ * navigating away at this very moment.
+ */
+const saveRecentAccount = async (method = 'code') => {
+  try {
+    const response = await api('/auth/recent-accounts', {
+      method: 'POST',
+      body: JSON.stringify({
+        method
+      }),
+      keepalive: true
+    });
+    return Array.isArray(response?.items) ? response.items : null;
+  } catch {
+    return null;
+  }
+};
+
+/** Takes one account off this browser's list, on every panel. */
+const deleteRecentAccount = async email => {
+  try {
+    await api(`/auth/recent-accounts/${encodeURIComponent(email)}`, {
+      method: 'DELETE',
+      keepalive: true
+    });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
 /*--- Social sign-in -------------------------------------------------------*/
 
 /**
@@ -801,6 +881,9 @@ const consumeSocialToken = () => {
   if (provider) {
     const email = decodeJWT(token)?.email;
     if (email) rememberAccount(email, provider);
+    // The shared copy, so the other panels learn it too. Not awaited: the
+    // token is already stored, and the sign-in must not wait on a shortcut.
+    saveRecentAccount(provider);
   }
   params.delete('token');
   const rest = params.toString();
@@ -2520,6 +2603,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__*/jsxRuntime.jsx(core.Alert, {
+    color: "red",
+    variant: "light",
+    radius: 0,
+    icon: /*#__PURE__*/jsxRuntime.jsx(iconsReact.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__*/jsxRuntime.jsx(core.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
@@ -2632,7 +2811,9 @@ function SignIn({
   // present it again: it is the (email, code) pair the server validates.
   const [sentTo, setSentTo] = react.useState(null);
   const [code, setCode] = react.useState('');
-  const [codeError, setCodeError] = react.useState(null);
+  const [codeFailure, setCodeFailure] = react.useState(null);
+  const [isCodeResent, setIsCodeResent] = react.useState(false);
+  const codeInputRef = react.useRef(null);
 
   // Read once, on mount: the list only changes through this screen, and
   // every change below writes the new list back into state.
@@ -2641,6 +2822,7 @@ function SignIn({
   const [isManaging, setIsManaging] = react.useState(false);
   const [pickingEmail, setPickingEmail] = react.useState(null);
   const isShowingAccounts = recentAccounts && accounts.length > 0 && !isChoosingOther;
+  const isCodeLocked = !!codeFailure?.isLocked;
 
   // Hook that fetches the application's logo
   const applicationLogo = useApplicationLogo();
@@ -2685,20 +2867,64 @@ function SignIn({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- redirectOrigins enters through the serialized key above
   }, [authLoading, user, authenticatedRedirect, handleRedirect, redirectOriginsKey, navigate]);
 
+  /*
+   * The shared list, from the worker.
+   *
+   * The local copy renders at once; this replaces it when the answer
+   * arrives. That is what makes an account used on the Auth panel appear
+   * on Hoster: `localStorage` never crosses between the two origins.
+   *
+   * If the person has already started typing an email, the list does not
+   * yank the form away from under them — it only feeds the "Contas salvas"
+   * link, one click away.
+   */
+  react.useEffect(() => {
+    if (!recentAccounts) return;
+    let isActive = true;
+    fetchRecentAccounts().then(remote => {
+      if (!isActive || remote === null) return;
+      const next = adoptRecentAccounts(remote);
+      if (form$1.isDirty()) setIsChoosingOther(true);
+      setAccounts(next);
+    });
+    return () => {
+      isActive = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- once per mount, like the local read
+  }, [recentAccounts]);
+
   // 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,
@@ -2726,6 +2952,9 @@ function SignIn({
   const handleForget = account => {
     const next = forgetAccount(account.email);
     setAccounts(next);
+    // On every panel, not just this one. The local removal above already
+    // took it off this screen, so a failure here costs nothing visible.
+    deleteRecentAccount(account.email);
     if (next.length === 0) setIsManaging(false);
   };
 
@@ -2746,14 +2975,18 @@ 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'));
+      if (recentAccounts) {
+        setAccounts(rememberAccount(sentTo, 'code'));
+        saveRecentAccount('code');
+      }
       const target = handleRedirect ? getRedirectFromLocation(redirectOrigins) : null;
       if (target) applyRedirect(target, navigate);
       onSuccess?.(result?.user ?? null, {
@@ -2761,12 +2994,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
+      });
     }
   };
 
@@ -2876,7 +3116,27 @@ function SignIn({
       })
     }) : /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
       gap: "md",
-      children: [/*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
+      children: [isCodeResent && /*#__PURE__*/jsxRuntime.jsx(core.Alert, {
+        color: "gray",
+        variant: "light",
+        radius: 0,
+        p: "xs",
+        children: /*#__PURE__*/jsxRuntime.jsxs(core.Text, {
+          size: "xs",
+          lh: 1.4,
+          children: [/*#__PURE__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsx(CodeFailureNotice, {
+        failure: codeFailure,
+        labels: labels
+      }), /*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
+        ref: codeInputRef,
         label: labels.codeLabel || 'Código de acesso'
         /*
          * The email is the field's description, not the subtitle:
@@ -2896,26 +3156,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__*/jsxRuntime.jsx(core.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.
+       */
+      jsxRuntime.jsx(core.Button, {
+        type: "button",
+        fullWidth: true,
+        "aria-disabled": sending,
+        onClick: sending ? undefined : handleResend,
+        leftSection: sending ? /*#__PURE__*/jsxRuntime.jsx(core.Loader, {
+          size: 14,
+          color: "gray.0"
+        }) : /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconRefresh, {
+          size: 16
+        }),
+        children: sending ? labels.sendingCode || 'Enviando…' : labels.sendNewCode || 'Enviar novo código'
+      }) : /*#__PURE__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsx(core.Loader, {
           size: 14,
           color: "gray.0"
@@ -2933,18 +3223,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__*/jsxRuntime.jsx(core.Anchor, {
+        }), !isCodeLocked && /*#__PURE__*/jsxRuntime.jsx(core.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'
         })]
       })]
@@ -3947,6 +4236,7 @@ exports.TOKEN_STORAGE_KEY = TOKEN_STORAGE_KEY;
 exports.UserInformation = UserInformation;
 exports.UserProfile = UserProfile;
 exports.Wordmark = Wordmark;
+exports.adoptRecentAccounts = adoptRecentAccounts;
 exports.announceIdentityChange = announceIdentityChange;
 exports.applyRedirect = applyRedirect;
 exports.clearIdentitySwitching = clearIdentitySwitching;
@@ -3954,7 +4244,9 @@ exports.configure = configure;
 exports.consumeSocialError = consumeSocialError;
 exports.consumeSocialToken = consumeSocialToken;
 exports.decodeJWT = decodeJWT;
+exports.deleteRecentAccount = deleteRecentAccount;
 exports.endImpersonation = endImpersonation;
+exports.fetchRecentAccounts = fetchRecentAccounts;
 exports.forgetAccount = forgetAccount;
 exports.getApiUrl = getApiUrl;
 exports.getApplicationInfo = getApplicationInfo;
@@ -3976,6 +4268,7 @@ exports.requestCode = requestCode;
 exports.resolveRedirect = resolveRedirect;
 exports.revokeOtherSessions = revokeOtherSessions;
 exports.revokeSession = revokeSession;
+exports.saveRecentAccount = saveRecentAccount;
 exports.setStoredToken = setStoredToken;
 exports.shouldSignOutOn401 = shouldSignOutOn401;
 exports.signOut = signOut;