@zautha/react 0.12.0 → 0.12.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/LICENSE +1 -1
- package/README.md +3 -75
- package/package.json +5 -4
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -30,82 +30,10 @@ export function App() {
|
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
##
|
|
33
|
+
## Documentation
|
|
34
34
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
for a dedicated page, render `<AuthenticateWithRedirectCallback />` there and pass its URL:
|
|
38
|
-
|
|
39
|
-
```tsx
|
|
40
|
-
<SignIn ssoCallbackUrl="/sso-callback" redirectUrl="/dashboard" />;
|
|
41
|
-
|
|
42
|
-
// app/sso-callback page:
|
|
43
|
-
<AuthenticateWithRedirectCallback />;
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
It finishes the sign-in or sign-up, asks on the same page for whatever is left (the second factor, a missing username,
|
|
47
|
-
the email code when the provider did not verify the address) and goes on to `redirectUrl`. A modal sign-in offers
|
|
48
|
-
providers only with an `ssoCallbackUrl`. With no target at all (neither the flow's `redirectUrl` nor its own
|
|
49
|
-
`redirectUrlComplete` prop) it stays on its waiting card once signed in: pass `redirectUrlComplete`, or go on yourself
|
|
50
|
-
from `onEvent` (`sign_in.completed`, `sign_up.completed`). It is not the page for connecting an account: `<UserProfile />`
|
|
51
|
-
on its own page finishes a connection itself.
|
|
52
|
-
|
|
53
|
-
## Account management
|
|
54
|
-
|
|
55
|
-
`<UserProfile />` is the signed-in user's account page: name and username, email addresses, connected accounts
|
|
56
|
-
(connecting a provider leaves for it and comes back to the same page, which finishes it), password, passkeys,
|
|
57
|
-
two-step verification, active devices and (when the instance allows it) account deletion. Passkeys show only where the
|
|
58
|
-
browser and the page can use them: on a page under the instance's passkey domain (production: your domain, shared with
|
|
59
|
-
the hosted pages; development: the page's own host, so a passkey added on `localhost` does not work on the hosted pages
|
|
60
|
-
and the other way round). See `@zautha/js`'s "Passkeys". `<UserButton />`'s "Manage account" opens it in a modal, or
|
|
61
|
-
goes to `userProfileUrl` when you pass one (e.g. your instance's hosted `/user` page). Connecting an account from
|
|
62
|
-
inside that modal does not finish: the provider sends the user back to the app's page, not into the modal, so
|
|
63
|
-
nothing completes the connection there — pass `userProfileUrl`, or render `<UserProfile />` on its own page, for
|
|
64
|
-
connecting accounts.
|
|
65
|
-
|
|
66
|
-
## Organizations: roles and permissions
|
|
67
|
-
|
|
68
|
-
`useAuth()` gives the session's active organization from its token: `orgId`, `orgRole` (`org:admin`), `orgSlug` and
|
|
69
|
-
`orgPermissions` (the role's custom permissions, `org:invoices:read`), all null without one. `has({ role })` and
|
|
70
|
-
`has({ permission })` take full keys and answer the same as your server does (`@zautha/backend`, `@zautha/nextjs`,
|
|
71
|
-
`Zautha.AspNetCore`); a system permission (`org:sys_…`) is never in the token, so it is false. `<Show>` takes the same
|
|
72
|
-
conditions. Switch organizations with `useZautha()?.setActive({ organization })` (an id, a slug while slugs are on, or
|
|
73
|
-
`null` for the personal account); the hooks follow once the new token is in.
|
|
74
|
-
|
|
75
|
-
```tsx
|
|
76
|
-
<Show when={{ permission: "org:invoices:read" }} fallback={<p>No access</p>}>
|
|
77
|
-
<Invoices />
|
|
78
|
-
</Show>
|
|
79
|
-
```
|
|
80
|
-
|
|
81
|
-
`<Show>` only hides UI: check the same permission on your server.
|
|
82
|
-
|
|
83
|
-
## Sensitive actions (reverification)
|
|
84
|
-
|
|
85
|
-
`useReverification(fetcher)` wraps an action that may need a recent identity check. When `fetcher` throws
|
|
86
|
-
`ReverificationRequiredError` (e.g. `user.updatePassword`) or resolves to your backend's `403 reverification_required`
|
|
87
|
-
response (`requireReverification` in `@zautha/backend`, `reverificationError` in `@zautha/nextjs`,
|
|
88
|
-
`RequireZauthaReverification` in `Zautha.AspNetCore`), a modal asks the user to verify and the action runs once more.
|
|
89
|
-
Closing the modal rejects with `ReverificationCancelledError`.
|
|
90
|
-
|
|
91
|
-
```tsx
|
|
92
|
-
const { getToken } = useAuth();
|
|
93
|
-
const transfer = useReverification(async () =>
|
|
94
|
-
fetch("/api/transfer", { method: "POST", headers: { Authorization: `Bearer ${await getToken()}` } }),
|
|
95
|
-
);
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
## Impersonation
|
|
99
|
-
|
|
100
|
-
`useAuth().actor` (and `useSession().session.actor`) is `{ sub, iss }` in an impersonation session and `null`
|
|
101
|
-
otherwise. With `ui` on `<ZauthaProvider>`, the provider shows the impersonation band at the bottom of every page of
|
|
102
|
-
such a session ("End session" signs out); nothing to add yourself. Without `ui` (headless use) there is no band, but `actor` is still set: show your own notice
|
|
103
|
-
from `useAuth().actor`.
|
|
104
|
-
|
|
105
|
-
```tsx
|
|
106
|
-
const { actor } = useAuth();
|
|
107
|
-
if (actor !== null) console.log(`support agent ${actor.sub} is signed in as this user`);
|
|
108
|
-
```
|
|
35
|
+
Everything else (the full API, guides and examples) is at
|
|
36
|
+
<https://zautha.com/docs/sdk/react/>.
|
|
109
37
|
|
|
110
38
|
## License
|
|
111
39
|
|
package/package.json
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zautha/react",
|
|
3
|
-
"version": "0.12.
|
|
3
|
+
"version": "0.12.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "React bindings for Zautha: provider, hooks, <Show>, buttons and prebuilt components.",
|
|
6
|
+
"homepage": "https://zautha.com/docs/sdk/react/",
|
|
6
7
|
"license": "MIT",
|
|
7
8
|
"repository": {
|
|
8
9
|
"type": "git",
|
|
@@ -31,12 +32,12 @@
|
|
|
31
32
|
"LICENSE"
|
|
32
33
|
],
|
|
33
34
|
"dependencies": {
|
|
34
|
-
"@zautha/js": "^0.12.
|
|
35
|
+
"@zautha/js": "^0.12.1"
|
|
35
36
|
},
|
|
36
37
|
"peerDependencies": {
|
|
37
38
|
"react": "^19.0.0",
|
|
38
39
|
"react-dom": "^19.0.0",
|
|
39
|
-
"@zautha/ui": "^0.12.
|
|
40
|
+
"@zautha/ui": "^0.12.1"
|
|
40
41
|
},
|
|
41
42
|
"devDependencies": {
|
|
42
43
|
"@size-limit/preset-small-lib": "14.0.1",
|
|
@@ -44,7 +45,7 @@
|
|
|
44
45
|
"@testing-library/user-event": "14.6.7",
|
|
45
46
|
"@types/react": "19.3.0",
|
|
46
47
|
"@types/react-dom": "19.3.0",
|
|
47
|
-
"@zautha/ui": "0.12.
|
|
48
|
+
"@zautha/ui": "0.12.1",
|
|
48
49
|
"happy-dom": "21.0.4",
|
|
49
50
|
"msw": "2.15.0",
|
|
50
51
|
"react": "19.3.0",
|