@tidecloak/react 0.9.13 → 0.11.5

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.
Files changed (6) hide show
  1. package/README.md +76 -17
  2. package/dist/cjs/index.js +1 -0
  3. package/dist/esm/index.js +1 -0
  4. package/dist/types/index.d.ts +1 -0
  5. package/dist/types/index.d.ts.map +1 -1
  6. 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
- * `<TideCloakProvider>` — application-level context
33
- * `useTideCloak()` hook — access tokens and auth actions
34
- * `<Authenticated>` / `<Unauthenticated>` — UI guards
35
- * `doEncrypt()` / `doDecrypt()` — tag-based encryption/decryption
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’s root with `<TideCloakProvider>` to enable authentication context throughout the component tree.
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 { TideCloakProvider } from '@tidecloak/react';
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
- <TideCloakProvider config={adapter}>
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
- </TideCloakProvider>
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
- <TideCloakProvider config={{ ...adapter, redirectUri: 'https://yourapp.com/auth/callback' }}>
108
+ <TideCloakContextProvider config={{ ...adapter, redirectUri: 'https://yourapp.com/auth/callback' }}>
92
109
  <YourApp />
93
- </TideCloakProvider>
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—but the **route** for the redirect **must** still exist in your app.
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—no manual setup needed. |
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’s client ID if omitted. |
196
- | `doEncrypt(data)` / `doDecrypt(data)` | `(data: any) => Promise<any>` | Encrypt or decrypt payloads via TideCloak’s built-in service. |
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,50 @@ const decryptedArray = await doDecrypt([
241
258
  ]);
242
259
  ```
243
260
 
244
- > **Permissions**: Encryption requires `tide_<tag>.selfencrypt`; decryption requires `tide_<tag>.selfdecrypt`.
245
- > **Order guarantee**: Output preserves input order.
261
+
262
+ > **Important:** The `data` property **must** be either a string or a `Uint8Array` (raw bytes).\
263
+ > When you encrypt a string, decryption returns a string.\
264
+ > When you encrypt a `Uint8Array`, decryption returns a `Uint8Array`.
265
+ >
266
+
267
+ ### Valid example:
268
+ >
269
+ > ```ts
270
+ > // Before testing below, ensure you've set up the necessary roles:
271
+ > const multi_encrypted_addresses = await doEncrypt([
272
+ > {
273
+ > data: "10 Smith Street",
274
+ > tags: ["street"]
275
+ > },
276
+ > {
277
+ > data: "Southport",
278
+ > tags: ["suburb"]
279
+ > },
280
+ > {
281
+ > data: "20 James Street - Burleigh Heads",
282
+ > tags: ["street", "suburb"]
283
+ > }
284
+ > ]);
285
+ > ```
286
+ >
287
+
288
+ ### Invalid (will fail):
289
+ >
290
+ > ```ts
291
+ > // Prepare data for encryption
292
+ > const dataToEncrypt = {
293
+ > title: noteData.title,
294
+ > content: noteData.content
295
+ > };
296
+ >
297
+ > // Encrypt the note data using TideCloak (this will error)
298
+ > const encryptedArray = await doEncrypt([{ data: dataToEncrypt, tags: ['note'] }]);
299
+ > ```
300
+
301
+ > **Permissions:** Encryption requires `_tide_<tag>.selfencrypt`; decryption requires `_tide_<tag>.selfdecrypt`.
302
+ >
303
+ > **Order guarantee:** Output preserves input order.
304
+ >
246
305
 
247
306
  ---
248
307
 
@@ -252,6 +311,6 @@ const decryptedArray = await doDecrypt([
252
311
  * **Error Handling**: check `initError` from `useTideCloak`
253
312
  * **Custom Claims**: access token fields with `getValueFromToken()` / `getValueFromIdToken()`
254
313
  * **Role-Based UI**: combine `hasRealmRole`, `hasClientRole`, and guard components
255
- * **Lazy Initialization**: optionally wrap `<TideCloakProvider>` around only protected routes
314
+ * **Lazy Initialization**: optionally wrap `<TideCloakContextProvider>` around only protected routes
256
315
 
257
316
  ---
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
  */
package/dist/types/index.d.ts.map CHANGED
@@ -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;AAEhF;;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"}
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.9.13",
3
+ "version": "0.11.5",
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.9.13"
51
+ "@tidecloak/js": "^0.11.5"
52
52
  }
53
53
  }