@ciromaciel/auth-react 1.1.0 → 1.2.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
 

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.
@@ -2518,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
@@ -2630,7 +2726,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 +2737,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();
@@ -2685,18 +2784,36 @@ 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,
@@ -2744,7 +2861,8 @@ 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);
 
@@ -2759,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
+      });
     }
   };
 
@@ -2874,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:
@@ -2894,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"
@@ -2931,18 +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'
         })]
       })]