@tidecloak/react 0.9.13 → 0.99.8
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 +71 -17
- package/dist/cjs/index.js +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/index.d.ts.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# TideCloak React SDK
|
|
2
2
|
|
|
3
|
+
> ## Quick Start Guide
|
|
4
|
+
>
|
|
5
|
+
> If you're new to TideCloak, the fastest way to get started with React + Vite is to follow our official Getting Started guide:
|
|
6
|
+
> [https://github.com/tide-foundation/tidecloak-gettingstarted](https://github.com/tide-foundation/tidecloak-gettingstarted)
|
|
7
|
+
>
|
|
8
|
+
> ---
|
|
9
|
+
|
|
3
10
|
Secure your React app with TideCloak: authentication, session management, data encryption, and role-based access.
|
|
4
11
|
|
|
5
12
|
---
|
|
@@ -29,16 +36,26 @@ yarn add @tidecloak/react
|
|
|
29
36
|
|
|
30
37
|
This bundle provides:
|
|
31
38
|
|
|
32
|
-
* `<
|
|
33
|
-
* `useTideCloak()` hook
|
|
34
|
-
* `<Authenticated>` / `<Unauthenticated>`
|
|
35
|
-
* `doEncrypt()` / `doDecrypt()`
|
|
39
|
+
* `<TideCloakContextProvider>` - application-level context
|
|
40
|
+
* `useTideCloak()` hook - access tokens and auth actions
|
|
41
|
+
* `<Authenticated>` / `<Unauthenticated>` - UI guards
|
|
42
|
+
* `doEncrypt()` / `doDecrypt()` - tag-based encryption/decryption
|
|
43
|
+
|
|
44
|
+
> **Note:** Installing this package automatically adds a `silent-check-sso.html` file to your `public` directory. This file is required for silent SSO checks; if it doesn't exist, create it manually at `public/silent-check-sso.html` with the following content, otherwise the app will break:
|
|
45
|
+
>
|
|
46
|
+
> ```html
|
|
47
|
+
> <html>
|
|
48
|
+
> <body>
|
|
49
|
+
> <script>parent.postMessage(location.href, location.origin)</script>
|
|
50
|
+
> </body>
|
|
51
|
+
> </html>
|
|
52
|
+
> ```
|
|
36
53
|
|
|
37
54
|
---
|
|
38
55
|
|
|
39
56
|
## 3. Initialize the Provider
|
|
40
57
|
|
|
41
|
-
Wrap your app
|
|
58
|
+
Wrap your app's root with `<TideCloakContextProvider>` to enable authentication context throughout the component tree.
|
|
42
59
|
|
|
43
60
|
If you're using React Router, your setup might look like this:
|
|
44
61
|
|
|
@@ -47,14 +64,14 @@ If you're using React Router, your setup might look like this:
|
|
|
47
64
|
```tsx
|
|
48
65
|
import React from 'react';
|
|
49
66
|
import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
|
50
|
-
import {
|
|
67
|
+
import { TideCloakContextProvider } from '@tidecloak/react';
|
|
51
68
|
import adapter from '../tidecloakAdapter.json';
|
|
52
69
|
import Home from './pages/Home';
|
|
53
70
|
import RedirectPage from './pages/auth/RedirectPage';
|
|
54
71
|
|
|
55
72
|
export default function App() {
|
|
56
73
|
return (
|
|
57
|
-
<
|
|
74
|
+
<TideCloakContextProvider config={adapter}>
|
|
58
75
|
<BrowserRouter>
|
|
59
76
|
<Routes>
|
|
60
77
|
<Route path="/" element={<Home />} />
|
|
@@ -62,7 +79,7 @@ export default function App() {
|
|
|
62
79
|
{/* Add additional routes here */}
|
|
63
80
|
</Routes>
|
|
64
81
|
</BrowserRouter>
|
|
65
|
-
</
|
|
82
|
+
</TideCloakContextProvider>
|
|
66
83
|
);
|
|
67
84
|
}
|
|
68
85
|
```
|
|
@@ -88,9 +105,9 @@ If omitted, it defaults to:
|
|
|
88
105
|
You must **create this route** if you use the default, or explicitly override it:
|
|
89
106
|
|
|
90
107
|
```tsx
|
|
91
|
-
<
|
|
108
|
+
<TideCloakContextProvider config={{ ...adapter, redirectUri: 'https://yourapp.com/auth/callback' }}>
|
|
92
109
|
<YourApp />
|
|
93
|
-
</
|
|
110
|
+
</TideCloakContextProvider>
|
|
94
111
|
```
|
|
95
112
|
|
|
96
113
|
> ⚠️ If you override the `redirectUri`, make sure the specified path exists in your app. Missing this route will cause failed redirects.
|
|
@@ -137,7 +154,7 @@ export default function RedirectPage() {
|
|
|
137
154
|
}
|
|
138
155
|
```
|
|
139
156
|
|
|
140
|
-
**Description:** This page helps finalize the login or logout flow, and also reacts to token expiration events that may have triggered a redirect. It's required if you're using the default `redirectUri`. If you override the redirect URI, the file is optional
|
|
157
|
+
**Description:** This page helps finalize the login or logout flow, and also reacts to token expiration events that may have triggered a redirect. It's required if you're using the default `redirectUri`. If you override the redirect URI, the file is optional-but the **route** for the redirect **must** still exist in your app.
|
|
141
158
|
|
|
142
159
|
---
|
|
143
160
|
|
|
@@ -187,13 +204,13 @@ function Header() {
|
|
|
187
204
|
| `authenticated` | `boolean` | Whether the user is logged in. |
|
|
188
205
|
| `login()` / `logout()` | `() => void` | Trigger the login or logout flows. |
|
|
189
206
|
| `token`, `tokenExp` | `string`, `number` | Access token and its expiration timestamp. |
|
|
190
|
-
| Automatic token refresh | built-in | Tokens refresh silently on expiration
|
|
207
|
+
| Automatic token refresh | built-in | Tokens refresh silently on expiration-no manual setup needed. |
|
|
191
208
|
| `refreshToken()` | `() => Promise<boolean>` | Force a silent token renewal. |
|
|
192
209
|
| `getValueFromToken(key)` | `(key: string) => any` | Read a custom claim from the access token. |
|
|
193
210
|
| `getValueFromIdToken(key)` | `(key: string) => any` | Read a custom claim from the ID token. |
|
|
194
211
|
| `hasRealmRole(role)` | `(role: string) => boolean` | Check a realm-level role. |
|
|
195
|
-
| `hasClientRole(role, client?)` | `(role: string, client?: string) => boolean` | Check a client-level role; defaults to your app
|
|
196
|
-
| `doEncrypt(data)` / `doDecrypt(data)` | `(data: any) => Promise<any>` | Encrypt or decrypt payloads via TideCloak
|
|
212
|
+
| `hasClientRole(role, client?)` | `(role: string, client?: string) => boolean` | Check a client-level role; defaults to your app's client ID if omitted. |
|
|
213
|
+
| `doEncrypt(data)` / `doDecrypt(data)` | `(data: any) => Promise<any>` | Encrypt or decrypt payloads via TideCloak's built-in service. |
|
|
197
214
|
|
|
198
215
|
---
|
|
199
216
|
|
|
@@ -241,8 +258,45 @@ const decryptedArray = await doDecrypt([
|
|
|
241
258
|
]);
|
|
242
259
|
```
|
|
243
260
|
|
|
244
|
-
> **
|
|
245
|
-
>
|
|
261
|
+
> **Important:** The `data` property **must** be a string when encrypting. Passing a non-string (e.g., an object) will cause an error.
|
|
262
|
+
>
|
|
263
|
+
> **Valid example:**
|
|
264
|
+
>
|
|
265
|
+
> ```ts
|
|
266
|
+
> // Before testing below, ensure you've set up the necessary roles:
|
|
267
|
+
> const multi_encrypted_addresses = await doEncrypt([
|
|
268
|
+
> {
|
|
269
|
+
> data: "10 Smith Street",
|
|
270
|
+
> tags: ["street"]
|
|
271
|
+
> },
|
|
272
|
+
> {
|
|
273
|
+
> data: "Southport",
|
|
274
|
+
> tags: ["suburb"]
|
|
275
|
+
> },
|
|
276
|
+
> {
|
|
277
|
+
> data: "20 James Street - Burleigh Heads",
|
|
278
|
+
> tags: ["street", "suburb"]
|
|
279
|
+
> }
|
|
280
|
+
> ]);
|
|
281
|
+
> ```
|
|
282
|
+
>
|
|
283
|
+
> **Invalid (will fail):**
|
|
284
|
+
>
|
|
285
|
+
> ```ts
|
|
286
|
+
> // Prepare data for encryption
|
|
287
|
+
> const dataToEncrypt = {
|
|
288
|
+
> title: noteData.title,
|
|
289
|
+
> content: noteData.content
|
|
290
|
+
> };
|
|
291
|
+
>
|
|
292
|
+
> // Encrypt the note data using TideCloak (this will error)
|
|
293
|
+
> const encryptedArray = await doEncrypt([{ data: dataToEncrypt, tags: ['note'] }]);
|
|
294
|
+
> ```
|
|
295
|
+
|
|
296
|
+
> **Permissions:** Encryption requires `_tide_<tag>.selfencrypt`; decryption requires `_tide_<tag>.selfdecrypt`.
|
|
297
|
+
>
|
|
298
|
+
> **Order guarantee:** Output preserves input order.
|
|
299
|
+
>
|
|
246
300
|
|
|
247
301
|
---
|
|
248
302
|
|
|
@@ -252,6 +306,6 @@ const decryptedArray = await doDecrypt([
|
|
|
252
306
|
* **Error Handling**: check `initError` from `useTideCloak`
|
|
253
307
|
* **Custom Claims**: access token fields with `getValueFromToken()` / `getValueFromIdToken()`
|
|
254
308
|
* **Role-Based UI**: combine `hasRealmRole`, `hasClientRole`, and guard components
|
|
255
|
-
* **Lazy Initialization**: optionally wrap `<
|
|
309
|
+
* **Lazy Initialization**: optionally wrap `<TideCloakContextProvider>` around only protected routes
|
|
256
310
|
|
|
257
311
|
---
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useTideCloakContext, } from './contexts/TideCloakContextProvider';
|
|
2
2
|
export { TideCloakContextProvider } from './contexts/TideCloakContextProvider';
|
|
3
|
+
export { RequestEnclave, ApprovalEnclave } from "@tidecloak/js";
|
|
3
4
|
/**
|
|
4
5
|
* Hook to access authentication state and helpers.
|
|
5
6
|
*/
|
package/dist/esm/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { useTideCloakContext, } from './contexts/TideCloakContextProvider';
|
|
2
2
|
export { TideCloakContextProvider } from './contexts/TideCloakContextProvider';
|
|
3
|
+
export { RequestEnclave, ApprovalEnclave } from "@tidecloak/js";
|
|
3
4
|
/**
|
|
4
5
|
* Hook to access authentication state and helpers.
|
|
5
6
|
*/
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { useTideCloakContext } from './contexts/TideCloakContextProvider';
|
|
3
3
|
export { TideCloakContextProvider } from './contexts/TideCloakContextProvider';
|
|
4
|
+
export { RequestEnclave, ApprovalEnclave } from "@tidecloak/js";
|
|
4
5
|
/**
|
|
5
6
|
* Hook to access authentication state and helpers.
|
|
6
7
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAE7C,OAAQ,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EACL,mBAAmB,EACpB,MAAM,qCAAqC,CAAC;AAE7C,OAAQ,EAAE,wBAAwB,EAAE,MAAM,qCAAqC,CAAC;AAChF,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAEhE;;GAEG;AACH,eAAO,MAAM,YAAY,4BAAsB,CAAC;AAEhD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAI1F;AAED,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,SAAS,CAI5F"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tidecloak/react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.99.8",
|
|
4
4
|
"description": "TideCloak client-side React SDK",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -48,6 +48,6 @@
|
|
|
48
48
|
"@types/react-dom": "^19.1.6"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@tidecloak/js": "^0.
|
|
51
|
+
"@tidecloak/js": "^0.99.8"
|
|
52
52
|
}
|
|
53
53
|
}
|