@strivacity/sdk-nuxt 1.0.1 → 2.0.0-beta.2

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 (44) hide show
  1. package/.nuxt/app-component.mjs +1 -1
  2. package/.nuxt/component-names.mjs +1 -1
  3. package/.nuxt/components.d.ts +110 -92
  4. package/.nuxt/error-component.mjs +1 -1
  5. package/.nuxt/global-polyfills.mjs +4 -0
  6. package/.nuxt/imports.d.ts +7 -6
  7. package/.nuxt/imports.mjs +7 -6
  8. package/.nuxt/layouts.mjs +1 -0
  9. package/.nuxt/manifest/meta/ba93f89b-30bd-4721-919e-d2c0fdc150d7.json +1 -0
  10. package/.nuxt/middleware.mjs +1 -1
  11. package/.nuxt/nuxt.d.ts +1 -2
  12. package/.nuxt/plugins.client.mjs +18 -0
  13. package/.nuxt/plugins.server.mjs +10 -0
  14. package/.nuxt/root-component.mjs +1 -1
  15. package/.nuxt/router.options.mjs +2 -0
  16. package/.nuxt/strivacity-sdk-storage.d.ts +3 -3
  17. package/.nuxt/strivacity-sdk-storage.mjs +1 -1
  18. package/.nuxt/test-component-wrapper.mjs +1 -1
  19. package/.nuxt/types/app-defaults.d.ts +1 -1
  20. package/.nuxt/types/builder-env.d.ts +1 -0
  21. package/.nuxt/types/nitro-config.d.ts +2 -2
  22. package/.nuxt/types/nitro-imports.d.ts +13 -3
  23. package/.nuxt/types/nitro-nuxt.d.ts +5 -0
  24. package/.nuxt/types/nitro-routes.d.ts +6 -3
  25. package/.nuxt/types/plugins.d.ts +10 -11
  26. package/.nuxt/unhead-options.mjs +6 -0
  27. package/CHANGELOG.md +24 -0
  28. package/README.md +432 -22
  29. package/dist/module.d.mts +68 -15
  30. package/dist/module.json +3 -3
  31. package/dist/module.mjs +10 -4
  32. package/dist/module.mjs.map +1 -1
  33. package/dist/runtime/composables.d.ts +3 -3
  34. package/dist/runtime/composables.js +11 -1
  35. package/dist/runtime/login-renderer.vue +163 -0
  36. package/dist/runtime/login-renderer.vue.d.ts +32 -0
  37. package/dist/types.d.mts +15 -1
  38. package/package.json +5 -6
  39. package/.nuxt/plugins/client.mjs +0 -18
  40. package/.nuxt/plugins/server.mjs +0 -10
  41. package/.nuxt/unhead-plugins.mjs +0 -2
  42. package/dist/module.cjs +0 -5
  43. package/dist/module.d.ts +0 -128
  44. package/dist/types.d.ts +0 -1
package/README.md CHANGED
@@ -2,6 +2,10 @@
2
2
 
3
3
  > **The SDK supports Nuxt version 3 and above**
4
4
 
