@ciromaciel/auth-react 1.1.0 → 1.3.0

package/README.md

@@ -77,7 +77,10 @@ Or use the ready-made screen:
     authenticatedRedirect="/" // where to send someone who already has a session
     onCodeSent={email => notify(`Code sent to ${email}`)}
     onSuccess={(user, { result, redirectHandled }) => notify(`Welcome ${user?.email}`)}
-    onError={error => notify(error.message)} // error.code carries the stable identifier
+    onError={(error, { isShownOnCard }) => {
+        // A wrong, expired or exhausted code is already explained on the card
+        if (!isShownOnCard) notify(error.message) // error.code carries the stable identifier
+    }}
 />
 ```
 
@@ -87,6 +90,10 @@ Or use the ready-made screen:
   `redirectOrigins` adds domains and `handleRedirect={false}` hands control back to the app.
 - A wrong code fails with `error.details.attemptsLeft`. Five wrong tries destroy the request and
   the person asks for a new code.
+- On the code step the card explains every failure itself: how many tries are left, or, once the
+  code is exhausted or expired, a button that sends a new one. `onError` still fires, with a second
+  argument `{ step: 'request' | 'verify', isShownOnCard }`; skip your own notification when
+  `isShownOnCard` is `true`, or the person reads the same failure twice.
 
 ### Social sign-in
 
@@ -114,18 +121,23 @@ email form.
 - An account is saved only after a session exists: the code confirmed, or the provider's token
   back. A mistyped email never becomes a suggestion.
 - The list keeps the five most recent accounts. Each entry holds the email, the way in and the
-  time of the last sign-in. It lives in `localStorage` under `auth:recent-accounts`, so each
-  origin keeps its own list.
-- Signing out keeps the list. "Gerenciar" on the screen removes an account; nothing else about
-  that account changes.
+  time of the last sign-in.
+- Every app of the same application shares the list, even across origins: the Auth worker keeps
+  it in an HttpOnly cookie on its own host and answers only to the origins the application
+  allows. A copy in `localStorage` (`auth:recent-accounts`) renders at once while the shared list
+  loads, and stands in when the worker cannot be reached.
+- Signing out keeps the list. "Gerenciar" on the screen removes an account from every app of the
+  application; nothing else about that account changes.
 
 ```jsx
 <SignIn />                         {/* shows and saves recent accounts */}
 <SignIn recentAccounts={false} />  {/* shared computers: neither shows nor saves */}
 ```
 
-Building your own screen? `listRecentAccounts()`, `rememberAccount(email, method)` and
-`forgetAccount(email)` read and write the same list.
+Building your own screen? `fetchRecentAccounts()`, `saveRecentAccount(method)` and
+`deleteRecentAccount(email)` talk to the shared list; `listRecentAccounts()`,
+`rememberAccount(email, method)`, `forgetAccount(email)` and `adoptRecentAccounts(list)` manage
+the local copy.
 
 ## API
 

package/dist/index.esm.js

@@ -1,11 +1,11 @@
 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, Anchor, NavLink, ActionIcon, Loader, Avatar, Button, Divider, TextInput, Center, Box, Collapse, FileButton, Tooltip, ThemeIcon, Badge, rem } 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 { IconX, IconArrowRight, IconBrandGoogle, IconArrowLeft, 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.
@@ -110,6 +110,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 {
@@ -691,6 +713,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 -------------------------------------------------------*/
 
 /**
@@ -799,6 +879,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();
@@ -2518,6 +2601,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
@@ -2630,7 +2809,9 @@ 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.
@@ -2639,6 +2820,7 @@ function SignIn({
   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();
@@ -2683,20 +2865,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.
+   */
+  useEffect(() => {
+    if (!recentAccounts) return;
+    let isActive = true;
+    fetchRecentAccounts().then(remote => {
+      if (!isActive || remote === null) return;
+      const next = adoptRecentAccounts(remote);
+      if (form.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,
@@ -2724,6 +2950,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);
   };
 
@@ -2744,14 +2973,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, {
@@ -2759,12 +2992,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
+      });
     }
   };
 
@@ -2874,7 +3114,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:
@@ -2894,26 +3154,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"
@@ -2931,18 +3221,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'
         })]
       })]
@@ -3926,5 +4215,5 @@ function SignOutButton({
   });
 }
 
-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 };
+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, adoptRecentAccounts, announceIdentityChange, applyRedirect, clearIdentitySwitching, configure, consumeSocialError, consumeSocialToken, decodeJWT, deleteRecentAccount, endImpersonation, fetchRecentAccounts, forgetAccount, getApiUrl, getApplicationInfo, getCurrentUser, getLinkedProviders, getRedirectFromLocation, getSession, getSocialProviders, isAuthenticated, isIdentitySwitching, isInternal, listRecentAccounts, listSessions, markIdentitySwitching, pollCode, refreshToken, rememberAccount, requestCode, resolveRedirect, revokeOtherSessions, revokeSession, saveRecentAccount, setStoredToken, shouldSignOutOn401, signOut, startSocialLink, startSocialSignIn, unlinkSocialProvider, updateProfile, useApplicationLogo, useAuth, useAuthLoading, useAuthStore, useCheckToken, useImpersonation, useSession, useSessions, useSignIn, useSignOut, useUser, verifyCode };
 //# sourceMappingURL=index.esm.js.map