ab-ecosystem-sso 0.1.19 โ 0.2.1
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 +352 -13
- package/dist/ab-ecosystem-sso.cjs +28 -26
- package/dist/ab-ecosystem-sso.js +5714 -4147
- package/dist/index.d.ts +929 -17
- package/dist/style.css +1 -1
- package/package.json +1 -1
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
|
|
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
|
-
|
|
198
|
-
|
|
199
|
-
|
|
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` |
|
|
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),
|
|
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"
|
|
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
|
---
|