@ciromaciel/auth-react 1.0.2 → 1.1.0

package/dist/index.js

@@ -9,6 +9,143 @@ var core = require('@mantine/core');
 var form = require('@mantine/form');
 var iconsReact = require('@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
  * another in the middle of a live session.
@@ -106,7 +243,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 = [];
@@ -585,14 +727,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());
 };
 
@@ -611,6 +761,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.
    *
@@ -643,6 +798,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}` : ''}`);
@@ -661,6 +820,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}`);
@@ -2029,6 +2191,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__*/jsxRuntime.jsxs(core.Stack, {
+    gap: "md",
+    children: [/*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
+      gap: 8,
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+        justify: "space-between",
+        align: "baseline",
+        wrap: "nowrap",
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Text, {
+          fz: 11,
+          fw: 800,
+          lh: 1,
+          tt: "uppercase",
+          lts: "1.5px",
+          c: "gray.4",
+          children: labels.recentAccountsHeading || 'Contas neste navegador'
+        }), /*#__PURE__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsx(core.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__*/jsxRuntime.jsx(core.Text, {
+              fz: 14,
+              fw: 600,
+              c: "gray.9",
+              truncate: true,
+              children: account.email
+            }),
+            description: description,
+            leftSection: /*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+              radius: 0,
+              size: 36,
+              color: "gray",
+              variant: "light",
+              children: initialsOf(account.email)
+            }),
+            rightSection: managing ? /*#__PURE__*/jsxRuntime.jsx(core.ActionIcon, {
+              variant: "subtle",
+              color: "gray",
+              "aria-label": `${labels.removeAccount || 'Remover'} ${account.email}`,
+              onClick: () => onForget(account),
+              children: /*#__PURE__*/jsxRuntime.jsx(iconsReact.IconX, {
+                size: 16
+              })
+            }) : isPicking ? /*#__PURE__*/jsxRuntime.jsx(core.Loader, {
+              size: 14
+            }) : /*#__PURE__*/jsxRuntime.jsx(iconsReact.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__*/jsxRuntime.jsx(core.Button, {
+      type: "button",
+      variant: "default",
+      fullWidth: true,
+      "aria-disabled": busy,
+      onClick: busy ? undefined : onUseOther,
+      children: labels.useOtherEmail || 'Usar outro e-mail'
+    })]
+  });
+}
+
 const MARKS = {
   google: iconsReact.IconBrandGoogle
 };
@@ -2050,7 +2362,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] = react.useState(null);
   const [leaving, setLeaving] = react.useState(null);
@@ -2094,7 +2410,8 @@ function SocialButtons({
           // `oauth_states` row.
           setLeaving(provider.provider);
           startSocialSignIn(provider.provider, {
-            redirect
+            redirect,
+            rememberAccount
           });
         },
         children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
@@ -2293,6 +2610,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);
@@ -2308,6 +2634,14 @@ function SignIn({
   const [code, setCode] = react.useState('');
   const [codeError, setCodeError] = react.useState(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] = react.useState(() => recentAccounts ? listRecentAccounts() : []);
+  const [isChoosingOther, setIsChoosingOther] = react.useState(false);
+  const [isManaging, setIsManaging] = react.useState(false);
+  const [pickingEmail, setPickingEmail] = react.useState(null);
+  const isShowingAccounts = recentAccounts && accounts.length > 0 && !isChoosingOther;
+
   // Hook that fetches the application's logo
   const applicationLogo = useApplicationLogo();
   const finalLogo = logo || applicationLogo || /*#__PURE__*/jsxRuntime.jsx(Wordmark, {});
@@ -2365,6 +2699,36 @@ function SignIn({
     }
   };
 
+  // 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.
@@ -2385,6 +2749,11 @@ function SignIn({
     setCodeError(null);
     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, {
@@ -2419,17 +2788,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__*/jsxRuntime.jsx("form", {
+    children: !sentTo && isShowingAccounts ? /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx("form", {
       onSubmit: form$1.onSubmit(handleRequest),
       children: /*#__PURE__*/jsxRuntime.jsxs(core.Stack, {
         gap: "md",
-        children: [/*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
+        children: [recentAccounts && accounts.length > 0 && /*#__PURE__*/jsxRuntime.jsx(core.Anchor, {
+          component: "button",
+          type: "button",
+          size: "sm",
+          c: "dimmed",
+          w: "fit-content",
+          onClick: () => setIsChoosingOther(false),
+          children: /*#__PURE__*/jsxRuntime.jsxs(core.Group, {
+            gap: 6,
+            wrap: "nowrap",
+            children: [/*#__PURE__*/jsxRuntime.jsx(iconsReact.IconArrowLeft, {
+              size: 14
+            }), `${labels.savedAccounts || 'Contas salvas'} (${accounts.length})`]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(core.TextInput, {
           label: labels.email || 'Email',
           placeholder: labels.emailPlaceholder || 'seu@email.com',
           type: "email",
@@ -2471,7 +2866,8 @@ function SignIn({
           children: sending ? labels.sendingCode || 'Enviando…' : labels.sendCodeButton || 'Enviar código'
         }), socialLogin !== false && /*#__PURE__*/jsxRuntime.jsx(SocialButtons, {
           labels: labels,
-          disabled: sending
+          disabled: sending,
+          rememberAccount: recentAccounts
         }), /*#__PURE__*/jsxRuntime.jsx(TermsNotice, {
           url: termsUrl,
           text: labels.termsNotice || 'Criando uma conta, você concorda com todos os nossos',
@@ -2538,6 +2934,9 @@ function SignIn({
             setSentTo(null);
             setCode('');
             setCodeError(null);
+            // 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, {
@@ -3535,7 +3934,9 @@ exports.AuthLoading = AuthLoading;
 exports.AuthProvider = AuthProvider;
 exports.GuestOnly = GuestOnly;
 exports.IDENTITY_CHANGED_EVENT = IDENTITY_CHANGED_EVENT;
+exports.MAX_RECENT_ACCOUNTS = MAX_RECENT_ACCOUNTS;
 exports.Protect = Protect;
+exports.RECENT_ACCOUNTS_KEY = RECENT_ACCOUNTS_KEY;
 exports.SignIn = SignIn;
 exports.SignInButton = SignInButton;
 exports.SignOutButton = SignOutButton;
@@ -3554,6 +3955,7 @@ exports.consumeSocialError = consumeSocialError;
 exports.consumeSocialToken = consumeSocialToken;
 exports.decodeJWT = decodeJWT;
 exports.endImpersonation = endImpersonation;
+exports.forgetAccount = forgetAccount;
 exports.getApiUrl = getApiUrl;
 exports.getApplicationInfo = getApplicationInfo;
 exports.getCurrentUser = getCurrentUser;
@@ -3564,10 +3966,12 @@ exports.getSocialProviders = getSocialProviders;
 exports.isAuthenticated = isAuthenticated;
 exports.isIdentitySwitching = isIdentitySwitching;
 exports.isInternal = isInternal;
+exports.listRecentAccounts = listRecentAccounts;
 exports.listSessions = listSessions;
 exports.markIdentitySwitching = markIdentitySwitching;
 exports.pollCode = pollCode;
 exports.refreshToken = refreshToken;
+exports.rememberAccount = rememberAccount;
 exports.requestCode = requestCode;
 exports.resolveRedirect = resolveRedirect;
 exports.revokeOtherSessions = revokeOtherSessions;