@ciromaciel/auth-react 1.2.0 → 1.4.0

package/README.md

@@ -121,18 +121,48 @@ 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.
+
+### The account card
+
+`<UserInformation />` is what opens from the footer of a sidebar: who is signed in, in which
+organization and on which plan, then one list of actions with "Sair" last.
+
+```jsx
+<UserInformation
+    user={user}
+    signOut={signOut}
+    onAccountClick={openAccount}
+    onBillingClick={openBilling}
+    items={[{ id: 'docs', label: 'Documentação', icon: IconFileText, onClick: openDocs }]}
+    plan={{ name: 'Pro', used: 3, limit: 9, unit: 'projetos', onClick: openPlans }}
+    organization={{ name: 'Acme', role: 'owner' }}
+/>
+```
+
+- The title is the user's name, or the email when there is none — never both saying the same
+  thing.
+- `items` are your app's own rows, passed as data (`{ id, label, icon, onClick }`), shown in their
+  own group after billing. The component takes no JSX, so every app's card keeps the same shape.
+- `plan` and `organization` draw the context strip; leave them out and it is not drawn.
+  `limit: null` hides the usage bar.
+- `branded={false}` removes the "Protegido por Auth" line.
 
 ## API
 
@@ -142,7 +172,7 @@ Building your own screen? `listRecentAccounts()`, `rememberAccount(email, method
 | ------------------------- | ------------------------------------------------------------ |
 | `<SignIn />`              | The whole way in: asks for the email, then takes the code     |
 | `<UserProfile />`         | User profile management modal                                 |
-| `<UserInformation />`     | User details and account menu                                 |
+| `<UserInformation />`     | The account card: who, where, which plan, then the actions    |
 | `<SocialButtons />`       | Sign-in buttons for the providers the application enabled     |
 | `<AuthCard />`            | The card shell the screens are built on                       |
 | `<Wordmark />`            | Application wordmark                                          |