5
+ ## Example App
6
+
7
+ - [Example app](https://github.com/Strivacity/sdk-js/tree/main/apps/nuxt)
8
+
5
9
  ### Install
6
10
 
7
11
  ```bash
@@ -19,60 +23,392 @@ export default defineNuxtConfig({
19
23
  ...
20
24
  modules: ['@strivacity/sdk-nuxt'],
21
25
  strivacity: {
26
+ mode: 'redirect', // or 'popup' or 'native'
22
27
  issuer: 'https://<YOUR_DOMAIN>',
23
28
  scopes: ['openid', 'profile'],
24
29
  clientId: '<YOUR_CLIENT_ID>',
25
30
  redirectUri: '<YOUR_REDIRECT_URI>',
26
31
  },
27
32
  });
28
-
29
33
  ```
30
34
 
31
35
  #### How to use the SDK in your components:
32
36
 
33
- ```js
37
+ ##### Redirect or popup mode
38
+
39
+ When using redirect or popup mode, the authentication flow involves two main components: a login page that initiates the authentication process, and a callback page that handles the response from the identity provider.
40
+
41
+ In **redirect mode**, users are redirected to the identity provider's login page in the same browser window. After successful authentication, they are redirected back to your application's callback URL.
42
+
43
+ In **popup mode**, the authentication happens in a popup window, allowing the main application to remain open while the user authenticates.
44
+
45
+ ###### Login page example
46
+
47
+ The login page is where users start the authentication process. This component automatically triggers the login flow when the page loads, redirecting users to the identity provider for authentication.
48
+
49
+ ```vue
50
+ <script setup>
51
+ const { login } = useStrivacity();
52
+
53
+ onMounted(() => {
54
+ login();
55
+ });
56
+ </script>
57
+
58
+ <template>
59
+ <section>
60
+ <h1>Redirecting...</h1>
61
+ </section>
62
+ </template>
63
+ ```
64
+
65
+ ###### Callback page example
66
+
67
+ The callback page handles the response from the identity provider after successful authentication. It processes the authentication result, extracts the tokens, and redirects users to their intended destination (typically a protected page like a profile or dashboard).
68
+
69
+ ```vue
70
+ <script setup>
71
+ const router = useRouter();
72
+ const { handleCallback } = useStrivacity();
73
+
74
+ onMounted(async () => {
75
+ try {
76
+ await handleCallback();
77
+ await router.push('/profile');
78
+ } catch (error) {
79
+ console.error('Error during callback handling:', error);
80
+ }
81
+ });
82
+ </script>
83
+
84
+ <template>
85
+ <section>
86
+ <h1>Logging in...</h1>
87
+ </section>
88
+ </template>
89
+ ```
90
+
91
+ ###### Profile page example
92
+
93
+ The profile page displays user information and authentication details after successful login. It uses the `useStrivacity` composable to access the authentication state and display relevant data such as access tokens, ID token claims, and expiration status.
94
+
95
+ We check if the user is authenticated and display their profile information. If the user is not authenticated, we redirect them to the login page.
96
+
97
+ ```vue
98
+ <script setup>
99
+ const { loading, isAuthenticated, accessToken, accessTokenExpired, accessTokenExpirationDate, idTokenClaims, refreshToken } = useStrivacity();
100
+ </script>
101
+
102
+ <template>
103
+ <section>
104
+ <h1 v-if="loading">Loading...</h1>
105
+ <dl v-else>
106
+ <dt>
107
+ <strong>accessToken</strong>
108
+ </dt>
109
+ <dd>
110
+ <pre>{{ JSON.stringify(accessToken) }}</pre>
111
+ </dd>
112
+ <dt>
113
+ <strong>refreshToken</strong>
114
+ </dt>
115
+ <dd>
116
+ <pre>{{ JSON.stringify(refreshToken) }}</pre>
117
+ </dd>
118
+ <dt>
119
+ <strong>accessTokenExpired</strong>
120
+ </dt>
121
+ <dd>
122
+ <pre>{{ JSON.stringify(accessTokenExpired) }}</pre>
123
+ </dd>
124
+ <dt>
125
+ <strong>accessTokenExpirationDate</strong>
126
+ </dt>
127
+ <dd>
128
+ <pre>{{ accessTokenExpirationDate ? new Date(accessTokenExpirationDate * 1000).toLocaleString() : JSON.stringify(null) }}</pre>
129
+ </dd>
130
+ <dt>
131
+ <strong>claims</strong>
132
+ </dt>
133
+ <dd>
134
+ <pre>{{ JSON.stringify(idTokenClaims, null, 2) }}</pre>
135
+ </dd>
136
+ </dl>
137
+ </section>
138
+ </template>
139
+ ```
140
+
141
+ ###### Logout page example
142
+
143
+ The logout page handles user logout by terminating their session. The `postLogoutRedirectUri` parameter is optional and specifies where users should be redirected after logout. If not provided, users will be redirected to the identity provider's logout page.
144
+
145
+ This URI must be configured in the Admin Console as an allowed post-logout redirect URI for your application.
146
+
147
+ ```vue
148
+ <script setup>
149
+ const router = useRouter();
150
+ const { isAuthenticated, logout } = useStrivacity();
151
+
152
+ onMounted(async () => {
153
+ if (isAuthenticated.value) {
154
+ await logout({ postLogoutRedirectUri: location.origin });
155
+ } else {
156
+ await router.push('/');
157
+ }
158
+ });
159
+ </script>
160
+
161
+ <template>
162
+ <section>
163
+ <h1>Logging out...</h1>
164
+ </section>
165
+ </template>
166
+ ```
167
+
168
+ ###### Component example
169
+
170
+ Here's a simple component example that demonstrates how to use the SDK in a component with login/logout functionality:
171
+
172
+ ```vue
34
173
  <script setup>
35
174
  const { isAuthenticated, idTokenClaims, login, logout } = useStrivacity();
36
175
  const name = computed(() => `${idTokenClaims.value?.given_name} ${idTokenClaims.value?.family_name}`);
37
176
  </script>
38
177
 
39
178
  <template>
40
- <template v-if="isAuthenticated">
179
+ <div v-if="isAuthenticated">
41
180
  <div>Welcome, {{ name }}!</div>
42
181
  <button @click="logout()">Logout</button>
43
- </template>
44
-
45
- <template v-else>
182
+ </div>
183
+ <div v-else>
46
184
  <div>Not logged in</div>
47
185
  <button @click="login()">Log in</button>
48
- </template>
186
+ </div>
49
187
  </template>
50
188
  ```
51
189
 
190
+ ##### Native mode
191
+
192
+ If you are using `native` mode, you can use the `StyLoginRenderer` component to render the login UI.
193
+
194
+ To customize the UI components used in the authentication flows, define the `widgets` object in your component.
195
+
196
+ ###### Example widgets
197
+
198
+ The example widgets use SCSS for styling and Luxon for date handling. You'll need to install these dependencies:
199
+
200
+ ```bash
201
+ npm install sass luxon
202
+ npm install --save-dev @types/luxon
203
+ ```
204
+
205
+ ```js
206
+ import CheckboxWidget from './checkbox.widget.vue';
207
+ import DateWidget from './date.widget.vue';
208
+ import InputWidget from './input.widget.vue';
209
+ import LayoutWidget from './layout.widget.vue';
210
+ import MultiSelectWidget from './multiselect.widget.vue';
211
+ import PasscodeWidget from './passcode.widget.vue';
212
+ import LoadingWidget from './loading.widget.vue';
213
+ import PasswordWidget from './password.widget.vue';
214
+ import PhoneWidget from './phone.widget.vue';
215
+ import SelectWidget from './select.widget.vue';
216
+ import StaticWidget from './static.widget.vue';
217
+ import SubmitWidget from './submit.widget.vue';
218
+
219
+ export const widgets = {
220
+ checkbox: CheckboxWidget,
221
+ date: DateWidget,
222
+ input: InputWidget,
223
+ layout: LayoutWidget,
224
+ loading: LoadingWidget,
225
+ passcode: PasscodeWidget,
226
+ password: PasswordWidget,
227
+ phone: PhoneWidget,
228
+ select: SelectWidget,
229
+ multiSelect: MultiSelectWidget,
230
+ static: StaticWidget,
231
+ submit: SubmitWidget,
232
+ };
233
+ ```
234
+
235
+ You can find example widgets here: [Example widgets](https://github.com/Strivacity/sdk-js/tree/main/apps/vue/src/components/widgets)
236
+
237
+ ###### Login page example
238
+
239
+ The native mode login page provides a fully customizable authentication experience rendered directly within your application. Unlike redirect or popup modes, native mode keeps users on your site throughout the entire authentication process using the `StyLoginRenderer` component.
240
+
241
+ This example demonstrates how to handle session management, implement callback functions for various authentication events, and manage URL parameters for session continuity.
242
+
243
+ ```vue
244
+ <script setup lang="ts">
245
+ import { FallbackError, useStrivacity, type LoginFlowState } from '@strivacity/sdk-nuxt';
246
+ import { widgets } from './components/widgets'; // Import your custom widgets
247
+
248
+ const router = useRouter();
249
+ const { options, login } = useStrivacity();
250
+ const sessionId = ref<string | null>(null);
251
+
252
+ /**
253
+ * Extract session_id from URL parameters and clean up the URL
254
+ * This is necessary for maintaining session state across external login providers
255
+ */
256
+ onMounted(() => {
257
+ if (process.client && window.location.search !== '') {
258
+ const url = new URL(window.location.href);
259
+ const sid = url.searchParams.get('session_id');
260
+ sessionId.value = sid;
261
+ url.search = '';
262
+ window.history.replaceState({}, '', url.toString());
263
+ }
264
+ });
265
+
266
+ /**
267
+ * Called when authentication is successful
268
+ * Redirects user to the profile page
269
+ */
270
+ const onLogin = async () => {
271
+ await router.push('/profile');
272
+ };
273
+
274
+ /**
275
+ * Called when native flow cannot handle the authentication
276
+ * Falls back to redirect mode by navigating to the provided URL
277
+ * @param error - FallbackError containing the fallback URL and message
278
+ */
279
+ const onFallback = (error: FallbackError) => {
280
+ if (error.url) {
281
+ console.log(`Fallback: ${error.url}`);
282
+ if (process.client) {
283
+ window.location.href = error.url.toString();
284
+ }
285
+ } else {
286
+ console.error(`FallbackError without URL: ${error.message}`);
287
+ alert(error);
288
+ }
289
+ };
290
+
291
+ /**
292
+ * Called when an error occurs during the authentication process
293
+ * @param error - Error message describing what went wrong
294
+ */
295
+ const onError = (error: string) => {
296
+ console.error(`Error: ${error}`);
297
+ alert(error);
298
+ };
299
+
300
+ /**
301
+ * Called when the authentication flow wants to display a global message
302
+ * @param message - Message to display to the user
303
+ */
304
+ const onGlobalMessage = (message: string) => {
305
+ alert(message);
306
+ };
307
+
308
+ /**
309
+ * Called when the authentication flow transitions between states
310
+ * Useful for tracking flow progress and inject custom logic such as logging or analytics
311
+ * @param params - Object containing previous and current flow states
312
+ */
313
+ const onBlockReady = ({ previousState, state }: { previousState: LoginFlowState; state: LoginFlowState }) => {
314
+ console.log('previousState', previousState);
315
+ console.log('state', state);
316
+ };
317
+ </script>
318
+
319
+ <template>
320
+ <StyLoginRenderer
321
+ :widgets="widgets"
322
+ :session-id="sessionId"
323
+ @fallback="onFallback"
324
+ @login="onLogin"
325
+ @error="onError"
326
+ @global-message="onGlobalMessage"
327
+ @block-ready="onBlockReady"
328
+ />
329
+ </template>
330
+ ```
331
+
332
+ ###### Callback page example
333
+
334
+ The native mode callback page handles authentication responses when external identity providers redirect back to your application. This page checks for session IDs in the URL parameters and either continues the native flow or falls back to standard callback handling.
335
+
336
+ This component is essential for handling social login providers (like Google, Facebook, etc.) that require redirect-based authentication even within native mode flows.
337
+
338
+ ```vue
339
+ <script setup>
340
+ const query = computed(() => (process.client ? Object.fromEntries(new URLSearchParams(window.location.search)) : {}));
341
+ const router = useRouter();
342
+ const { handleCallback } = useStrivacity();
343
+
344
+ onMounted(async () => {
345
+ if (process.client) {
346
+ const url = new URL(location.href);
347
+ const sessionId = url.searchParams.get('session_id');
348
+
349
+ if (sessionId) {
350
+ await router.push(`/login?session_id=${sessionId}`);
351
+ } else {
352
+ try {
353
+ await handleCallback();
354
+ await router.push('/profile');
355
+ } catch (error) {
356
+ console.error('Error during callback handling:', error);
357
+ }
358
+ }
359
+ }
360
+ });
361
+ </script>
362
+
363
+ <template>
364
+ <section v-if="query.error">
365
+ <h1>Error in authentication</h1>
366
+ <div>
367
+ <h4>{{ query.error }}</h4>
368
+ <p>{{ query.error_description }}</p>
369
+ </div>
370
+ </section>
371
+ <section v-else>
372
+ <h1>Logging in...</h1>
373
+ </section>
374
+ </template>
375
+ ```
376
+
377
+ ###### Profile page example
378
+
379
+ Same as the profile page example in redirect/popup mode.
380
+
381
+ ###### Logout page example
382
+
383
+ Same as the logout page example in redirect/popup mode.
384
+
52
385
  ### API Documentation
53
386
 
54
- #### `useStrivacity` hook
387
+ #### `useStrivacity` composable
55
388
 
56
389
  ```typescript
57
- useStrivacity<T extends PopupContext | RedirectContext>(): T;
390
+ useStrivacity<T extends PopupContext | RedirectContext | NativeContext>(): T;
58
391
  ```
59
392
 
60
- You can choose between `PopupContext` or `RedirectContext` with the `mode` option when you configure the sdk options.
393
+ You can choose between `PopupContext`, `RedirectContext`, or `NativeContext` using the `mode` option when configuring the SDK.
61
394
 
62
395
  **Properties**
63
396
 
64
- - **`loading: boolean`**: Indicates if the session is being loaded.
65
- - **`isAuthenticated: boolean`**: Indicates whether the user is authenticated.
66
- - **`idTokenClaims: IdTokenClaims | null`**: Claims from the ID token or null if not available.
67
- - **`accessToken: string | null`**: The access token or null if not available.
68
- - **`refreshToken: string | null`**: The refresh token or null if not available.
69
- - **`accessTokenExpired: boolean`**: Indicates if the access token has expired.
70
- - **`accessTokenExpirationDate: number | null`**: Expiration date of the access token or null if not set.
397
+ - **`sdk: RedirectFlow | PopupFlow | NativeFlow`**: Returns the SDK instance based on the configured mode.
398
+ - **`loading: Ref<boolean>`**: Indicates if the session is being loaded.
399
+ - **`options: SDKOptions`**: The configured options for the SDK.
400
+ - **`isAuthenticated: Ref<boolean>`**: Indicates whether the user is authenticated.
401
+ - **`idTokenClaims: Ref<IdTokenClaims | null>`**: Claims from the ID token, or null if not available.
402
+ - **`accessToken: Ref<string | null>`**: The access token, or null if not available.
403
+ - **`refreshToken: Ref<string | null>`**: The refresh token, or null if not available.
404
+ - **`accessTokenExpired: Ref<boolean>`**: Indicates if the access token has expired.
405
+ - **`accessTokenExpirationDate: Ref<number | null>`**: Expiration date of the access token, or null if not set.
71
406
 
72
407
  ---
73
408
 
74
- Type: `RedirectContext`
75
- Represents the available methods for Redirect-based interactions.
409
+ **Type: `RedirectContext`**
410
+
411
+ Represents the available methods for redirect-based interactions.
76
412
 
77
413
  - **`login(options?: LoginOptions): Promise<void>`**: Initiates the login process by redirecting the user to the identity provider.
78
414
  - `options` (optional): Configuration options for login.
@@ -80,15 +416,16 @@ Represents the available methods for Redirect-based interactions.
80
416
  - `options` (optional): Configuration options for registration.
81
417
  - **`refresh(): Promise<void>`**: Refreshes the user's session using a redirect flow.
82
418
  - **`revoke(): Promise<void>`**: Revokes the current session tokens using a redirect flow.
83
- - **`logout(options?: LogoutOptions): Promise<void>`**: Logs out the user by redirecting to the logout page.
419
+ - **`logout(options?: LogoutOptions): Promise<void>`**: Logs out the user by redirecting to the identity provider.
84
420
  - `options` (optional): Configuration options for logout.
85
421
  - **`handleCallback(url?: string): Promise<void>`**: Handles the callback after a redirect-based authentication or token exchange.
86
422
  - `url` (optional): The URL to handle for the callback.
87
423
 
88
424
  ---
89
425
 
90
- Type: `PopupContext`
91
- Represents the available methods for Popup-based interactions.
426
+ **Type: `PopupContext`**
427
+
428
+ Represents the available methods for popup-based interactions.
92
429
 
93
430
  - **`login(options?: LoginOptions): Promise<void>`**: Initiates the login process using a popup window.
94
431
  - `options` (optional): Configuration options for login.
@@ -101,6 +438,79 @@ Represents the available methods for Popup-based interactions.
101
438
  - **`handleCallback(url?: string): Promise<void>`**: Handles the callback after a popup-based authentication or token exchange.
102
439
  - `url` (optional): The URL to handle for the callback.
103
440
 
441
+ ---
442
+
443
+ **Type: `NativeContext`**
444
+
445
+ Represents the available methods for native-based interactions.
446
+
447
+ - **`login(options?: LoginOptions): Promise<NativeFlowHandler>`**: Initiates the login process using a native flow.
448
+ - `options` (optional): Configuration options for login.
449
+ - **`register(options?: RegisterOptions): Promise<NativeFlowHandler>`**: Registers a new user using a native flow.
450
+ - `options` (optional): Configuration options for registration.
451
+ - **`refresh(): Promise<void>`**: Refreshes the user's session.
452
+ - **`revoke(): Promise<void>`**: Revokes the current session tokens.
453
+ - **`logout(options?: LogoutOptions): Promise<void>`**: Logs out the user by redirecting to the logout page.
454
+ - `options` (optional): Configuration options for logout.
455
+ - **`handleCallback(url?: string): Promise<void>`**: Handles the callback after a redirect-based authentication. This will be called automatically by the native flow handler during fallback.
456
+ - `url` (optional): The URL to handle for the callback.
457
+
458
+ #### `StyLoginRenderer` component
459
+
460
+ The `StyLoginRenderer` component is used in native mode to render the authentication UI directly within your application. It provides a fully customizable login experience using your own UI components.
461
+
462
+ ```typescript
463
+ StyLoginRenderer: Vue.Component<{
464
+ params?: NativeParams;
465
+ widgets?: PartialRecord<WidgetType, Vue.Component>;
466
+ sessionId?: string | null;
467
+ onLogin?: (claims?: IdTokenClaims | null) => void;
468
+ onFallback?: (error: FallbackError) => void;
469
+ onError?: (error: any) => void;
470
+ onGlobalMessage?: (message: string) => void;
471
+ onBlockReady?: ({ previousState, state }: { previousState: LoginFlowState; state: LoginFlowState }) => void;
472
+ }>;
473
+ ```
474
+
475
+ **Properties**
476
+
477
+ - **`params?: NativeParams`** (optional): Additional parameters to pass to the native login flow. These parameters can include custom configuration options for the authentication process.
478
+
479
+ - **`widgets?: PartialRecord<WidgetType, Vue.Component>`** (optional): A collection of Vue components that define the UI widgets used in the authentication flow. Each widget type (input, button, layout, etc.) can be customized with your own components.
480
+
481
+ - **`sessionId?: string | null`** (optional): The session ID for continuing an existing authentication session. This is typically extracted from URL parameters when returning from external identity providers.
482
+
483
+ **Events**
484
+
485
+ - **`@login?: (claims?: IdTokenClaims | null) => void`** (optional): Event emitted when authentication is successful. Receives the ID token claims as a parameter.
486
+
487
+ - **`@fallback?: (error: FallbackError) => void`** (optional): Event emitted when the native flow cannot handle the authentication and needs to fall back to redirect mode. The error parameter contains the fallback URL.
488
+
489
+ - **`@error?: (error: any) => void`** (optional): Event emitted when an error occurs during the authentication process. Use this to handle and display error messages to users.
490
+
491
+ - **`@global-message?: (message: string) => void`** (optional): Event emitted when the authentication flow wants to display a global message to the user (e.g., account lockout warnings, validation messages).
492
+
493
+ - **`@block-ready?: ({ previousState, state }: { previousState: LoginFlowState; state: LoginFlowState }) => void`** (optional): Event emitted when the authentication flow transitions between states. Useful for tracking progress, implementing custom logging, or injecting analytics. Receives both the previous and current flow states.
494
+
495
+ **Widget Types**
496
+
497
+ The `widgets` prop accepts the following widget types:
498
+
499
+ - `checkbox`: For checkbox input fields
500
+ - `date`: For date input fields
501
+ - `input`: For text input fields
502
+ - `layout`: For layout containers and form structure
503
+ - `loading`: For loading indicators
504
+ - `multiSelect`: For multi-select dropdown fields
505
+ - `passcode`: For passcode input fields
506
+ - `password`: For password input fields
507
+ - `phone`: For phone number input fields
508
+ - `select`: For single-select dropdown fields
509
+ - `static`: For static text and display elements
510
+ - `submit`: For form submission buttons
511
+
512
+ Each widget component receives props specific to its type and function within the authentication flow.
513
+
104
514
  ### Links
105
515
 
106
516
  [Example app](https://github.com/Strivacity/sdk-js/tree/main/apps/nuxt)
package/dist/module.d.mts CHANGED
@@ -1,10 +1,13 @@
1
1
  import * as _nuxt_schema from '@nuxt/schema';
2
- import { IdTokenClaims, SDKOptions } from '@strivacity/sdk-core';
3
- export { IdTokenClaims, SDKOptions, SDKStorage } from '@strivacity/sdk-core';
2
+ import { SDKOptions, IdTokenClaims, LoginFlowMessage, LoginFlowState } from '@strivacity/sdk-core';
3
+ export * from '@strivacity/sdk-core';
4
4
  import { PopupFlow } from '@strivacity/sdk-core/flows/PopupFlow';
5
5
  export { PopupFlow } from '@strivacity/sdk-core/flows/PopupFlow';
6
6
  import { RedirectFlow } from '@strivacity/sdk-core/flows/RedirectFlow';
7
7
  export { RedirectFlow } from '@strivacity/sdk-core/flows/RedirectFlow';
8
+ import { NativeFlow } from '@strivacity/sdk-core/flows/NativeFlow';
9
+ export { NativeFlow } from '@strivacity/sdk-core/flows/NativeFlow';
10
+ export { HttpClient } from '@strivacity/sdk-core/utils/HttpClient';
8
11
  export { LocalStorage } from '@strivacity/sdk-core/storages/LocalStorage';
9
12
  export { SessionStorage } from '@strivacity/sdk-core/storages/SessionStorage';
10
13
  import { Ref } from 'vue';
@@ -18,6 +21,10 @@ type Session = {
18
21
  * `true` when the session is initializing, otherwise `false`.
19
22
  */
20
23
  loading: Ref<boolean>;
24
+ /**
25
+ * The SDK options used to configure the session.
26
+ */
27
+ options: Ref<SDKOptions>;
21
28
  /**
22
29
  * Reactive reference to the user's authentication status.
23
30
  * `true` if the user is authenticated, otherwise `false`.
@@ -53,28 +60,29 @@ type Session = {
53
60
  * Represents the available authentication flows and operations for Popup-based interactions.
54
61
  */
55
62
  type PopupSDK = {
63
+ sdk: InstanceType<typeof PopupFlow>;
56
64
  /**
57
- * Initiates the login process using a popup window.
65
+ * Initiates the login process.
58
66
  */
59
67
  login: InstanceType<typeof PopupFlow>['login'];
60
68
  /**
61
- * Registers a new user using a popup flow.
69
+ * Registers a new user.
62
70
  */
63
71
  register: InstanceType<typeof PopupFlow>['register'];
64
72
  /**
65
- * Refreshes the user's session using a popup.
73
+ * Refreshes the user's session.
66
74
  */
67
75
  refresh: InstanceType<typeof PopupFlow>['refresh'];
68
76
  /**
69
- * Revokes the current session tokens using a popup flow.
77
+ * Revokes the current session tokens.
70
78
  */
71
79
  revoke: InstanceType<typeof PopupFlow>['revoke'];
72
80
  /**
73
- * Logs out the user using a popup window.
81
+ * Logs out the user.
74
82
  */
75
83
  logout: InstanceType<typeof PopupFlow>['logout'];
76
84
  /**
77
- * Handles the callback after a popup-based authentication or token exchange.
85
+ * Handles the callback after authentication or token exchange.
78
86
  */
79
87
  handleCallback: InstanceType<typeof PopupFlow>['handleCallback'];
80
88
  };
@@ -82,31 +90,62 @@ type PopupSDK = {
82
90
  * Represents the available authentication flows and operations for Redirect-based interactions.
83
91
  */
84
92
  type RedirectSDK = {
93
+ sdk: InstanceType<typeof RedirectFlow>;
85
94
  /**
86
- * Initiates the login process by redirecting the user to the identity provider.
95
+ * Initiates the login process.
87
96
  */
88
97
  login: InstanceType<typeof RedirectFlow>['login'];
89
98
  /**
90
- * Registers a new user using a redirect flow.
99
+ * Registers a new user.
91
100
  */
92
101
  register: InstanceType<typeof RedirectFlow>['register'];
93
102
  /**
94
- * Refreshes the user's session using a redirect flow.
103
+ * Refreshes the user's session.
95
104
  */
96
105
  refresh: InstanceType<typeof RedirectFlow>['refresh'];
97
106
  /**
98
- * Revokes the current session tokens using a redirect flow.
107
+ * Revokes the current session tokens.
99
108
  */
100
109
  revoke: InstanceType<typeof RedirectFlow>['revoke'];
101
110
  /**
102
- * Logs out the user by redirecting to the logout page.
111
+ * Logs out the user.
103
112
  */
104
113
  logout: InstanceType<typeof RedirectFlow>['logout'];
105
114
  /**
106
- * Handles the callback after a redirect-based authentication or token exchange.
115
+ * Handles the callback after authentication or token exchange.
107
116
  */
108
117
  handleCallback: InstanceType<typeof RedirectFlow>['handleCallback'];
109
118
  };
119
+ /**
120
+ * Represents the available authentication flows and operations for Native-based interactions.
121
+ */
122
+ type NativeSDK = {
123
+ sdk: InstanceType<typeof NativeFlow>;
124
+ /**
125
+ * Initiates the login process.
126
+ */
127
+ login: InstanceType<typeof NativeFlow>['login'];
128
+ /**
129
+ * Registers a new user.
130
+ */
131
+ register: InstanceType<typeof NativeFlow>['register'];
132
+ /**
133
+ * Refreshes the user's session.
134
+ */
135
+ refresh: InstanceType<typeof NativeFlow>['refresh'];
136
+ /**
137
+ * Revokes the current session tokens.
138
+ */
139
+ revoke: InstanceType<typeof NativeFlow>['revoke'];
140
+ /**
141
+ * Logs out the user.
142
+ */
143
+ logout: InstanceType<typeof NativeFlow>['logout'];
144
+ /**
145
+ * Handles the callback after authentication or token exchange.
146
+ */
147
+ handleCallback: InstanceType<typeof NativeFlow>['handleCallback'];
148
+ };
110
149
  /**
111
150
  * Represents a combined context for Popup-based flows, containing both the Popup SDK and the session state.
112
151
  */
@@ -115,6 +154,20 @@ type PopupContext = PopupSDK & Session;
115
154
  * Represents a combined context for Redirect-based flows, containing both the Redirect SDK and the session state.
116
155
  */
117
156
  type RedirectContext = RedirectSDK & Session;
157
+ /**
158
+ * Represents a combined context for Redirect-based flows, containing both the Redirect SDK and the session state.
159
+ */
160
+ type NativeContext = NativeSDK & Session;
161
+ type NativeFlowContextValue = {
162
+ loading: Ref<boolean>;
163
+ forms: Ref<Record<string, Record<string, unknown>>>;
164
+ messages: Ref<Record<string, Record<string, LoginFlowMessage>>>;
165
+ state: Ref<Partial<LoginFlowState>>;
166
+ submitForm: (formId: string) => Promise<void>;
167
+ triggerFallback: (hostedUrl?: string) => void;
168
+ setFormValue: (formId: string, widgetId: string, value: unknown) => void;
169
+ setMessage: (formId: string, widgetId: string, value: LoginFlowMessage) => void;
170
+ };
118
171
 
119
172
  declare module '@nuxt/schema' {
120
173
  interface PublicRuntimeConfig {
@@ -125,4 +178,4 @@ type ModuleOptions = SDKOptions;
125
178
 
126
179
  declare const _default: _nuxt_schema.NuxtModule<SDKOptions, SDKOptions, false>;
127
180
 
128
- export { type ModuleOptions, type PopupContext, type PopupSDK, type RedirectContext, type RedirectSDK, type Session, _default as default };
181
+ export { type ModuleOptions, type NativeContext, type NativeFlowContextValue, type NativeSDK, type PopupContext, type PopupSDK, type RedirectContext, type RedirectSDK, type Session, _default as default };
package/dist/module.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@strivacity/sdk-nuxt",
3
3
  "configKey": "strivacity",
4
- "version": "1.0.1",
4
+ "version": "2.0.0-beta.2",
5
5
  "builder": {
6
- "@nuxt/module-builder": "0.8.4",
7
- "unbuild": "2.0.0"
6
+ "@nuxt/module-builder": "1.0.1",
7
+ "unbuild": "3.5.0"
8
8
  }
9
9
  }