@ciromaciel/auth-react 1.2.0 → 1.3.0

package/README.md

@@ -121,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

@@ -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();
@@ -2782,6 +2865,32 @@ 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 false;
@@ -2841,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);
   };
 
@@ -2869,7 +2981,10 @@ function SignIn({
       // 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, {
@@ -4100,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