ab-ecosystem-sso 0.1.19 โ†’ 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -6,6 +6,9 @@ Drop-in React auth & account UI for the partner-ecosystem **Auth-as-a-Service**
6
6
  - ๐ŸŽจ Self-contained, theme-aware CSS that **won't leak into or be overridden by** your app.
7
7
  - ๐ŸŒ— Built-in **light and dark mode** โ€” per component, via a single `mode` prop.
8
8
  - ๐Ÿ”Œ Use it declaratively (`<AccountSettings />`) or imperatively (`openAccountSettings()`).
9
+ - ๐Ÿ‘ฅ **Multi-account aware** โ€” account picker, account switching, invitations, roles & members.
10
+ - ๐Ÿ”‘ **Stores the session token for you** and falls back to it everywhere, so `token` props are optional.
11
+ - ๐Ÿงญ **Ships its own routes** โ€” spread them into your router, or let the package match the path.
9
12
  - ๐Ÿงฉ Every network call also available as a plain function for custom UIs.
10
13
 
11
14
  ---
@@ -14,8 +17,13 @@ Drop-in React auth & account UI for the partner-ecosystem **Auth-as-a-Service**
14
17
 
15
18
  - [Installation](#installation)
16
19
  - [Configuration basics](#configuration-basics)
20
+ - [Token handling](#token-handling) โ€” storage, `getAuthHeader`, `authFetch`
21
+ - [Routes](#routes) โ€” `ssoRoutes` ยท `SsoAuthRoutes` ยท `SsoAuthPage`
17
22
  - [Auth screens](#auth-screens) โ€” `Login` ยท `Signup` ยท `ForgotPassword` ยท `VerifyEmail`
18
23
  - [Session management](#session-management) โ€” `SessionProvider`, enforce subscription
24
+ - [Multiple accounts](#multiple-accounts) โ€” account picker, switching, revoked access
25
+ - [Invitations](#invitations) โ€” `AcceptInvite`, invite links
26
+ - [Team administration](#team-administration) โ€” members ยท roles ยท invitations
19
27
  - [Account Settings modal](#account-settings-modal) โ€” `openAccountSettings` / `AccountSettings`
20
28
  - [Logout](#logout) โ€” `logout` ยท `LogoutButton` ยท `logoutApi`
21
29
  - [Fetching the current user](#fetching-the-current-user) โ€” `getUser`
@@ -61,6 +69,155 @@ You own the token: persist it (e.g. `localStorage`) on `onSuccess`, pass it back
61
69
 
62
70
  ---
63
71
 
72
+ ## Token handling
73
+
74
+ **The package stores the session token for you.** Every screen that receives one โ€” login, 2FA, account selection, account switching, signup, invite acceptance, magic links โ€” writes it to `localStorage`, and every call the package makes falls back to it. So `token` props are optional now, and this is enough:
75
+
76
+ ```tsx
77
+ <Login projectId="your-project-id" /> // token stored on success
78
+ <AccountSettings open onOpenChange={setOpen} projectId="your-project-id" />
79
+ <SessionProvider projectId="your-project-id">{children}</SessionProvider>
80
+ ```
81
+
82
+ It's cleared on `logout()`, on `LogoutButton`, and whenever a session turns out to be invalid. Account switching **replaces** it, so later calls can't keep acting as the previous account.
83
+
84
+ ```ts
85
+ import { configureTokenStorage } from "ab-ecosystem-sso";
86
+
87
+ configureTokenStorage({ key: "authToken" }); // match an existing app's key
88
+ configureTokenStorage({ storage: "sessionStorage" }); // per-tab instead of persistent
89
+ configureTokenStorage({ enabled: false }); // opt out; you handle the token
90
+ ```
91
+
92
+ | Option | Default | Notes |
93
+ | --- | --- | --- |
94
+ | `key` | `"ab-sso:accessToken"` | Namespaced on purpose โ€” a bare `accessToken` collides with whatever your app already keeps under that name. |
95
+ | `storage` | `"localStorage"` | Or `"sessionStorage"`, `"memory"`, `"none"`. |
96
+ | `enabled` | `true` | `false` turns off both reading and writing. |
97
+
98
+ Per component, `persistToken={false}` skips the write for that screen and `tokenStorageKey` overrides the key.
99
+
100
+ > A bearer token in `localStorage` is readable by any script on your origin. That's the same thing most hosts were already doing by hand, but it is now the **default** โ€” switch to `sessionStorage`, or turn it off, if your threat model says otherwise.
101
+
102
+ Reading it back, and the helpers for your own calls:
103
+
104
+ ```ts
105
+ import { getStoredToken, clearStoredToken, onStoredTokenChange } from "ab-ecosystem-sso";
106
+
107
+ getStoredToken(); // "" when signed out
108
+ clearStoredToken(); // sign out locally
109
+ onStoredTokenChange((t) => โ€ฆ); // fires on login / switch / logout (this tab)
110
+ ```
111
+
112
+ Storage access throws in private windows and with site data blocked, so every read and write is guarded and falls back to an in-memory value for the life of the page โ€” it degrades, it never throws at you.
113
+
114
+ ### Sending the token to your own backend
115
+
116
+ The package **does not** patch your app's HTTP client, and that's deliberate: a blanket `fetch` patch would attach your bearer token to every outbound request on the page, third-party scripts included. Three explicit options instead, in order of how much they touch:
117
+
118
+ **1. `getAuthHeader()`** โ€” one line in whatever client you already have:
119
+
120
+ ```ts
121
+ import { getAuthHeader } from "ab-ecosystem-sso";
122
+
123
+ axios.interceptors.request.use((cfg) => {
124
+ cfg.headers = { ...cfg.headers, ...getAuthHeader() };
125
+ return cfg;
126
+ });
127
+ ```
128
+
129
+ **2. `authFetch()`** โ€” a `fetch` wrapper that also handles the 401 split:
130
+
131
+ ```ts
132
+ import { authFetch, configureAuthHandlers } from "ab-ecosystem-sso";
133
+
134
+ configureAuthHandlers({
135
+ onUnauthorized: () => navigate("/login"), // session gone
136
+ onAccountAccessLost: () => showAccountPicker(), // A403: this account only
137
+ });
138
+
139
+ const res = await authFetch("/api/orders");
140
+ ```
141
+
142
+ That second handler is the real win here: it's what makes ["access to one account was revoked"](#when-access-to-one-account-is-revoked) behave correctly for *your* endpoints too, not just ours. An `Authorization` header you set yourself is never overwritten, and the response body reaches you unread.
143
+
144
+ **3. `installAuthInterceptor({ origins })`** โ€” for apps with too many call sites to touch. It patches `fetch` and `XMLHttpRequest`, but only for an explicit allowlist:
145
+
146
+ ```ts
147
+ import { installAuthInterceptor } from "ab-ecosystem-sso";
148
+
149
+ const stop = installAuthInterceptor({
150
+ origins: ["self", "https://api.example.com"], // "self" = your own origin (covers /api/โ€ฆ)
151
+ onUnauthorized: () => navigate("/login"),
152
+ onAccountAccessLost: () => showAccountPicker(),
153
+ });
154
+ ```
155
+
156
+ There is no wildcard and the allowlist is **required** โ€” it throws without one. Anything not listed is left completely alone, which is what keeps the token away from analytics, CDNs and payment widgets. `stop()` restores the originals.
157
+
158
+ ---
159
+
160
+ ## Routes
161
+
162
+ Six routes are load-bearing for any app embedding this package:
163
+
164
+ | Path | Screen | Reached by |
165
+ | --- | --- | --- |
166
+ | `/login` | `Login` | your app, and the package's own redirects |
167
+ | `/signup` | `Signup` | the login screen |
168
+ | `/forgot-password` | `ForgotPassword` | the login screen |
169
+ | `/reset-password` | `ForgotPassword` (reset step) | the emailed reset link |
170
+ | `/verify/:token` | `VerifyEmail` | the emailed verification link |
171
+ | `/accept-invite` | `AcceptInvite` | invite links (`inviteLinkBase`) |
172
+
173
+ A library can't discover your app's routes โ€” react-router keeps no readable registry at runtime, and Next's routes are filesystem and build-time โ€” so the package publishes what it expects and gives you three ways to satisfy it.
174
+
175
+ **Already have a router?** Spread the route objects in, so the screens sit inside your layouts and guards:
176
+
177
+ ```tsx
178
+ import { ssoRoutes } from "ab-ecosystem-sso";
179
+ import { useNavigate } from "react-router-dom";
180
+
181
+ const navigate = useNavigate();
182
+ createBrowserRouter([
183
+ ...ssoRoutes({ projectId: "your-project-id", onNavigate: navigate, redirectTo: "/dashboard" }),
184
+ ...appRoutes,
185
+ ]);
186
+ ```
187
+
188
+ Pass `onNavigate` so the screens move through *your* router โ€” the default `history.pushState` won't re-render it. Token-bearing routes are registered both bare and with a `:token` segment, since links arrive both ways.
189
+
190
+ **No router?** Mount the whole set and let the package match the path:
191
+
192
+ ```tsx
193
+ import { SsoAuthRoutes } from "ab-ecosystem-sso";
194
+
195
+ <SsoAuthRoutes projectId="your-project-id" redirectTo="/dashboard" fallback={<App />} />
196
+ ```
197
+
198
+ **File-based routing (Next)?** One tiny file per route:
199
+
200
+ ```tsx
201
+ // app/login/page.tsx
202
+ import { SsoAuthPage } from "ab-ecosystem-sso";
203
+ export default () => <SsoAuthPage screen="login" projectId="your-project-id" />;
204
+ ```
205
+
206
+ All three wire the screens to each other, store the token on success, and then leave for `redirectTo` (default `/`). A `?next=` parameter wins over `redirectTo` โ€” and is rejected unless it's a same-site path, so the login screen can't be turned into an open redirect. Replace the whole behaviour with `onAuthenticated`.
207
+
208
+ Paths aren't fixed:
209
+
210
+ ```ts
211
+ import { configureSsoRoutes } from "ab-ecosystem-sso";
212
+ configureSsoRoutes({ login: "/sign-in", acceptInvite: "/invite" });
213
+ ```
214
+
215
+ `basePath="/auth"` mounts everything under a prefix. `getSsoRoutes()` returns what's in effect, and `SessionProvider` uses it for its default redirect (with `?next=` back to where the user was), so a remapped login route is honoured everywhere.
216
+
217
+ > โš ๏ธ **Your server has to serve the app shell for these paths.** If `/accept-invite` isn't rewritten to `index.html`, the user gets a 404 before any JavaScript runs, and no client-side package can fix that. For a static SPA host that's a catch-all rewrite to `/index.html`; on nginx, `try_files $uri /index.html;`.
218
+
219
+ ---
220
+
64
221
  ## Auth screens
65
222
 
66
223
  ### `Login`
@@ -182,8 +339,10 @@ On success it calls `onVerified` (send the user to login) and shows a **Continue
182
339
  | `onError` | `(error: Error) => void` | On failure. |
183
340
  | `classNames` | `AuthClassNames` | Per-element class overrides: `card`, `input`, `label`, `button`, `link`, `captcha`, `error`, โ€ฆ |
184
341
  | `mode` | `"light" \| "dark"` | Colour scheme. Default `"light"`. See [Light & dark mode](#light--dark-mode). |
342
+ | `persistToken` | `boolean` | Store the issued token. Default `true`. See [Token handling](#token-handling). |
343
+ | `tokenStorageKey` | `string` | Storage key override for this screen. |
185
344
 
186
- Per-screen extras: `Login` adds `onForgotPassword` / `onSignupClick`; `Signup` adds `onLoginClick` / `countries`; `ForgotPassword` adds `onBackToLogin` / `resetToken` / `onResetSuccess`; `VerifyEmail` adds `token` / `onVerified` / `onLoginClick` / `onSignupClick` (and has no `onSuccess`, since no session is created).
345
+ Per-screen extras: `Login` adds `onForgotPassword` / `onSignupClick` / `client` (see [Multiple accounts](#multiple-accounts)); `Signup` adds `inviteToken` / `inviteEmail` (see [Invitations](#invitations)); `Signup` adds `onLoginClick` / `countries`; `ForgotPassword` adds `onBackToLogin` / `resetToken` / `onResetSuccess`; `VerifyEmail` adds `token` / `onVerified` / `onLoginClick` / `onSignupClick` (and has no `onSuccess`, since no session is created).
187
346
 
188
347
  ---
189
348
 
@@ -194,12 +353,9 @@ Wrap authenticated areas in `SessionProvider`. It validates the token against `/
194
353
  ```tsx
195
354
  import { SessionProvider } from "ab-ecosystem-sso";
196
355
 
197
- <SessionProvider
198
- projectId="your-project-id"
199
- token={token}
200
- apiBaseUrl="https://your-api"
201
- onSessionInvalid={() => navigate("/login")}
202
- >
356
+ // `token` and `onSessionInvalid` are both optional: it reads the stored token
357
+ // and falls back to redirecting to the login route.
358
+ <SessionProvider projectId="your-project-id" apiBaseUrl="https://your-api">
203
359
  <Dashboard />
204
360
  </SessionProvider>
205
361
  ```
@@ -207,10 +363,13 @@ import { SessionProvider } from "ab-ecosystem-sso";
207
363
  | Prop | Type | Notes |
208
364
  | --- | --- | --- |
209
365
  | `projectId` | `string` | **Required.** |
210
- | `token` | `string \| null` | Null โ‡’ treated as signed-out. |
211
- | `onSessionInvalid` | `() => void` | Called on invalid/expired session or logout. |
366
+ | `token` | `string \| null` | **Omit** to use the stored token; `null` states explicitly that there's no session. |
367
+ | `onSessionInvalid` | `() => void` | Called on invalid/expired session or logout. Optional โ€” defaults to redirecting to the login route with `?next=`. |
212
368
  | `apiBaseUrl` | `string` | Optional. |
213
369
  | `enforceActiveSubscription` | `boolean` | See below. |
370
+ | `onTokenChange` | `(token: string) => void` | Receives a fresh token when the user switches account from the built-in picker. |
371
+ | `onAccountAccessLost` | `({ message, code }) => void` | Access to *this* account was revoked/expired (`A403`) โ€” handle it instead of the built-in picker. |
372
+ | `mode` | `"light" \| "dark"` | Colour scheme for the built-in picker. |
214
373
 
215
374
  ### Enforce an active subscription
216
375
 
@@ -224,9 +383,167 @@ With `enforceActiveSubscription`, once authenticated the provider checks the use
224
383
 
225
384
  ---
226
385
 
386
+ ## Multiple accounts
387
+
388
+ A login can belong to more than one account (their own, plus any they've been invited to). When it does, `/auth/login` and `/auth/verify-2fa` return **no token** โ€” they return an account picker instead:
389
+
390
+ ```json
391
+ {
392
+ "success": true,
393
+ "accountSelectionRequired": true,
394
+ "accounts": [{ "account_id": "66fโ€ฆb2", "name": "Bob's Co", "is_owner": false, "role": "Manager", "access_expiry": null }],
395
+ "selectionTicket": "eyJโ€ฆ"
396
+ }
397
+ ```
398
+
399
+ **`Login` handles this for you.** It renders the picker as a third step โ€” exactly like the existing 2FA step โ€” exchanges the chosen account's `selectionTicket` via `/auth/select-account`, and only then calls `onSuccess`, with the same `data.accessToken` shape a single-account login gives you (plus the chosen `account`). No change is needed in your `onSuccess`:
400
+
401
+ ```tsx
402
+ <Login
403
+ projectId="your-project-id"
404
+ client="webapp" // optional: recorded on the session
405
+ onSuccess={(res) => save(res.data.accessToken)}
406
+ />
407
+ ```
408
+
409
+ > โš ๏ธ If you were reading `data.accessToken` straight out of the login response in your own code, add the `accountSelectionRequired` branch โ€” on that branch there is no token, and the `selectionTicket` is only valid for **five minutes**.
410
+
411
+ ### Switching account on a live session
412
+
413
+ `AccountPicker` is also exported on its own. Given a `token` instead of a ticket it lists the accounts from `GET /accounts` and switches via `/auth/switch-account`, handing you a **fresh token** to store in place of the old one (the previous token stays valid until it expires or is logged out):
414
+
415
+ ```tsx
416
+ import { AccountPicker } from "ab-ecosystem-sso";
417
+
418
+ <AccountPicker
419
+ projectId="your-project-id"
420
+ token={token}
421
+ variant="list" // no card chrome โ€” drops into a dropdown or panel
422
+ currentAccountId={accountId} // marks the current one
423
+ onSelect={({ accessToken, account }) => save(accessToken, account.account_id)}
424
+ />
425
+ ```
426
+
427
+ The Account Settings modal has this built in as an **Accounts** section โ€” see [`onAccountSwitch`](#props).
428
+
429
+ | Prop | Type | Notes |
430
+ | --- | --- | --- |
431
+ | `projectId` | `string` | **Required.** |
432
+ | `selectionTicket` | `string` | Ticket mode (post-login). Pass with `accounts`. |
433
+ | `accounts` | `AccountOption[]` | The list to choose from; fetched automatically in session mode. |
434
+ | `token` | `string` | Session mode โ€” picking switches account instead. |
435
+ | `client` | `string` | Recorded on the session by select-account, e.g. `"webapp"`. |
436
+ | `variant` | `"card" \| "list"` | Full auth card (default) or a bare list. |
437
+ | `currentAccountId` | `string` | Marks the account the session is already on. |
438
+ | `onSelect` | `({ accessToken, account }) => void` | Called with the new token. |
439
+ | `onCancel` / `cancelLabel` | `() => void` / `string` | Renders a secondary action under the list. |
440
+ | `title` / `description` | `string` | Card copy overrides. |
441
+ | `onError`, `classNames`, `mode`, `config`, `apiBaseUrl` | | As elsewhere. |
442
+
443
+ ### When access to one account is revoked
444
+
445
+ If an owner revokes or expires a member's access, that member's **next request to any endpoint** fails with `401` and code `A403`. Their login is still fine โ€” only that one account became unreachable โ€” so this is **not** a logout.
446
+
447
+ `SessionProvider` tells the two apart. Give it `onTokenChange` and it renders the account picker itself; give it `onAccountAccessLost` to handle the case yourself:
448
+
449
+ ```tsx
450
+ <SessionProvider
451
+ projectId="your-project-id"
452
+ token={token}
453
+ onTokenChange={save} // picker appears, new token lands here
454
+ onSessionInvalid={() => navigate("/login")} // genuine logout
455
+ >
456
+ <Dashboard />
457
+ </SessionProvider>
458
+ ```
459
+
460
+ `useSession()` also exposes `accountAccessLost` (`{ message, code } | null`). For your own fetch wrappers, `isAccountAccessError(err)` returns true for exactly this case:
461
+
462
+ ```ts
463
+ import { isAccountAccessError } from "ab-ecosystem-sso";
464
+
465
+ catch (err) {
466
+ if (isAccountAccessError(err)) showAccountPicker();
467
+ else if (err.status === 401) logout();
468
+ }
469
+ ```
470
+
471
+ ---
472
+
473
+ ## Invitations
474
+
475
+ An owner invites someone by email, and the backend returns a **link token** โ€” it **sends no email**, so the link is yours to deliver. Build the invitee's route with `AcceptInvite`:
476
+
477
+ ```tsx
478
+ import { AcceptInvite } from "ab-ecosystem-sso";
479
+
480
+ // e.g. /accept-invite?token=โ€ฆ
481
+ <AcceptInvite
482
+ projectId="your-project-id"
483
+ inviteToken={new URLSearchParams(location.search).get("token") ?? ""}
484
+ token={session} // if they're already signed in
485
+ onAccepted={({ accessToken }) => accessToken && save(accessToken)}
486
+ onNeedLogin={() => navigate("/login?next=/accept-invite" + location.search)}
487
+ onSuccess={(res) => save(res.data.accessToken)} // the signup branch
488
+ />
489
+ ```
490
+
491
+ It resolves the token first (`GET /invitations/:token`) and then renders whichever branch the backend asked for:
492
+
493
+ - **`mode: "signup"`** โ€” they have no login here yet. It renders `Signup` with `inviteToken` set and the invited address prefilled and read-only. This works even when the project has signups **disabled**, and the account is created already verified and active (no verification email).
494
+ - **`mode: "accept"`** โ€” they already log in here. With a `token` it shows the invite details and an accept button, then switches the session onto the joined account. Without one it calls `onNeedLogin` so you can route them through your own login and come back.
495
+
496
+ | Prop | Type | Notes |
497
+ | --- | --- | --- |
498
+ | `projectId` | `string` | **Required.** |
499
+ | `inviteToken` | `string` | **Required** โ€” the `token` from the link. |
500
+ | `token` | `string` | A live session token; required by the `"accept"` branch. |
501
+ | `switchOnAccept` | `boolean` | Switch onto the joined account after accepting. Default `true`. |
502
+ | `onAccepted` | `({ accountId, accessToken }) => void` | After accepting. `accessToken` is the switched session. |
503
+ | `onNeedLogin` | `(invitation) => void` | The invite needs an existing login and none was given. |
504
+ | `onSuccess` | `(res) => void` | Forwarded to `Signup` on the signup branch. |
505
+ | `countries`, `onError`, `classNames`, `mode`, `config`, `apiBaseUrl` | | As elsewhere. |
506
+
507
+ The email is always rendered read-only: on signup the server takes it from the invite record and ignores anything posted, and on accept a mismatch is rejected ("This invitation was sent to a different email").
508
+
509
+ ---
510
+
511
+ ## Team administration
512
+
513
+ Owners get three more Account Settings sections โ€” **Members**, **Roles** and **Invitations** โ€” on top of the usual ones. They need live API mode (`projectId` + `token`):
514
+
515
+ ```tsx
516
+ openAccountSettings({
517
+ projectId: "your-project-id",
518
+ token,
519
+ initialSection: "members",
520
+ inviteLinkBase: "https://app.example.com/accept-invite", // where invite links point
521
+ currentAccountId: accountId,
522
+ onAccountSwitch: ({ accessToken }) => save(accessToken), // also enables the Accounts tab
523
+ });
524
+ ```
525
+
526
+ - **Members** โ€” list active or revoked members; edit a member's role and access expiry; revoke access. Revoking leaves their login alone: only this account becomes unreachable, from their next request onward, and re-inviting the same person restores the membership.
527
+ - **Roles** โ€” create, edit and delete roles with a permission list (one per line). The server trims, uppercases, dedupes and sorts permissions (max 200), and they aren't validated against a catalogue yet, so a misspelled string simply grants nothing. **System** roles are assignable but neither editable nor deletable, and a role still held by anyone can't be deleted.
528
+ - **Invitations** โ€” create invites (email, member/user, role, access expiry), filter by status, and revoke pending ones. After creating one, the link is shown **once** with a copy button โ€” the token is never returned again and no email is sent.
529
+
530
+ Every endpoint behind these is **owner-only**. A non-owner gets `"Only the account owner can do this"`, which the sections display as-is rather than guessing at permissions client-side. Pass `isOwner={false}` to hide the tabs outright.
531
+
532
+ The three panels are also exported for use in your own admin page:
533
+
534
+ ```tsx
535
+ import { MembersSection, RolesSection, InvitationsSection } from "ab-ecosystem-sso";
536
+
537
+ <MembersSection projectId="your-project-id" token={token} />
538
+ ```
539
+
540
+ > They're styled for the settings modal, so render them inside an element carrying `data-aas` (and `data-aas-theme` for dark mode โ€” see [Light & dark mode](#light--dark-mode)).
541
+
542
+ ---
543
+
227
544
  ## Account Settings modal
228
545
 
229
- A complete settings surface with these sections: **General** (profile), **Account** (email, change password, 2FA, sessions), **Wallet & Balance** (balances + transaction history), **Plans & Add-ons** (subscribe, multi-subscribe add-ons, markdown plan details), and **Credit Wallets** (per-wallet balance, logs, top-up). It loads and saves via the live API whenever `projectId` + `token` are supplied (otherwise it renders sample data).
546
+ A complete settings surface with these sections: **General** (profile), **Account** (email, change password, 2FA, sessions), **Wallet & Balance** (balances + transaction history), **Plans & Add-ons** (subscribe, multi-subscribe add-ons, markdown plan details), **Credit Wallets** (per-wallet balance, logs, top-up), plus the owner-only **Members**, **Roles** and **Invitations** sections and an optional **Accounts** switcher (see [Team administration](#team-administration)). It loads and saves via the live API whenever `projectId` + `token` are supplied (otherwise it renders sample data).
230
547
 
231
548
  ### Imperative (recommended)
232
549
 
@@ -273,13 +590,17 @@ const [open, setOpen] = useState(false);
273
590
  | `open` | `boolean` | **Required** (declarative). |
274
591
  | `onOpenChange` | `(open: boolean) => void` | **Required** (declarative). |
275
592
  | `projectId` | `string` | Enables live API mode (with `token`). |
276
- | `token` | `string` | Bearer token. |
593
+ | `token` | `string` | Bearer token. Optional โ€” falls back to the stored one. |
277
594
  | `apiBaseUrl` | `string` | Optional API origin. |
278
- | `initialSection` | `"general" \| "account" \| "wallet" \| "plans" \| "credits"` | First section shown. Default `"general"`. |
595
+ | `initialSection` | `AccountSettingsSection` | `"general"`, `"account"`, `"wallet"`, `"plans"`, `"credits"`, `"accounts"`, `"members"`, `"roles"` or `"invitations"`. Default `"general"`. |
279
596
  | `customComponents` | `AccountSettingsCustomPanel[]` | Add your own panels to the modal. See [Custom panels](#custom-panels). |
280
597
  | `syncUrlHash` | `boolean` | Mirror open state + active section in the URL hash. Default `true`. See [URL hash & refresh](#url-hash--refresh). |
281
598
  | `title` | `string` | Modal heading. Default `"Settings"`. |
282
599
  | `mode` | `"light" \| "dark"` | Colour scheme. Default `"light"`. See [Light & dark mode](#light--dark-mode). |
600
+ | `isOwner` | `boolean` | Pass `false` to hide the Members / Roles / Invitations sections. Omitted โ‡’ shown, and the API refuses non-owners with its own message. |
601
+ | `inviteLinkBase` | `string` | Where invite links point; the token is appended as `?token=โ€ฆ`. Default `<origin>/accept-invite`. |
602
+ | `onAccountSwitch` | `({ accessToken, accountId }) => void` | Enables the **Accounts** switcher. Store the fresh token in place of the old one. |
603
+ | `currentAccountId` | `string` | Marked "Current" in the switcher. |
283
604
  | `data` | `Partial<AccountSettingsData>` | Override sample data (non-API mode / previews). |
284
605
  | `onLogout` | `() => void` | Sign-out action (closes the modal, then runs this). |
285
606
  | `onSaveProfile` | `(profile) => void` | Fires alongside the profile save. |
@@ -564,6 +885,15 @@ Beyond the components, these functions are exported for building custom UIs:
564
885
  | `getUserWallet(projectId, token, apiBaseUrl?)` | `GET /me` โ†’ `UserWallets` |
565
886
  | `getUserCreditWallet(projectId, token, apiBaseUrl?)` | `GET /credit-wallets` โ†’ `CreditWallet[]` |
566
887
  | `getUserSubscription(projectId, token, apiBaseUrl?)` | `GET /subscription` โ†’ raw subscription object |
888
+ | `selectAccountApi(projectId, { selection_ticket, account_id, client? }, apiBaseUrl?)` | `POST /auth/select-account` โ†’ `accessToken` (no auth; the ticket is the credential) |
889
+ | `switchAccountApi(projectId, accountId, token, apiBaseUrl?)` | `POST /auth/switch-account` โ†’ a fresh `accessToken` |
890
+ | `listAccountsApi(projectId, token, apiBaseUrl?)` | `GET /accounts` โ†’ `AccountOption[]` |
891
+ | `getInvitationApi(projectId, inviteToken, apiBaseUrl?)` | `GET /invitations/:token` โ†’ `InvitationLookup` (no auth) |
892
+ | `acceptInvitationApi(projectId, inviteToken, token, apiBaseUrl?)` | `POST /invitations/:token/accept` โ†’ `account_id` |
893
+ | `listRolesApi` ยท `createRoleApi` ยท `updateRoleApi` ยท `deleteRoleApi` | `/account/roles` (owner only) |
894
+ | `listInvitationsApi` ยท `createInvitationApi` ยท `revokeInvitationApi` | `/account/invites` (owner only) |
895
+ | `listMembersApi` ยท `updateMemberApi` ยท `revokeMemberApi` | `/account/members` (owner only) |
896
+ | `validateSession(projectId, token, apiBaseUrl?)` | `GET /me` โ†’ `{ valid, accountAccessLost, message, code }` |
567
897
  | `logout(options)` | `POST /auth/logout` + callbacks |
568
898
  | `logoutApi(projectId, token, apiBaseUrl?)` | `POST /auth/logout` |
569
899
 
@@ -583,9 +913,18 @@ import type {
583
913
  AuthConfig, CaptchaConfig, CardLayoutConfig,
584
914
  LoginRequest, SignupRequest, ForgotPasswordRequest, AuthResponse, LogoutOptions,
585
915
  MappedProfile, WalletInfo, UserWallets, CreditWallet, MappedSubscription,
916
+ AccountPickerProps, AcceptInviteProps,
917
+ AccountOption, SelectAccountRequest, AccessTokenResponse, InvitationLookup, SessionValidation,
918
+ Role, CreateRolePayload, UpdateRolePayload,
919
+ Invitation, InvitationStatus, CreateInvitePayload, CreatedInvite,
920
+ Member, MemberStatus, UpdateMemberPayload,
921
+ TokenStorageConfig, TokenStorageKind,
922
+ AuthFetchInit, AuthHandlers, AuthInterceptorOptions, UnauthorizedInfo,
923
+ SsoRoutePaths, SsoScreen, SsoRouteMatch, SsoRouteObject,
924
+ SsoScreenProps, SsoAuthPageProps, SsoAuthRoutesProps,
586
925
  } from "ab-ecosystem-sso";
587
926
 
588
- import { AuthApiError } from "ab-ecosystem-sso";
927
+ import { AuthApiError, isAccountAccessError } from "ab-ecosystem-sso";
589
928
  ```
590
929
 
591
930
  ---