@strivacity/sdk-vue 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.
- package/CHANGELOG.md +24 -0
- package/README.md +460 -28
- package/dist/assets/login-renderer.vue_vue_type_script_setup_true_lang.cjs +2 -0
- package/dist/assets/login-renderer.vue_vue_type_script_setup_true_lang.cjs.map +1 -0
- package/dist/assets/login-renderer.vue_vue_type_script_setup_true_lang.mjs +2 -0
- package/dist/assets/login-renderer.vue_vue_type_script_setup_true_lang.mjs.map +1 -0
- package/dist/composables.cjs +2 -0
- package/dist/composables.cjs.map +1 -0
- package/dist/composables.d.ts +13 -0
- package/dist/composables.mjs +2 -0
- package/dist/composables.mjs.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +9 -15
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/dist/login-renderer.cjs +2 -0
- package/dist/login-renderer.cjs.map +1 -0
- package/dist/login-renderer.mjs +2 -0
- package/dist/login-renderer.mjs.map +1 -0
- package/dist/login-renderer.vue.d.ts +31 -0
- package/dist/types.d.ts +73 -13
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
## 2.0.0-beta.2 (2025-07-24)
|
|
2
|
+
|
|
3
|
+
### 🧱 Updated Dependencies
|
|
4
|
+
|
|
5
|
+
- Updated sdk-core to 2.0.0-beta.2
|
|
6
|
+
- Updated sdk-core to 2.0.0-beta.2
|
|
7
|
+
|
|
8
|
+
## 2.0.0-beta (2025-07-24)
|
|
9
|
+
|
|
10
|
+
### 🚀 Features
|
|
11
|
+
|
|
12
|
+
- ionic example app added ([494805a](https://github.com/strivacity/sdk-js/commit/494805a))
|
|
13
|
+
- ⚠️ NativeFlow implemented ([75b353f](https://github.com/strivacity/sdk-js/commit/75b353f))
|
|
14
|
+
- @strivacity/sdk-vue package implemented ([8c526f5](https://github.com/strivacity/sdk-js/commit/8c526f5))
|
|
15
|
+
|
|
16
|
+
### ⚠️ Breaking Changes
|
|
17
|
+
|
|
18
|
+
- ⚠️ NativeFlow implemented ([75b353f](https://github.com/strivacity/sdk-js/commit/75b353f))
|
|
19
|
+
|
|
20
|
+
### 🧱 Updated Dependencies
|
|
21
|
+
|
|
22
|
+
- Updated sdk-core to 2.0.0-beta
|
|
23
|
+
- Updated sdk-core to 2.0.0-beta
|
|
24
|
+
|
|
1
25
|
## 1.0.1 (2025-02-03)
|
|
2
26
|
|
|
3
27
|
|
package/README.md
CHANGED
|
@@ -2,23 +2,29 @@
|
|
|
2
2
|
|
|
3
3
|
> **The SDK supports Vue version 3 and above**
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## Example Apps
|
|
6
|
+
|
|
7
|
+
- [Example app](https://github.com/Strivacity/sdk-js/tree/main/apps/vue)
|
|
8
|
+
- [Ionic Example app](https://github.com/Strivacity/sdk-js/tree/main/apps/ionic-vue)
|
|
9
|
+
|
|
10
|
+
## Install
|
|
6
11
|
|
|
7
12
|
```bash
|
|
8
13
|
npm install @strivacity/sdk-vue
|
|
9
14
|
```
|
|
10
15
|
|
|
11
|
-
|
|
16
|
+
## Usage
|
|
12
17
|
|
|
13
|
-
|
|
18
|
+
### Add this to your main file
|
|
14
19
|
|
|
15
20
|
```js
|
|
16
21
|
import { createApp } from 'vue';
|
|
17
22
|
import App from './App.vue';
|
|
18
23
|
import { createStrivacitySDK } from '@strivacity/sdk-vue';
|
|
19
24
|
|
|
20
|
-
const app = createApp(
|
|
25
|
+
const app = createApp(App);
|
|
21
26
|
const sdk = createStrivacitySDK({
|
|
27
|
+
mode: 'redirect', // or 'popup' or 'native'
|
|
22
28
|
issuer: 'https://<YOUR_DOMAIN>',
|
|
23
29
|
scopes: ['openid', 'profile'],
|
|
24
30
|
clientId: '<YOUR_CLIENT_ID>',
|
|
@@ -29,9 +35,162 @@ app.use(sdk);
|
|
|
29
35
|
app.mount('#app');
|
|
30
36
|
```
|
|
31
37
|
|
|
32
|
-
|
|
38
|
+
## Example Apps
|
|
33
39
|
|
|
34
|
-
|
|
40
|
+
- [Example app](https://github.com/Strivacity/sdk-js/tree/main/apps/vue)
|
|
41
|
+
- [Ionic Example app](https://github.com/Strivacity/sdk-js/tree/main/apps/ionic-vue)
|
|
42
|
+
|
|
43
|
+
### How to use the SDK in your components
|
|
44
|
+
|
|
45
|
+
#### Redirect or popup mode
|
|
46
|
+
|
|
47
|
+
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.
|
|
48
|
+
|
|
49
|
+
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.
|
|
50
|
+
|
|
51
|
+
In **popup mode**, the authentication happens in a popup window, allowing the main application to remain open while the user authenticates.
|
|
52
|
+
|
|
53
|
+
##### Login page example
|
|
54
|
+
|
|
55
|
+
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.
|
|
56
|
+
|
|
57
|
+
```vue
|
|
58
|
+
<script setup>
|
|
59
|
+
import { onMounted } from 'vue';
|
|
60
|
+
import { useStrivacity } from '@strivacity/sdk-vue';
|
|
61
|
+
|
|
62
|
+
const { login } = useStrivacity();
|
|
63
|
+
|
|
64
|
+
onMounted(() => {
|
|
65
|
+
login();
|
|
66
|
+
});
|
|
67
|
+
</script>
|
|
68
|
+
|
|
69
|
+
<template>
|
|
70
|
+
<section>
|
|
71
|
+
<h1>Redirecting...</h1>
|
|
72
|
+
</section>
|
|
73
|
+
</template>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
##### Callback page example
|
|
77
|
+
|
|
78
|
+
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).
|
|
79
|
+
|
|
80
|
+
```vue
|
|
81
|
+
<script setup>
|
|
82
|
+
import { onMounted } from 'vue';
|
|
83
|
+
import { useRouter } from 'vue-router';
|
|
84
|
+
import { useStrivacity } from '@strivacity/sdk-vue';
|
|
85
|
+
|
|
86
|
+
const router = useRouter();
|
|
87
|
+
const { handleCallback } = useStrivacity();
|
|
88
|
+
|
|
89
|
+
onMounted(async () => {
|
|
90
|
+
try {
|
|
91
|
+
await handleCallback();
|
|
92
|
+
await router.push('/profile');
|
|
93
|
+
} catch (error) {
|
|
94
|
+
console.error('Error during callback handling:', error);
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
</script>
|
|
98
|
+
|
|
99
|
+
<template>
|
|
100
|
+
<section>
|
|
101
|
+
<h1>Logging in...</h1>
|
|
102
|
+
</section>
|
|
103
|
+
</template>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
##### Profile page example
|
|
107
|
+
|
|
108
|
+
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.
|
|
109
|
+
|
|
110
|
+
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.
|
|
111
|
+
|
|
112
|
+
```vue
|
|
113
|
+
<script setup>
|
|
114
|
+
import { useStrivacity } from '@strivacity/sdk-vue';
|
|
115
|
+
|
|
116
|
+
const { loading, isAuthenticated, accessToken, accessTokenExpired, accessTokenExpirationDate, idTokenClaims, refreshToken } = useStrivacity();
|
|
117
|
+
</script>
|
|
118
|
+
|
|
119
|
+
<template>
|
|
120
|
+
<section>
|
|
121
|
+
<h1 v-if="loading">Loading...</h1>
|
|
122
|
+
<dl v-else>
|
|
123
|
+
<dt>
|
|
124
|
+
<strong>accessToken</strong>
|
|
125
|
+
</dt>
|
|
126
|
+
<dd>
|
|
127
|
+
<pre>{{ JSON.stringify(accessToken) }}</pre>
|
|
128
|
+
</dd>
|
|
129
|
+
<dt>
|
|
130
|
+
<strong>refreshToken</strong>
|
|
131
|
+
</dt>
|
|
132
|
+
<dd>
|
|
133
|
+
<pre>{{ JSON.stringify(refreshToken) }}</pre>
|
|
134
|
+
</dd>
|
|
135
|
+
<dt>
|
|
136
|
+
<strong>accessTokenExpired</strong>
|
|
137
|
+
</dt>
|
|
138
|
+
<dd>
|
|
139
|
+
<pre>{{ JSON.stringify(accessTokenExpired) }}</pre>
|
|
140
|
+
</dd>
|
|
141
|
+
<dt>
|
|
142
|
+
<strong>accessTokenExpirationDate</strong>
|
|
143
|
+
</dt>
|
|
144
|
+
<dd>
|
|
145
|
+
<pre>{{ accessTokenExpirationDate ? new Date(accessTokenExpirationDate * 1000).toLocaleString() : JSON.stringify(null) }}</pre>
|
|
146
|
+
</dd>
|
|
147
|
+
<dt>
|
|
148
|
+
<strong>claims</strong>
|
|
149
|
+
</dt>
|
|
150
|
+
<dd>
|
|
151
|
+
<pre>{{ JSON.stringify(idTokenClaims, null, 2) }}</pre>
|
|
152
|
+
</dd>
|
|
153
|
+
</dl>
|
|
154
|
+
</section>
|
|
155
|
+
</template>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
##### Logout page example
|
|
159
|
+
|
|
160
|
+
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.
|
|
161
|
+
|
|
162
|
+
This URI must be configured in the Admin Console as an allowed post-logout redirect URI for your application.
|
|
163
|
+
|
|
164
|
+
```vue
|
|
165
|
+
<script setup>
|
|
166
|
+
import { onMounted } from 'vue';
|
|
167
|
+
import { useRouter } from 'vue-router';
|
|
168
|
+
import { useStrivacity } from '@strivacity/sdk-vue';
|
|
169
|
+
|
|
170
|
+
const router = useRouter();
|
|
171
|
+
const { isAuthenticated, logout } = useStrivacity();
|
|
172
|
+
|
|
173
|
+
onMounted(async () => {
|
|
174
|
+
if (isAuthenticated.value) {
|
|
175
|
+
await logout({ postLogoutRedirectUri: location.origin });
|
|
176
|
+
} else {
|
|
177
|
+
await router.push('/');
|
|
178
|
+
}
|
|
179
|
+
});
|
|
180
|
+
</script>
|
|
181
|
+
|
|
182
|
+
<template>
|
|
183
|
+
<section>
|
|
184
|
+
<h1>Logging out...</h1>
|
|
185
|
+
</section>
|
|
186
|
+
</template>
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
##### Component example
|
|
190
|
+
|
|
191
|
+
Here's a simple component example that demonstrates how to use the SDK in a component with login/logout functionality:
|
|
192
|
+
|
|
193
|
+
```vue
|
|
35
194
|
<script setup>
|
|
36
195
|
import { computed } from 'vue';
|
|
37
196
|
import { useStrivacity } from '@strivacity/sdk-vue';
|
|
@@ -41,42 +200,241 @@ const name = computed(() => `${idTokenClaims.value?.given_name} ${idTokenClaims.
|
|
|
41
200
|
</script>
|
|
42
201
|
|
|
43
202
|
<template>
|
|
44
|
-
<
|
|
203
|
+
<div v-if="isAuthenticated">
|
|
45
204
|
<div>Welcome, {{ name }}!</div>
|
|
46
205
|
<button @click="logout()">Logout</button>
|
|
47
|
-
</
|
|
48
|
-
|
|
49
|
-
<template v-else>
|
|
206
|
+
</div>
|
|
207
|
+
<div v-else>
|
|
50
208
|
<div>Not logged in</div>
|
|
51
209
|
<button @click="login()">Log in</button>
|
|
52
|
-
</
|
|
210
|
+
</div>
|
|
211
|
+
</template>
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
#### Native mode
|
|
215
|
+
|
|
216
|
+
If you are using `native` mode, you can use the `StyLoginRenderer` component to render the login UI.
|
|
217
|
+
|
|
218
|
+
To customize the UI components used in the authentication flows, define the `widgets` object in your component.
|
|
219
|
+
|
|
220
|
+
##### Example widgets
|
|
221
|
+
|
|
222
|
+
The example widgets use SCSS for styling and Luxon for date handling. You'll need to install these dependencies:
|
|
223
|
+
|
|
224
|
+
```bash
|
|
225
|
+
npm install sass luxon
|
|
226
|
+
npm install --save-dev @types/luxon
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
```js
|
|
230
|
+
import CheckboxWidget from './checkbox.widget.vue';
|
|
231
|
+
import DateWidget from './date.widget.vue';
|
|
232
|
+
import InputWidget from './input.widget.vue';
|
|
233
|
+
import LayoutWidget from './layout.widget.vue';
|
|
234
|
+
import MultiSelectWidget from './multiselect.widget.vue';
|
|
235
|
+
import PasscodeWidget from './passcode.widget.vue';
|
|
236
|
+
import LoadingWidget from './loading.widget.vue';
|
|
237
|
+
import PasswordWidget from './password.widget.vue';
|
|
238
|
+
import PhoneWidget from './phone.widget.vue';
|
|
239
|
+
import SelectWidget from './select.widget.vue';
|
|
240
|
+
import StaticWidget from './static.widget.vue';
|
|
241
|
+
import SubmitWidget from './submit.widget.vue';
|
|
242
|
+
|
|
243
|
+
export const widgets = {
|
|
244
|
+
checkbox: CheckboxWidget,
|
|
245
|
+
date: DateWidget,
|
|
246
|
+
input: InputWidget,
|
|
247
|
+
layout: LayoutWidget,
|
|
248
|
+
loading: LoadingWidget,
|
|
249
|
+
passcode: PasscodeWidget,
|
|
250
|
+
password: PasswordWidget,
|
|
251
|
+
phone: PhoneWidget,
|
|
252
|
+
select: SelectWidget,
|
|
253
|
+
multiSelect: MultiSelectWidget,
|
|
254
|
+
static: StaticWidget,
|
|
255
|
+
submit: SubmitWidget,
|
|
256
|
+
};
|
|
257
|
+
```
|
|
258
|
+
|
|
259
|
+
You can find example widgets here: [Example widgets](https://github.com/Strivacity/sdk-js/tree/main/apps/vue/src/components/widgets)
|
|
260
|
+
|
|
261
|
+
##### Login page example
|
|
262
|
+
|
|
263
|
+
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.
|
|
264
|
+
|
|
265
|
+
This example demonstrates how to handle session management, implement callback functions for various authentication events, and manage URL parameters for session continuity.
|
|
266
|
+
|
|
267
|
+
```vue
|
|
268
|
+
<script setup lang="ts">
|
|
269
|
+
import { ref, onMounted } from 'vue';
|
|
270
|
+
import { useRouter } from 'vue-router';
|
|
271
|
+
import { FallbackError, useStrivacity, type LoginFlowState } from '@strivacity/sdk-vue';
|
|
272
|
+
import { widgets } from './components/widgets'; // Import your custom widgets
|
|
273
|
+
|
|
274
|
+
const router = useRouter();
|
|
275
|
+
const { options, login } = useStrivacity();
|
|
276
|
+
const sessionId = ref<string | null>(null);
|
|
277
|
+
|
|
278
|
+
/**
|
|
279
|
+
* Extract session_id from URL parameters and clean up the URL
|
|
280
|
+
* This is necessary for maintaining session state across external login providers
|
|
281
|
+
*/
|
|
282
|
+
onMounted(() => {
|
|
283
|
+
if (window.location.search !== '') {
|
|
284
|
+
const url = new URL(window.location.href);
|
|
285
|
+
const sid = url.searchParams.get('session_id');
|
|
286
|
+
sessionId.value = sid;
|
|
287
|
+
url.search = '';
|
|
288
|
+
window.history.replaceState({}, '', url.toString());
|
|
289
|
+
}
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
/**
|
|
293
|
+
* Called when authentication is successful
|
|
294
|
+
* Redirects user to the profile page
|
|
295
|
+
*/
|
|
296
|
+
const onLogin = async () => {
|
|
297
|
+
await router.push('/profile');
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
/**
|
|
301
|
+
* Called when native flow cannot handle the authentication
|
|
302
|
+
* Falls back to redirect mode by navigating to the provided URL
|
|
303
|
+
* @param error - FallbackError containing the fallback URL and message
|
|
304
|
+
*/
|
|
305
|
+
const onFallback = (error: FallbackError) => {
|
|
306
|
+
if (error.url) {
|
|
307
|
+
console.log(`Fallback: ${error.url}`);
|
|
308
|
+
window.location.href = error.url.toString();
|
|
309
|
+
} else {
|
|
310
|
+
console.error(`FallbackError without URL: ${error.message}`);
|
|
311
|
+
alert(error);
|
|
312
|
+
}
|
|
313
|
+
};
|
|
314
|
+
|
|
315
|
+
/**
|
|
316
|
+
* Called when an error occurs during the authentication process
|
|
317
|
+
* @param error - Error message describing what went wrong
|
|
318
|
+
*/
|
|
319
|
+
const onError = (error: string) => {
|
|
320
|
+
console.error(`Error: ${error}`);
|
|
321
|
+
alert(error);
|
|
322
|
+
};
|
|
323
|
+
|
|
324
|
+
/**
|
|
325
|
+
* Called when the authentication flow wants to display a global message
|
|
326
|
+
* @param message - Message to display to the user
|
|
327
|
+
*/
|
|
328
|
+
const onGlobalMessage = (message: string) => {
|
|
329
|
+
alert(message);
|
|
330
|
+
};
|
|
331
|
+
|
|
332
|
+
/**
|
|
333
|
+
* Called when the authentication flow transitions between states
|
|
334
|
+
* Useful for tracking flow progress and inject custom logic such as logging or analytics
|
|
335
|
+
* @param params - Object containing previous and current flow states
|
|
336
|
+
*/
|
|
337
|
+
const onBlockReady = ({ previousState, state }: { previousState: LoginFlowState; state: LoginFlowState }) => {
|
|
338
|
+
console.log('previousState', previousState);
|
|
339
|
+
console.log('state', state);
|
|
340
|
+
};
|
|
341
|
+
</script>
|
|
342
|
+
|
|
343
|
+
<template>
|
|
344
|
+
<StyLoginRenderer
|
|
345
|
+
:widgets="widgets"
|
|
346
|
+
:session-id="sessionId"
|
|
347
|
+
@fallback="onFallback"
|
|
348
|
+
@login="onLogin"
|
|
349
|
+
@error="onError"
|
|
350
|
+
@global-message="onGlobalMessage"
|
|
351
|
+
@block-ready="onBlockReady"
|
|
352
|
+
/>
|
|
353
|
+
</template>
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
##### Callback page example
|
|
357
|
+
|
|
358
|
+
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.
|
|
359
|
+
|
|
360
|
+
This component is essential for handling social login providers (like Google, Facebook, etc.) that require redirect-based authentication even within native mode flows.
|
|
361
|
+
|
|
362
|
+
```vue
|
|
363
|
+
<script setup>
|
|
364
|
+
import { onMounted, computed } from 'vue';
|
|
365
|
+
import { useRouter } from 'vue-router';
|
|
366
|
+
import { useStrivacity } from '@strivacity/sdk-vue';
|
|
367
|
+
|
|
368
|
+
const query = computed(() => (typeof window !== 'undefined' ? Object.fromEntries(new URLSearchParams(window.location.search)) : {}));
|
|
369
|
+
const router = useRouter();
|
|
370
|
+
const { handleCallback } = useStrivacity();
|
|
371
|
+
|
|
372
|
+
onMounted(async () => {
|
|
373
|
+
const url = new URL(location.href);
|
|
374
|
+
const sessionId = url.searchParams.get('session_id');
|
|
375
|
+
|
|
376
|
+
if (sessionId) {
|
|
377
|
+
await router.push(`/login?session_id=${sessionId}`);
|
|
378
|
+
} else {
|
|
379
|
+
try {
|
|
380
|
+
await handleCallback();
|
|
381
|
+
await router.push('/profile');
|
|
382
|
+
} catch (error) {
|
|
383
|
+
console.error('Error during callback handling:', error);
|
|
384
|
+
}
|
|
385
|
+
}
|
|
386
|
+
});
|
|
387
|
+
</script>
|
|
388
|
+
|
|
389
|
+
<template>
|
|
390
|
+
<section v-if="query.error">
|
|
391
|
+
<h1>Error in authentication</h1>
|
|
392
|
+
<div>
|
|
393
|
+
<h4>{{ query.error }}</h4>
|
|
394
|
+
<p>{{ query.error_description }}</p>
|
|
395
|
+
</div>
|
|
396
|
+
</section>
|
|
397
|
+
<section v-else>
|
|
398
|
+
<h1>Logging in...</h1>
|
|
399
|
+
</section>
|
|
53
400
|
</template>
|
|
54
401
|
```
|
|
55
402
|
|
|
56
|
-
|
|
403
|
+
##### Profile page example
|
|
57
404
|
|
|
58
|
-
|
|
405
|
+
Same as the profile page example in redirect/popup mode.
|
|
406
|
+
|
|
407
|
+
##### Logout page example
|
|
408
|
+
|
|
409
|
+
Same as the logout page example in redirect/popup mode.
|
|
410
|
+
|
|
411
|
+
## API Documentation
|
|
412
|
+
|
|
413
|
+
#### `useStrivacity` composable
|
|
59
414
|
|
|
60
415
|
```typescript
|
|
61
|
-
useStrivacity<T extends PopupContext | RedirectContext>(): T;
|
|
416
|
+
useStrivacity<T extends PopupContext | RedirectContext | NativeContext>(): T;
|
|
62
417
|
```
|
|
63
418
|
|
|
64
|
-
You can choose between `PopupContext` or `
|
|
419
|
+
You can choose between `PopupContext`, `RedirectContext`, or `NativeContext` using the `mode` option when configuring the SDK.
|
|
65
420
|
|
|
66
421
|
**Properties**
|
|
67
422
|
|
|
68
|
-
- **`
|
|
69
|
-
- **`
|
|
70
|
-
- **`
|
|
71
|
-
- **`
|
|
72
|
-
- **`
|
|
73
|
-
- **`
|
|
74
|
-
- **`
|
|
423
|
+
- **`sdk: RedirectFlow | PopupFlow | NativeFlow`**: Returns the SDK instance based on the configured mode.
|
|
424
|
+
- **`loading: Ref<boolean>`**: Indicates if the session is being loaded.
|
|
425
|
+
- **`options: SDKOptions`**: The configured options for the SDK.
|
|
426
|
+
- **`isAuthenticated: Ref<boolean>`**: Indicates whether the user is authenticated.
|
|
427
|
+
- **`idTokenClaims: Ref<IdTokenClaims | null>`**: Claims from the ID token, or null if not available.
|
|
428
|
+
- **`accessToken: Ref<string | null>`**: The access token, or null if not available.
|
|
429
|
+
- **`refreshToken: Ref<string | null>`**: The refresh token, or null if not available.
|
|
430
|
+
- **`accessTokenExpired: Ref<boolean>`**: Indicates if the access token has expired.
|
|
431
|
+
- **`accessTokenExpirationDate: Ref<number | null>`**: Expiration date of the access token, or null if not set.
|
|
75
432
|
|
|
76
433
|
---
|
|
77
434
|
|
|
78
|
-
Type: `RedirectContext
|
|
79
|
-
|
|
435
|
+
**Type: `RedirectContext`**
|
|
436
|
+
|
|
437
|
+
Represents the available methods for redirect-based interactions.
|
|
80
438
|
|
|
81
439
|
- **`login(options?: LoginOptions): Promise<void>`**: Initiates the login process by redirecting the user to the identity provider.
|
|
82
440
|
- `options` (optional): Configuration options for login.
|
|
@@ -84,15 +442,16 @@ Represents the available methods for Redirect-based interactions.
|
|
|
84
442
|
- `options` (optional): Configuration options for registration.
|
|
85
443
|
- **`refresh(): Promise<void>`**: Refreshes the user's session using a redirect flow.
|
|
86
444
|
- **`revoke(): Promise<void>`**: Revokes the current session tokens using a redirect flow.
|
|
87
|
-
- **`logout(options?: LogoutOptions): Promise<void>`**: Logs out the user by redirecting to the
|
|
445
|
+
- **`logout(options?: LogoutOptions): Promise<void>`**: Logs out the user by redirecting to the identity provider.
|
|
88
446
|
- `options` (optional): Configuration options for logout.
|
|
89
447
|
- **`handleCallback(url?: string): Promise<void>`**: Handles the callback after a redirect-based authentication or token exchange.
|
|
90
448
|
- `url` (optional): The URL to handle for the callback.
|
|
91
449
|
|
|
92
450
|
---
|
|
93
451
|
|
|
94
|
-
Type: `PopupContext
|
|
95
|
-
|
|
452
|
+
**Type: `PopupContext`**
|
|
453
|
+
|
|
454
|
+
Represents the available methods for popup-based interactions.
|
|
96
455
|
|
|
97
456
|
- **`login(options?: LoginOptions): Promise<void>`**: Initiates the login process using a popup window.
|
|
98
457
|
- `options` (optional): Configuration options for login.
|
|
@@ -105,6 +464,79 @@ Represents the available methods for Popup-based interactions.
|
|
|
105
464
|
- **`handleCallback(url?: string): Promise<void>`**: Handles the callback after a popup-based authentication or token exchange.
|
|
106
465
|
- `url` (optional): The URL to handle for the callback.
|
|
107
466
|
|
|
108
|
-
|
|
467
|
+
---
|
|
468
|
+
|
|
469
|
+
**Type: `NativeContext`**
|
|
470
|
+
|
|
471
|
+
Represents the available methods for native-based interactions.
|
|
472
|
+
|
|
473
|
+
- **`login(options?: LoginOptions): Promise<NativeFlowHandler>`**: Initiates the login process using a native flow.
|
|
474
|
+
- `options` (optional): Configuration options for login.
|
|
475
|
+
- **`register(options?: RegisterOptions): Promise<NativeFlowHandler>`**: Registers a new user using a native flow.
|
|
476
|
+
- `options` (optional): Configuration options for registration.
|
|
477
|
+
- **`refresh(): Promise<void>`**: Refreshes the user's session.
|
|
478
|
+
- **`revoke(): Promise<void>`**: Revokes the current session tokens.
|
|
479
|
+
- **`logout(options?: LogoutOptions): Promise<void>`**: Logs out the user by redirecting to the logout page.
|
|
480
|
+
- `options` (optional): Configuration options for logout.
|
|
481
|
+
- **`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.
|
|
482
|
+
- `url` (optional): The URL to handle for the callback.
|
|
483
|
+
|
|
484
|
+
#### `StyLoginRenderer` component
|
|
485
|
+
|
|
486
|
+
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.
|
|
487
|
+
|
|
488
|
+
```typescript
|
|
489
|
+
StyLoginRenderer: Vue.Component<{
|
|
490
|
+
params?: NativeParams;
|
|
491
|
+
widgets?: PartialRecord<WidgetType, Vue.Component>;
|
|
492
|
+
sessionId?: string | null;
|
|
493
|
+
onLogin?: (claims?: IdTokenClaims | null) => void;
|
|
494
|
+
onFallback?: (error: FallbackError) => void;
|
|
495
|
+
onError?: (error: any) => void;
|
|
496
|
+
onGlobalMessage?: (message: string) => void;
|
|
497
|
+
onBlockReady?: ({ previousState, state }: { previousState: LoginFlowState; state: LoginFlowState }) => void;
|
|
498
|
+
}>;
|
|
499
|
+
```
|
|
500
|
+
|
|
501
|
+
**Properties**
|
|
502
|
+
|
|
503
|
+
- **`params?: NativeParams`** (optional): Additional parameters to pass to the native login flow. These parameters can include custom configuration options for the authentication process.
|
|
504
|
+
|
|
505
|
+
- **`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.
|
|
506
|
+
|
|
507
|
+
- **`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.
|
|
508
|
+
|
|
509
|
+
**Events**
|
|
510
|
+
|
|
511
|
+
- **`@login?: (claims?: IdTokenClaims | null) => void`** (optional): Event emitted when authentication is successful. Receives the ID token claims as a parameter.
|
|
512
|
+
|
|
513
|
+
- **`@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.
|
|
514
|
+
|
|
515
|
+
- **`@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.
|
|
516
|
+
|
|
517
|
+
- **`@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).
|
|
518
|
+
|
|
519
|
+
- **`@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.
|
|
520
|
+
|
|
521
|
+
**Widget Types**
|
|
522
|
+
|
|
523
|
+
The `widgets` prop accepts the following widget types:
|
|
524
|
+
|
|
525
|
+
- `checkbox`: For checkbox input fields
|
|
526
|
+
- `date`: For date input fields
|
|
527
|
+
- `input`: For text input fields
|
|
528
|
+
- `layout`: For layout containers and form structure
|
|
529
|
+
- `loading`: For loading indicators
|
|
530
|
+
- `multiSelect`: For multi-select dropdown fields
|
|
531
|
+
- `passcode`: For passcode input fields
|
|
532
|
+
- `password`: For password input fields
|
|
533
|
+
- `phone`: For phone number input fields
|
|
534
|
+
- `select`: For single-select dropdown fields
|
|
535
|
+
- `static`: For static text and display elements
|
|
536
|
+
- `submit`: For form submission buttons
|
|
537
|
+
|
|
538
|
+
Each widget component receives props specific to its type and function within the authentication flow.
|
|
539
|
+
|
|
540
|
+
## Links
|
|
109
541
|
|
|
110
542
|
- [Example app](https://github.com/Strivacity/sdk-js/tree/main/apps/vue)
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const l=require("vue"),y=require("@strivacity/sdk-core"),_=require("@strivacity/sdk-core/utils/object"),O=require("../composables.cjs"),B={class:"login-renderer"},E=l.defineComponent({__name:"login-renderer",props:{params:{default:()=>({})},widgets:{default:()=>({})},sessionId:{default:null}},emits:["login","fallback","error","globalMessage","blockReady"],setup(h,{emit:U}){const{sdk:g}=O.useStrivacity(),d=h,i=U,p=l.defineComponent({props:{items:{type:Array,default:()=>[]},widgets:{type:Object,default:()=>({})}},setup:e=>()=>e.items.map(s=>{var o,t;if(s.type==="widget"){const r=(t=(o=n.value)==null?void 0:o.forms)==null?void 0:t.find(v=>v.id===s.formId),a=r==null?void 0:r.widgets.find(v=>v.id===s.widgetId);if(!r||!a)return f(),null;const k=e.widgets[a.type];return k?l.h(k,{key:`${r.id}.${a.id}`,formId:r.id,config:a}):(f(),null)}else return(s.type==="vertical"||s.type==="horizontal")&&e.widgets.layout?l.h(e.widgets.layout,{formId:s.items[0].formId,type:s.type},()=>l.h(p,{items:s.items,widgets:e.widgets})):(f(),null)})}),w=g.login(d.params),m=l.ref(!1),u=l.ref({}),c=l.ref({}),n=l.ref({});l.provide("nativeFlowContext",{loading:m,forms:u,messages:c,state:n,submitForm:S,triggerFallback:f,setFormValue:C,setMessage:F}),l.onMounted(async()=>{try{const e=await w.startSession(d.sessionId);e&&await b(e)}catch(e){e instanceof y.FallbackError?i("fallback",e):i("error",e)}});function f(e){const s=e||n.value.hostedUrl;if(!s)throw new Error("No hosted URL provided");i("fallback",new y.FallbackError(new URL(s)))}function C(e,s,o){o===""&&(o=null),u.value[e]===void 0&&(u.value[e]={}),u.value[e][s]=o}function F(e,s,o){c.value[e]===void 0&&(c.value[e]={}),c.value[e][s]=o}async function S(e){try{m.value=!0;const s=await w.submitForm(e,_.unflattenObject(u.value[e]));await b(s),m.value=!1}catch(s){s instanceof y.FallbackError?i("fallback",s):i("error",s)}}async function b(e){if(await g.isAuthenticated)i("login",g.idTokenClaims);else{const s=JSON.parse(JSON.stringify(n.value)),o={hostedUrl:(e==null?void 0:e.hostedUrl)??n.value.hostedUrl,finalizeUrl:(e==null?void 0:e.finalizeUrl)??n.value.finalizeUrl,screen:(e==null?void 0:e.screen)??n.value.screen,forms:(e==null?void 0:e.forms)??n.value.forms,layout:(e==null?void 0:e.layout)??n.value.layout,messages:(e==null?void 0:e.messages)??n.value.messages,branding:(e==null?void 0:e.branding)??n.value.branding};if(o.screen!=n.value.screen){u.value={},c.value={};for(const t of o.forms??[])u.value[t.id]={},c.value[t.id]={}}Object.keys(o.messages??{}).forEach(t=>{var r,a;t==="global"?i("globalMessage",((a=(r=o.messages)==null?void 0:r.global)==null?void 0:a.text)??""):c.value[t]=o.messages[t]}),n.value=o,setTimeout(()=>{i("blockReady",{previousState:s,state:JSON.parse(JSON.stringify(n.value))})})}}return(e,s)=>{var o,t;return l.openBlock(),l.createElementBlock("div",B,[n.value.screen?(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.widgets.layout),{key:0,formId:((o=n.value.layout)==null?void 0:o.items[0]).formId,type:(t=n.value.layout)==null?void 0:t.type,tag:"form"},{default:l.withCtx(()=>{var r;return[l.createVNode(l.unref(p),{items:(r=n.value.layout)==null?void 0:r.items,widgets:e.widgets},null,8,["items","widgets"])]}),_:1},8,["formId","type"])):(l.openBlock(),l.createBlock(l.resolveDynamicComponent(e.widgets.loading),{key:1}))])}}});exports._sfc_main=E;
|
|
2
|
+
//# sourceMappingURL=login-renderer.vue_vue_type_script_setup_true_lang.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"login-renderer.vue_vue_type_script_setup_true_lang.cjs","sources":["../../src/login-renderer.vue"],"sourcesContent":["<!-- eslint-disable no-console -->\n<script lang=\"ts\" setup>\nimport type { VNode, Component, PropType } from 'vue';\nimport type { PartialRecord, NativeParams, WidgetType, LayoutWidget, LoginFlowState, Widget, IdTokenClaims, LoginFlowMessage } from '@strivacity/sdk-core';\nimport type { NativeContext, NativeFlowContextValue } from './types';\nimport { defineComponent, provide, ref, h, onMounted } from 'vue';\nimport { FallbackError } from '@strivacity/sdk-core';\nimport { unflattenObject } from '@strivacity/sdk-core/utils/object';\nimport { useStrivacity } from './composables';\n\nconst { sdk } = useStrivacity<NativeContext>();\n\nconst props = withDefaults(\n\tdefineProps<{\n\t\tparams?: NativeParams;\n\t\twidgets?: PartialRecord<WidgetType, Component>;\n\t\tsessionId?: string | null;\n\t}>(),\n\t{\n\t\tparams: () => ({}),\n\t\twidgets: () => ({}),\n\t\tsessionId: null,\n\t},\n);\nconst emit = defineEmits<{\n\tlogin: [IdTokenClaims | null | undefined];\n\tfallback: [FallbackError];\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\terror: [any];\n\tglobalMessage: [string];\n\tblockReady: [{ previousState: LoginFlowState; state: LoginFlowState }];\n}>();\n\nconst WidgetRenderer = defineComponent({\n\tprops: {\n\t\titems: {\n\t\t\ttype: Array as PropType<LayoutWidget['items']>,\n\t\t\tdefault: () => [],\n\t\t},\n\t\twidgets: {\n\t\t\ttype: Object as PropType<PartialRecord<WidgetType, Component>>,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tsetup: (props) => () =>\n\t\tprops.items.map((item): VNode | null => {\n\t\t\tif (item.type === 'widget') {\n\t\t\t\tconst form = state.value?.forms?.find((form) => form.id === item.formId);\n\t\t\t\tconst widget = form?.widgets.find((widget) => widget.id === item.widgetId);\n\n\t\t\t\tif (!form || !widget) {\n\t\t\t\t\ttriggerFallback();\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst component = props.widgets[widget.type];\n\n\t\t\t\tif (!component) {\n\t\t\t\t\ttriggerFallback();\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn h(component, { key: `${form.id}.${widget.id}`, formId: form.id, config: widget });\n\t\t\t} else if (item.type === 'vertical' || item.type === 'horizontal') {\n\t\t\t\tif (!props.widgets.layout) {\n\t\t\t\t\ttriggerFallback();\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn h(props.widgets.layout, { formId: (item.items[0] as Widget).formId, type: item.type }, () =>\n\t\t\t\t\th(WidgetRenderer, { items: item.items, widgets: props.widgets }),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttriggerFallback();\n\t\t\t\treturn null;\n\t\t\t}\n\t\t}),\n});\n\nconst loginHandler = sdk.login(props.params);\nconst loading = ref<boolean>(false);\nconst forms = ref<Record<string, Record<string, unknown>>>({});\nconst messages = ref<Record<string, Record<string, LoginFlowMessage>>>({});\nconst state = ref<LoginFlowState>({});\n\nprovide<NativeFlowContextValue>('nativeFlowContext', {\n\tloading,\n\tforms,\n\tmessages,\n\tstate,\n\tsubmitForm,\n\ttriggerFallback,\n\tsetFormValue,\n\tsetMessage,\n});\n\nonMounted(async () => {\n\ttry {\n\t\tconst data = await loginHandler.startSession(props.sessionId);\n\n\t\tif (data) {\n\t\t\tawait handleResponse(data);\n\t\t}\n\t} catch (error) {\n\t\tif (error instanceof FallbackError) {\n\t\t\temit('fallback', error);\n\t\t} else {\n\t\t\temit('error', error);\n\t\t}\n\t}\n});\n\nfunction triggerFallback(hostedUrl?: string): void {\n\tconst url = hostedUrl || state.value.hostedUrl;\n\n\tif (!url) {\n\t\tthrow new Error('No hosted URL provided');\n\t}\n\n\temit('fallback', new FallbackError(new URL(url)));\n}\n\nfunction setFormValue(formId: string, widgetId: string, value: unknown) {\n\tif (value === '') {\n\t\tvalue = null;\n\t}\n\n\tif (forms.value[formId] === undefined) {\n\t\tforms.value[formId] = {};\n\t}\n\n\tforms.value[formId][widgetId] = value;\n}\n\nfunction setMessage(formId: string, widgetId: string, value: LoginFlowMessage) {\n\tif (messages.value[formId] === undefined) {\n\t\tmessages.value[formId] = {};\n\t}\n\n\tmessages.value[formId][widgetId] = value;\n}\n\nasync function submitForm(formId: string): Promise<void> {\n\ttry {\n\t\tloading.value = true;\n\n\t\tconst data = await loginHandler.submitForm(formId, unflattenObject(forms.value[formId]));\n\t\tawait handleResponse(data);\n\n\t\tloading.value = false;\n\t} catch (error) {\n\t\tif (error instanceof FallbackError) {\n\t\t\temit('fallback', error);\n\t\t} else {\n\t\t\temit('error', error);\n\t\t}\n\t}\n}\n\nasync function handleResponse(data?: LoginFlowState) {\n\tif (await sdk.isAuthenticated) {\n\t\temit('login', sdk.idTokenClaims);\n\t} else {\n\t\tconst previousState = JSON.parse(JSON.stringify(state.value));\n\t\tconst newState: LoginFlowState = {\n\t\t\thostedUrl: data?.hostedUrl ?? state.value.hostedUrl,\n\t\t\tfinalizeUrl: data?.finalizeUrl ?? state.value.finalizeUrl,\n\t\t\tscreen: data?.screen ?? state.value.screen,\n\t\t\tforms: data?.forms ?? state.value.forms,\n\t\t\tlayout: data?.layout ?? state.value.layout,\n\t\t\tmessages: data?.messages ?? state.value.messages,\n\t\t\tbranding: data?.branding ?? state.value.branding,\n\t\t};\n\n\t\tif (newState.screen != state.value.screen) {\n\t\t\tforms.value = {};\n\t\t\tmessages.value = {};\n\n\t\t\tfor (const form of newState.forms ?? []) {\n\t\t\t\tforms.value[form.id] = {};\n\t\t\t\tmessages.value[form.id] = {};\n\t\t\t}\n\t\t}\n\n\t\tObject.keys(newState.messages ?? {}).forEach((formId) => {\n\t\t\tif (formId === 'global') {\n\t\t\t\temit('globalMessage', newState.messages?.global?.text ?? '');\n\t\t\t} else {\n\t\t\t\tmessages.value[formId] = newState.messages![formId];\n\t\t\t}\n\t\t});\n\n\t\tstate.value = newState;\n\n\t\tsetTimeout(() => {\n\t\t\temit('blockReady', { previousState, state: JSON.parse(JSON.stringify(state.value)) });\n\t\t});\n\t}\n}\n</script>\n\n<template>\n\t<div class=\"login-renderer\">\n\t\t<component :is=\"widgets.layout\" v-if=\"state.screen\" :formId=\"(state.layout?.items[0] as Widget).formId\" :type=\"state.layout?.type\" tag=\"form\">\n\t\t\t<WidgetRenderer :items=\"state.layout?.items\" :widgets=\"widgets\" />\n\t\t</component>\n\t\t<component :is=\"widgets.loading\" v-else />\n\t</div>\n</template>\n"],"names":["sdk","useStrivacity","props","__props","emit","__emit","WidgetRenderer","defineComponent","item","form","_b","_a","state","widget","triggerFallback","component","h","loginHandler","loading","ref","forms","messages","provide","submitForm","setFormValue","setMessage","onMounted","data","handleResponse","error","FallbackError","hostedUrl","url","formId","widgetId","value","unflattenObject","previousState","newState","_openBlock","_createElementBlock","_hoisted_1","_createBlock","_resolveDynamicComponent","widgets","_createVNode","_unref"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{defineComponent as S,ref as f,h as y,provide as E,onMounted as J,createElementBlock as M,openBlock as d,createBlock as O,resolveDynamicComponent as _,withCtx as j,createVNode as B,unref as I}from"vue";import{FallbackError as p}from"@strivacity/sdk-core";import{unflattenObject as x}from"@strivacity/sdk-core/utils/object";import{useStrivacity as A}from"../composables.mjs";const L={class:"login-renderer"},H=S({__name:"login-renderer",props:{params:{default:()=>({})},widgets:{default:()=>({})},sessionId:{default:null}},emits:["login","fallback","error","globalMessage","blockReady"],setup(F,{emit:N}){const{sdk:g}=A(),w=F,i=N,b=S({props:{items:{type:Array,default:()=>[]},widgets:{type:Object,default:()=>({})}},setup:e=>()=>e.items.map(s=>{var t,o;if(s.type==="widget"){const n=(o=(t=l.value)==null?void 0:t.forms)==null?void 0:o.find(v=>v.id===s.formId),a=n==null?void 0:n.widgets.find(v=>v.id===s.widgetId);if(!n||!a)return c(),null;const U=e.widgets[a.type];return U?y(U,{key:`${n.id}.${a.id}`,formId:n.id,config:a}):(c(),null)}else return(s.type==="vertical"||s.type==="horizontal")&&e.widgets.layout?y(e.widgets.layout,{formId:s.items[0].formId,type:s.type},()=>y(b,{items:s.items,widgets:e.widgets})):(c(),null)})}),k=g.login(w.params),m=f(!1),r=f({}),u=f({}),l=f({});E("nativeFlowContext",{loading:m,forms:r,messages:u,state:l,submitForm:z,triggerFallback:c,setFormValue:R,setMessage:C}),J(async()=>{try{const e=await k.startSession(w.sessionId);e&&await h(e)}catch(e){e instanceof p?i("fallback",e):i("error",e)}});function c(e){const s=e||l.value.hostedUrl;if(!s)throw new Error("No hosted URL provided");i("fallback",new p(new URL(s)))}function R(e,s,t){t===""&&(t=null),r.value[e]===void 0&&(r.value[e]={}),r.value[e][s]=t}function C(e,s,t){u.value[e]===void 0&&(u.value[e]={}),u.value[e][s]=t}async function z(e){try{m.value=!0;const s=await k.submitForm(e,x(r.value[e]));await h(s),m.value=!1}catch(s){s instanceof p?i("fallback",s):i("error",s)}}async function h(e){if(await g.isAuthenticated)i("login",g.idTokenClaims);else{const s=JSON.parse(JSON.stringify(l.value)),t={hostedUrl:(e==null?void 0:e.hostedUrl)??l.value.hostedUrl,finalizeUrl:(e==null?void 0:e.finalizeUrl)??l.value.finalizeUrl,screen:(e==null?void 0:e.screen)??l.value.screen,forms:(e==null?void 0:e.forms)??l.value.forms,layout:(e==null?void 0:e.layout)??l.value.layout,messages:(e==null?void 0:e.messages)??l.value.messages,branding:(e==null?void 0:e.branding)??l.value.branding};if(t.screen!=l.value.screen){r.value={},u.value={};for(const o of t.forms??[])r.value[o.id]={},u.value[o.id]={}}Object.keys(t.messages??{}).forEach(o=>{var n,a;o==="global"?i("globalMessage",((a=(n=t.messages)==null?void 0:n.global)==null?void 0:a.text)??""):u.value[o]=t.messages[o]}),l.value=t,setTimeout(()=>{i("blockReady",{previousState:s,state:JSON.parse(JSON.stringify(l.value))})})}}return(e,s)=>{var t,o;return d(),M("div",L,[l.value.screen?(d(),O(_(e.widgets.layout),{key:0,formId:((t=l.value.layout)==null?void 0:t.items[0]).formId,type:(o=l.value.layout)==null?void 0:o.type,tag:"form"},{default:j(()=>{var n;return[B(I(b),{items:(n=l.value.layout)==null?void 0:n.items,widgets:e.widgets},null,8,["items","widgets"])]}),_:1},8,["formId","type"])):(d(),O(_(e.widgets.loading),{key:1}))])}}});export{H as _};
|
|
2
|
+
//# sourceMappingURL=login-renderer.vue_vue_type_script_setup_true_lang.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"login-renderer.vue_vue_type_script_setup_true_lang.mjs","sources":["../../src/login-renderer.vue"],"sourcesContent":["<!-- eslint-disable no-console -->\n<script lang=\"ts\" setup>\nimport type { VNode, Component, PropType } from 'vue';\nimport type { PartialRecord, NativeParams, WidgetType, LayoutWidget, LoginFlowState, Widget, IdTokenClaims, LoginFlowMessage } from '@strivacity/sdk-core';\nimport type { NativeContext, NativeFlowContextValue } from './types';\nimport { defineComponent, provide, ref, h, onMounted } from 'vue';\nimport { FallbackError } from '@strivacity/sdk-core';\nimport { unflattenObject } from '@strivacity/sdk-core/utils/object';\nimport { useStrivacity } from './composables';\n\nconst { sdk } = useStrivacity<NativeContext>();\n\nconst props = withDefaults(\n\tdefineProps<{\n\t\tparams?: NativeParams;\n\t\twidgets?: PartialRecord<WidgetType, Component>;\n\t\tsessionId?: string | null;\n\t}>(),\n\t{\n\t\tparams: () => ({}),\n\t\twidgets: () => ({}),\n\t\tsessionId: null,\n\t},\n);\nconst emit = defineEmits<{\n\tlogin: [IdTokenClaims | null | undefined];\n\tfallback: [FallbackError];\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\terror: [any];\n\tglobalMessage: [string];\n\tblockReady: [{ previousState: LoginFlowState; state: LoginFlowState }];\n}>();\n\nconst WidgetRenderer = defineComponent({\n\tprops: {\n\t\titems: {\n\t\t\ttype: Array as PropType<LayoutWidget['items']>,\n\t\t\tdefault: () => [],\n\t\t},\n\t\twidgets: {\n\t\t\ttype: Object as PropType<PartialRecord<WidgetType, Component>>,\n\t\t\tdefault: () => ({}),\n\t\t},\n\t},\n\tsetup: (props) => () =>\n\t\tprops.items.map((item): VNode | null => {\n\t\t\tif (item.type === 'widget') {\n\t\t\t\tconst form = state.value?.forms?.find((form) => form.id === item.formId);\n\t\t\t\tconst widget = form?.widgets.find((widget) => widget.id === item.widgetId);\n\n\t\t\t\tif (!form || !widget) {\n\t\t\t\t\ttriggerFallback();\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tconst component = props.widgets[widget.type];\n\n\t\t\t\tif (!component) {\n\t\t\t\t\ttriggerFallback();\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn h(component, { key: `${form.id}.${widget.id}`, formId: form.id, config: widget });\n\t\t\t} else if (item.type === 'vertical' || item.type === 'horizontal') {\n\t\t\t\tif (!props.widgets.layout) {\n\t\t\t\t\ttriggerFallback();\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\treturn h(props.widgets.layout, { formId: (item.items[0] as Widget).formId, type: item.type }, () =>\n\t\t\t\t\th(WidgetRenderer, { items: item.items, widgets: props.widgets }),\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\ttriggerFallback();\n\t\t\t\treturn null;\n\t\t\t}\n\t\t}),\n});\n\nconst loginHandler = sdk.login(props.params);\nconst loading = ref<boolean>(false);\nconst forms = ref<Record<string, Record<string, unknown>>>({});\nconst messages = ref<Record<string, Record<string, LoginFlowMessage>>>({});\nconst state = ref<LoginFlowState>({});\n\nprovide<NativeFlowContextValue>('nativeFlowContext', {\n\tloading,\n\tforms,\n\tmessages,\n\tstate,\n\tsubmitForm,\n\ttriggerFallback,\n\tsetFormValue,\n\tsetMessage,\n});\n\nonMounted(async () => {\n\ttry {\n\t\tconst data = await loginHandler.startSession(props.sessionId);\n\n\t\tif (data) {\n\t\t\tawait handleResponse(data);\n\t\t}\n\t} catch (error) {\n\t\tif (error instanceof FallbackError) {\n\t\t\temit('fallback', error);\n\t\t} else {\n\t\t\temit('error', error);\n\t\t}\n\t}\n});\n\nfunction triggerFallback(hostedUrl?: string): void {\n\tconst url = hostedUrl || state.value.hostedUrl;\n\n\tif (!url) {\n\t\tthrow new Error('No hosted URL provided');\n\t}\n\n\temit('fallback', new FallbackError(new URL(url)));\n}\n\nfunction setFormValue(formId: string, widgetId: string, value: unknown) {\n\tif (value === '') {\n\t\tvalue = null;\n\t}\n\n\tif (forms.value[formId] === undefined) {\n\t\tforms.value[formId] = {};\n\t}\n\n\tforms.value[formId][widgetId] = value;\n}\n\nfunction setMessage(formId: string, widgetId: string, value: LoginFlowMessage) {\n\tif (messages.value[formId] === undefined) {\n\t\tmessages.value[formId] = {};\n\t}\n\n\tmessages.value[formId][widgetId] = value;\n}\n\nasync function submitForm(formId: string): Promise<void> {\n\ttry {\n\t\tloading.value = true;\n\n\t\tconst data = await loginHandler.submitForm(formId, unflattenObject(forms.value[formId]));\n\t\tawait handleResponse(data);\n\n\t\tloading.value = false;\n\t} catch (error) {\n\t\tif (error instanceof FallbackError) {\n\t\t\temit('fallback', error);\n\t\t} else {\n\t\t\temit('error', error);\n\t\t}\n\t}\n}\n\nasync function handleResponse(data?: LoginFlowState) {\n\tif (await sdk.isAuthenticated) {\n\t\temit('login', sdk.idTokenClaims);\n\t} else {\n\t\tconst previousState = JSON.parse(JSON.stringify(state.value));\n\t\tconst newState: LoginFlowState = {\n\t\t\thostedUrl: data?.hostedUrl ?? state.value.hostedUrl,\n\t\t\tfinalizeUrl: data?.finalizeUrl ?? state.value.finalizeUrl,\n\t\t\tscreen: data?.screen ?? state.value.screen,\n\t\t\tforms: data?.forms ?? state.value.forms,\n\t\t\tlayout: data?.layout ?? state.value.layout,\n\t\t\tmessages: data?.messages ?? state.value.messages,\n\t\t\tbranding: data?.branding ?? state.value.branding,\n\t\t};\n\n\t\tif (newState.screen != state.value.screen) {\n\t\t\tforms.value = {};\n\t\t\tmessages.value = {};\n\n\t\t\tfor (const form of newState.forms ?? []) {\n\t\t\t\tforms.value[form.id] = {};\n\t\t\t\tmessages.value[form.id] = {};\n\t\t\t}\n\t\t}\n\n\t\tObject.keys(newState.messages ?? {}).forEach((formId) => {\n\t\t\tif (formId === 'global') {\n\t\t\t\temit('globalMessage', newState.messages?.global?.text ?? '');\n\t\t\t} else {\n\t\t\t\tmessages.value[formId] = newState.messages![formId];\n\t\t\t}\n\t\t});\n\n\t\tstate.value = newState;\n\n\t\tsetTimeout(() => {\n\t\t\temit('blockReady', { previousState, state: JSON.parse(JSON.stringify(state.value)) });\n\t\t});\n\t}\n}\n</script>\n\n<template>\n\t<div class=\"login-renderer\">\n\t\t<component :is=\"widgets.layout\" v-if=\"state.screen\" :formId=\"(state.layout?.items[0] as Widget).formId\" :type=\"state.layout?.type\" tag=\"form\">\n\t\t\t<WidgetRenderer :items=\"state.layout?.items\" :widgets=\"widgets\" />\n\t\t</component>\n\t\t<component :is=\"widgets.loading\" v-else />\n\t</div>\n</template>\n"],"names":["sdk","useStrivacity","props","__props","emit","__emit","WidgetRenderer","defineComponent","item","form","_b","_a","state","widget","triggerFallback","component","h","loginHandler","loading","ref","forms","messages","provide","submitForm","setFormValue","setMessage","onMounted","data","handleResponse","error","FallbackError","hostedUrl","url","formId","widgetId","value","unflattenObject","previousState","newState","_openBlock","_createElementBlock","_hoisted_1","_createBlock","_resolveDynamicComponent","widgets","_createVNode","_unref"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),e=Symbol("sty"),i=()=>{const t=r.inject(e);if(!t)throw new Error("Missing Strivacity SDK context");return t};exports.STRIVACITY_SDK=e;exports.useStrivacity=i;
|
|
2
|
+
//# sourceMappingURL=composables.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"composables.cjs","sources":["../src/composables.ts"],"sourcesContent":["import { inject } from 'vue';\nimport type { PopupContext, RedirectContext, NativeContext } from './types';\n\nconst STRIVACITY_SDK = Symbol('sty');\n\n/**\n * Retrieves the Strivacity SDK context for Popup or Redirect flows.\n *\n * @template T The type of context, either PopupContext, RedirectContext or NativeContext.\n *\n * @throws {Error} If the Strivacity SDK context is not found.\n *\n * @returns {T} The Strivacity SDK context, typed as either PopupContext, RedirectContext or NativeContext.\n */\nexport const useStrivacity = <T extends PopupContext | RedirectContext | NativeContext>() => {\n\tconst context = inject(STRIVACITY_SDK);\n\n\tif (!context) {\n\t\tthrow new Error('Missing Strivacity SDK context');\n\t}\n\n\treturn context as T;\n};\n\nexport { STRIVACITY_SDK };\n"],"names":["STRIVACITY_SDK","useStrivacity","context","inject"],"mappings":"uGAGMA,EAAiB,OAAO,KAAK,EAWtBC,EAAgB,IAAgE,CAC5F,MAAMC,EAAUC,EAAAA,OAAOH,CAAc,EAErC,GAAI,CAACE,EACJ,MAAM,IAAI,MAAM,gCAAgC,EAGjD,OAAOA,CACR"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { PopupContext, RedirectContext, NativeContext } from './types';
|
|
2
|
+
declare const STRIVACITY_SDK: unique symbol;
|
|
3
|
+
/**
|
|
4
|
+
* Retrieves the Strivacity SDK context for Popup or Redirect flows.
|
|
5
|
+
*
|
|
6
|
+
* @template T The type of context, either PopupContext, RedirectContext or NativeContext.
|
|
7
|
+
*
|
|
8
|
+
* @throws {Error} If the Strivacity SDK context is not found.
|
|
9
|
+
*
|
|
10
|
+
* @returns {T} The Strivacity SDK context, typed as either PopupContext, RedirectContext or NativeContext.
|
|
11
|
+
*/
|
|
12
|
+
export declare const useStrivacity: <T extends PopupContext | RedirectContext | NativeContext>() => T;
|
|
13
|
+
export { STRIVACITY_SDK };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"composables.mjs","sources":["../src/composables.ts"],"sourcesContent":["import { inject } from 'vue';\nimport type { PopupContext, RedirectContext, NativeContext } from './types';\n\nconst STRIVACITY_SDK = Symbol('sty');\n\n/**\n * Retrieves the Strivacity SDK context for Popup or Redirect flows.\n *\n * @template T The type of context, either PopupContext, RedirectContext or NativeContext.\n *\n * @throws {Error} If the Strivacity SDK context is not found.\n *\n * @returns {T} The Strivacity SDK context, typed as either PopupContext, RedirectContext or NativeContext.\n */\nexport const useStrivacity = <T extends PopupContext | RedirectContext | NativeContext>() => {\n\tconst context = inject(STRIVACITY_SDK);\n\n\tif (!context) {\n\t\tthrow new Error('Missing Strivacity SDK context');\n\t}\n\n\treturn context as T;\n};\n\nexport { STRIVACITY_SDK };\n"],"names":["STRIVACITY_SDK","useStrivacity","context","inject"],"mappings":"6BAGA,MAAMA,EAAiB,OAAO,KAAK,EAWtBC,EAAgB,IAAgE,CAC5F,MAAMC,EAAUC,EAAOH,CAAc,EAErC,GAAI,CAACE,EACJ,MAAM,IAAI,MAAM,gCAAgC,EAGjD,OAAOA,CACR"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue"),a=require("@strivacity/sdk-core"),p=require("@strivacity/sdk-core/utils/HttpClient"),T=require("@strivacity/sdk-core/storages/LocalStorage"),k=require("@strivacity/sdk-core/storages/SessionStorage"),b=require("./composables.cjs"),y=require("./assets/login-renderer.vue_vue_type_script_setup_true_lang.cjs");require("@strivacity/sdk-core/utils/object");exports.isAuthenticated=()=>Promise.resolve(!1);const S=r=>{const e=a.initFlow(r);return{install:o=>{const s=i.ref(!0),g=i.ref(e.options),c=i.ref(!1),l=i.ref(null),u=i.ref(null),d=i.ref(null),f=i.ref(!0),v=i.ref(null),t=async()=>{c.value=await e.isAuthenticated,l.value=e.idTokenClaims||null,u.value=e.accessToken||null,d.value=e.refreshToken||null,f.value=e.accessTokenExpired,v.value=e.accessTokenExpirationDate||null,s.value&&(s.value=!1)};exports.isAuthenticated=()=>e.isAuthenticated,e.subscribeToEvent("init",t),e.subscribeToEvent("loggedIn",t),e.subscribeToEvent("sessionLoaded",t),e.subscribeToEvent("tokenRefreshed",t),e.subscribeToEvent("tokenRefreshFailed",t),e.subscribeToEvent("logoutInitiated",t),e.subscribeToEvent("tokenRevoked",t),e.subscribeToEvent("tokenRevokeFailed",t),o.component("StyLoginRenderer",y._sfc_main),o.provide(b.STRIVACITY_SDK,{sdk:e,loading:s,options:g,isAuthenticated:c,idTokenClaims:l,accessToken:u,refreshToken:d,accessTokenExpired:f,accessTokenExpirationDate:v,login:async n=>{if(e.options.mode==="native")return e.login(n);await e.login(n),await t()},register:async n=>{if(e.options.mode==="native")return e.register(n);await e.register(n),await t()},refresh:async()=>{await e.refresh(),await t()},revoke:async()=>{await e.revoke(),await t()},logout:async n=>{await e.logout(n),await t()},handleCallback:async n=>{await e.handleCallback(n),await t()}})}}};Object.defineProperty(exports,"HttpClient",{enumerable:!0,get:()=>p.HttpClient});Object.defineProperty(exports,"LocalStorage",{enumerable:!0,get:()=>T.LocalStorage});Object.defineProperty(exports,"SessionStorage",{enumerable:!0,get:()=>k.SessionStorage});exports.useStrivacity=b.useStrivacity;exports.createStrivacitySDK=S;Object.keys(a).forEach(r=>{r!=="default"&&!Object.prototype.hasOwnProperty.call(exports,r)&&Object.defineProperty(exports,r,{enumerable:!0,get:()=>a[r]})});
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["import type { IdTokenClaims, SDKOptions } from '@strivacity/sdk-core';\nimport type { PopupFlow } from '@strivacity/sdk-core/flows/PopupFlow';\nimport type { RedirectFlow } from '@strivacity/sdk-core/flows/RedirectFlow';\nimport type { NativeFlow } from '@strivacity/sdk-core/flows/NativeFlow';\nimport { type App, ref } from 'vue';\nimport { initFlow } from '@strivacity/sdk-core';\nimport { HttpClient } from '@strivacity/sdk-core/utils/HttpClient';\nimport { LocalStorage } from '@strivacity/sdk-core/storages/LocalStorage';\nimport { SessionStorage } from '@strivacity/sdk-core/storages/SessionStorage';\nimport { STRIVACITY_SDK, useStrivacity } from './composables';\nimport LoginRendererComponent from './login-renderer.vue';\n\nexport * from '@strivacity/sdk-core';\nexport type * from './types';\nexport type { PopupFlow, RedirectFlow, NativeFlow };\nexport { HttpClient, LocalStorage, SessionStorage, useStrivacity };\n\n/**\n * Checks if the user is authenticated.\n *\n * @returns {Promise<boolean>} A promise that resolves to `true` if the user is authenticated, otherwise `false`.\n */\nexport let isAuthenticated: () => Promise<boolean> = () => Promise.resolve(false);\n\n/**\n * Creates a Strivacity SDK plugin for Vue.\n *\n * @param {SDKOptions} options - The options used to configure the SDK.\n *\n * @returns {Plugin} A Vue plugin that can be installed in the application.\n */\nexport const createStrivacitySDK = (options: SDKOptions) => {\n\tconst sdk = initFlow(options);\n\n\tconst plugin = {\n\t\tinstall: (app: App) => {\n\t\t\tconst loadingRef = ref<boolean>(true);\n\t\t\tconst optionsRef = ref<SDKOptions>(sdk.options);\n\t\t\tconst isAuthenticatedRef = ref<boolean>(false);\n\t\t\tconst idTokenClaimsRef = ref<IdTokenClaims | null>(null);\n\t\t\tconst accessTokenRef = ref<string | null>(null);\n\t\t\tconst refreshTokenRef = ref<string | null>(null);\n\t\t\tconst accessTokenExpiredRef = ref<boolean>(true);\n\t\t\tconst accessTokenExpirationDateRef = ref<number | null>(null);\n\n\t\t\tconst updateSession = async () => {\n\t\t\t\tisAuthenticatedRef.value = await sdk.isAuthenticated;\n\t\t\t\tidTokenClaimsRef.value = sdk.idTokenClaims || null;\n\t\t\t\taccessTokenRef.value = sdk.accessToken || null;\n\t\t\t\trefreshTokenRef.value = sdk.refreshToken || null;\n\t\t\t\taccessTokenExpiredRef.value = sdk.accessTokenExpired;\n\t\t\t\taccessTokenExpirationDateRef.value = sdk.accessTokenExpirationDate || null;\n\n\t\t\t\tif (loadingRef.value) {\n\t\t\t\t\tloadingRef.value = false;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tisAuthenticated = () => sdk.isAuthenticated;\n\n\t\t\tsdk.subscribeToEvent('init', updateSession);\n\t\t\tsdk.subscribeToEvent('loggedIn', updateSession);\n\t\t\tsdk.subscribeToEvent('sessionLoaded', updateSession);\n\t\t\tsdk.subscribeToEvent('tokenRefreshed', updateSession);\n\t\t\tsdk.subscribeToEvent('tokenRefreshFailed', updateSession);\n\t\t\tsdk.subscribeToEvent('logoutInitiated', updateSession);\n\t\t\tsdk.subscribeToEvent('tokenRevoked', updateSession);\n\t\t\tsdk.subscribeToEvent('tokenRevokeFailed', updateSession);\n\n\t\t\tapp.component('StyLoginRenderer', LoginRendererComponent);\n\t\t\tapp.provide(STRIVACITY_SDK, {\n\t\t\t\tsdk: sdk,\n\t\t\t\tloading: loadingRef,\n\t\t\t\toptions: optionsRef,\n\t\t\t\tisAuthenticated: isAuthenticatedRef,\n\t\t\t\tidTokenClaims: idTokenClaimsRef,\n\t\t\t\taccessToken: accessTokenRef,\n\t\t\t\trefreshToken: refreshTokenRef,\n\t\t\t\taccessTokenExpired: accessTokenExpiredRef,\n\t\t\t\taccessTokenExpirationDate: accessTokenExpirationDateRef,\n\n\t\t\t\tlogin: async (options?: Parameters<PopupFlow['login'] | RedirectFlow['login'] | NativeFlow['login']>[0]) => {\n\t\t\t\t\tif (sdk.options.mode === 'native') {\n\t\t\t\t\t\treturn sdk.login(options);\n\t\t\t\t\t}\n\n\t\t\t\t\tawait sdk.login(options);\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\tregister: async (options?: Parameters<PopupFlow['register'] | RedirectFlow['register'] | NativeFlow['register']>[0]) => {\n\t\t\t\t\tif (sdk.options.mode === 'native') {\n\t\t\t\t\t\treturn sdk.register(options);\n\t\t\t\t\t}\n\n\t\t\t\t\tawait sdk.register(options);\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\trefresh: async () => {\n\t\t\t\t\tawait sdk.refresh();\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\trevoke: async () => {\n\t\t\t\t\tawait sdk.revoke();\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\tlogout: async (options?: Parameters<PopupFlow['logout'] | RedirectFlow['logout']>[0]) => {\n\t\t\t\t\tawait sdk.logout(options);\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\thandleCallback: async (url?: Parameters<PopupFlow['handleCallback'] | RedirectFlow['handleCallback'] | NativeFlow['handleCallback']>[0]) => {\n\t\t\t\t\tawait sdk.handleCallback(url);\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t};\n\n\treturn plugin;\n};\n"],"names":["isAuthenticated","createStrivacitySDK","options","sdk","initFlow","app","loadingRef","ref","optionsRef","isAuthenticatedRef","idTokenClaimsRef","accessTokenRef","refreshTokenRef","accessTokenExpiredRef","accessTokenExpirationDateRef","updateSession","LoginRendererComponent","STRIVACITY_SDK","url"],"mappings":"ucAsBWA,QAAAA,gBAA0C,IAAM,QAAQ,QAAQ,EAAK,EASzE,MAAMC,EAAuBC,GAAwB,CAC3D,MAAMC,EAAMC,EAAAA,SAASF,CAAO,EAqF5B,MAnFe,CACd,QAAUG,GAAa,CACtB,MAAMC,EAAaC,EAAAA,IAAa,EAAI,EAC9BC,EAAaD,EAAAA,IAAgBJ,EAAI,OAAO,EACxCM,EAAqBF,EAAAA,IAAa,EAAK,EACvCG,EAAmBH,EAAAA,IAA0B,IAAI,EACjDI,EAAiBJ,EAAAA,IAAmB,IAAI,EACxCK,EAAkBL,EAAAA,IAAmB,IAAI,EACzCM,EAAwBN,EAAAA,IAAa,EAAI,EACzCO,EAA+BP,EAAAA,IAAmB,IAAI,EAEtDQ,EAAgB,SAAY,CACjCN,EAAmB,MAAQ,MAAMN,EAAI,gBACrCO,EAAiB,MAAQP,EAAI,eAAiB,KAC9CQ,EAAe,MAAQR,EAAI,aAAe,KAC1CS,EAAgB,MAAQT,EAAI,cAAgB,KAC5CU,EAAsB,MAAQV,EAAI,mBAClCW,EAA6B,MAAQX,EAAI,2BAA6B,KAElEG,EAAW,QACdA,EAAW,MAAQ,GACpB,EAGDN,QAAAA,gBAAkB,IAAMG,EAAI,gBAE5BA,EAAI,iBAAiB,OAAQY,CAAa,EAC1CZ,EAAI,iBAAiB,WAAYY,CAAa,EAC9CZ,EAAI,iBAAiB,gBAAiBY,CAAa,EACnDZ,EAAI,iBAAiB,iBAAkBY,CAAa,EACpDZ,EAAI,iBAAiB,qBAAsBY,CAAa,EACxDZ,EAAI,iBAAiB,kBAAmBY,CAAa,EACrDZ,EAAI,iBAAiB,eAAgBY,CAAa,EAClDZ,EAAI,iBAAiB,oBAAqBY,CAAa,EAEvDV,EAAI,UAAU,mBAAoBW,WAAsB,EACxDX,EAAI,QAAQY,iBAAgB,CAC3B,IAAAd,EACA,QAASG,EACT,QAASE,EACT,gBAAiBC,EACjB,cAAeC,EACf,YAAaC,EACb,aAAcC,EACd,mBAAoBC,EACpB,0BAA2BC,EAE3B,MAAO,MAAOZ,GAA8F,CAC3G,GAAIC,EAAI,QAAQ,OAAS,SACxB,OAAOA,EAAI,MAAMD,CAAO,EAGzB,MAAMC,EAAI,MAAMD,CAAO,EACvB,MAAMa,EAAA,CAAc,EAErB,SAAU,MAAOb,GAAuG,CACvH,GAAIC,EAAI,QAAQ,OAAS,SACxB,OAAOA,EAAI,SAASD,CAAO,EAG5B,MAAMC,EAAI,SAASD,CAAO,EAC1B,MAAMa,EAAA,CAAc,EAErB,QAAS,SAAY,CACpB,MAAMZ,EAAI,QAAA,EACV,MAAMY,EAAA,CAAc,EAErB,OAAQ,SAAY,CACnB,MAAMZ,EAAI,OAAA,EACV,MAAMY,EAAA,CAAc,EAErB,OAAQ,MAAOb,GAA0E,CACxF,MAAMC,EAAI,OAAOD,CAAO,EACxB,MAAMa,EAAA,CAAc,EAErB,eAAgB,MAAOG,GAAqH,CAC3I,MAAMf,EAAI,eAAee,CAAG,EAC5B,MAAMH,EAAA,CAAc,CACrB,CACA,CAAA,CACF,CAIF"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,28 +1,22 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { SDKOptions, SDKStorage, IdTokenClaims } from '@strivacity/sdk-core';
|
|
1
|
+
import { SDKOptions } from '@strivacity/sdk-core';
|
|
3
2
|
import { PopupFlow } from '@strivacity/sdk-core/flows/PopupFlow';
|
|
4
3
|
import { RedirectFlow } from '@strivacity/sdk-core/flows/RedirectFlow';
|
|
4
|
+
import { NativeFlow } from '@strivacity/sdk-core/flows/NativeFlow';
|
|
5
|
+
import { App } from 'vue';
|
|
6
|
+
import { HttpClient } from '@strivacity/sdk-core/utils/HttpClient';
|
|
5
7
|
import { LocalStorage } from '@strivacity/sdk-core/storages/LocalStorage';
|
|
6
8
|
import { SessionStorage } from '@strivacity/sdk-core/storages/SessionStorage';
|
|
7
|
-
import {
|
|
8
|
-
export
|
|
9
|
-
export
|
|
9
|
+
import { useStrivacity } from './composables';
|
|
10
|
+
export * from '@strivacity/sdk-core';
|
|
11
|
+
export type * from './types';
|
|
12
|
+
export type { PopupFlow, RedirectFlow, NativeFlow };
|
|
13
|
+
export { HttpClient, LocalStorage, SessionStorage, useStrivacity };
|
|
10
14
|
/**
|
|
11
15
|
* Checks if the user is authenticated.
|
|
12
16
|
*
|
|
13
17
|
* @returns {Promise<boolean>} A promise that resolves to `true` if the user is authenticated, otherwise `false`.
|
|
14
18
|
*/
|
|
15
19
|
export declare let isAuthenticated: () => Promise<boolean>;
|
|
16
|
-
/**
|
|
17
|
-
* Retrieves the Strivacity SDK context for Popup or Redirect flows.
|
|
18
|
-
*
|
|
19
|
-
* @template T The type of context, either PopupContext or RedirectContext.
|
|
20
|
-
*
|
|
21
|
-
* @throws {Error} If the Strivacity SDK context is not found.
|
|
22
|
-
*
|
|
23
|
-
* @returns {T} The Strivacity SDK context, typed as either PopupContext or RedirectContext.
|
|
24
|
-
*/
|
|
25
|
-
export declare const useStrivacity: <T extends PopupContext | RedirectContext>() => T;
|
|
26
20
|
/**
|
|
27
21
|
* Creates a Strivacity SDK plugin for Vue.
|
|
28
22
|
*
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{ref as n}from"vue";import{initFlow as v}from"@strivacity/sdk-core";export*from"@strivacity/sdk-core";import{HttpClient as A}from"@strivacity/sdk-core/utils/HttpClient";import{LocalStorage as I}from"@strivacity/sdk-core/storages/LocalStorage";import{SessionStorage as F}from"@strivacity/sdk-core/storages/SessionStorage";import{STRIVACITY_SDK as T}from"./composables.mjs";import{useStrivacity as K}from"./composables.mjs";import{_ as p}from"./assets/login-renderer.vue_vue_type_script_setup_true_lang.mjs";import"@strivacity/sdk-core/utils/object";let m=()=>Promise.resolve(!1);const x=d=>{const e=v(d);return{install:a=>{const s=n(!0),k=n(e.options),i=n(!1),r=n(null),c=n(null),l=n(null),u=n(!0),f=n(null),t=async()=>{i.value=await e.isAuthenticated,r.value=e.idTokenClaims||null,c.value=e.accessToken||null,l.value=e.refreshToken||null,u.value=e.accessTokenExpired,f.value=e.accessTokenExpirationDate||null,s.value&&(s.value=!1)};m=()=>e.isAuthenticated,e.subscribeToEvent("init",t),e.subscribeToEvent("loggedIn",t),e.subscribeToEvent("sessionLoaded",t),e.subscribeToEvent("tokenRefreshed",t),e.subscribeToEvent("tokenRefreshFailed",t),e.subscribeToEvent("logoutInitiated",t),e.subscribeToEvent("tokenRevoked",t),e.subscribeToEvent("tokenRevokeFailed",t),a.component("StyLoginRenderer",p),a.provide(T,{sdk:e,loading:s,options:k,isAuthenticated:i,idTokenClaims:r,accessToken:c,refreshToken:l,accessTokenExpired:u,accessTokenExpirationDate:f,login:async o=>{if(e.options.mode==="native")return e.login(o);await e.login(o),await t()},register:async o=>{if(e.options.mode==="native")return e.register(o);await e.register(o),await t()},refresh:async()=>{await e.refresh(),await t()},revoke:async()=>{await e.revoke(),await t()},logout:async o=>{await e.logout(o),await t()},handleCallback:async o=>{await e.handleCallback(o),await t()}})}}};export{A as HttpClient,I as LocalStorage,F as SessionStorage,x as createStrivacitySDK,m as isAuthenticated,K as useStrivacity};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../src/index.ts"],"sourcesContent":["import type { IdTokenClaims, SDKOptions } from '@strivacity/sdk-core';\nimport type { PopupFlow } from '@strivacity/sdk-core/flows/PopupFlow';\nimport type { RedirectFlow } from '@strivacity/sdk-core/flows/RedirectFlow';\nimport type { NativeFlow } from '@strivacity/sdk-core/flows/NativeFlow';\nimport { type App, ref } from 'vue';\nimport { initFlow } from '@strivacity/sdk-core';\nimport { HttpClient } from '@strivacity/sdk-core/utils/HttpClient';\nimport { LocalStorage } from '@strivacity/sdk-core/storages/LocalStorage';\nimport { SessionStorage } from '@strivacity/sdk-core/storages/SessionStorage';\nimport { STRIVACITY_SDK, useStrivacity } from './composables';\nimport LoginRendererComponent from './login-renderer.vue';\n\nexport * from '@strivacity/sdk-core';\nexport type * from './types';\nexport type { PopupFlow, RedirectFlow, NativeFlow };\nexport { HttpClient, LocalStorage, SessionStorage, useStrivacity };\n\n/**\n * Checks if the user is authenticated.\n *\n * @returns {Promise<boolean>} A promise that resolves to `true` if the user is authenticated, otherwise `false`.\n */\nexport let isAuthenticated: () => Promise<boolean> = () => Promise.resolve(false);\n\n/**\n * Creates a Strivacity SDK plugin for Vue.\n *\n * @param {SDKOptions} options - The options used to configure the SDK.\n *\n * @returns {Plugin} A Vue plugin that can be installed in the application.\n */\nexport const createStrivacitySDK = (options: SDKOptions) => {\n\tconst sdk = initFlow(options);\n\n\tconst plugin = {\n\t\tinstall: (app: App) => {\n\t\t\tconst loadingRef = ref<boolean>(true);\n\t\t\tconst optionsRef = ref<SDKOptions>(sdk.options);\n\t\t\tconst isAuthenticatedRef = ref<boolean>(false);\n\t\t\tconst idTokenClaimsRef = ref<IdTokenClaims | null>(null);\n\t\t\tconst accessTokenRef = ref<string | null>(null);\n\t\t\tconst refreshTokenRef = ref<string | null>(null);\n\t\t\tconst accessTokenExpiredRef = ref<boolean>(true);\n\t\t\tconst accessTokenExpirationDateRef = ref<number | null>(null);\n\n\t\t\tconst updateSession = async () => {\n\t\t\t\tisAuthenticatedRef.value = await sdk.isAuthenticated;\n\t\t\t\tidTokenClaimsRef.value = sdk.idTokenClaims || null;\n\t\t\t\taccessTokenRef.value = sdk.accessToken || null;\n\t\t\t\trefreshTokenRef.value = sdk.refreshToken || null;\n\t\t\t\taccessTokenExpiredRef.value = sdk.accessTokenExpired;\n\t\t\t\taccessTokenExpirationDateRef.value = sdk.accessTokenExpirationDate || null;\n\n\t\t\t\tif (loadingRef.value) {\n\t\t\t\t\tloadingRef.value = false;\n\t\t\t\t}\n\t\t\t};\n\n\t\t\tisAuthenticated = () => sdk.isAuthenticated;\n\n\t\t\tsdk.subscribeToEvent('init', updateSession);\n\t\t\tsdk.subscribeToEvent('loggedIn', updateSession);\n\t\t\tsdk.subscribeToEvent('sessionLoaded', updateSession);\n\t\t\tsdk.subscribeToEvent('tokenRefreshed', updateSession);\n\t\t\tsdk.subscribeToEvent('tokenRefreshFailed', updateSession);\n\t\t\tsdk.subscribeToEvent('logoutInitiated', updateSession);\n\t\t\tsdk.subscribeToEvent('tokenRevoked', updateSession);\n\t\t\tsdk.subscribeToEvent('tokenRevokeFailed', updateSession);\n\n\t\t\tapp.component('StyLoginRenderer', LoginRendererComponent);\n\t\t\tapp.provide(STRIVACITY_SDK, {\n\t\t\t\tsdk: sdk,\n\t\t\t\tloading: loadingRef,\n\t\t\t\toptions: optionsRef,\n\t\t\t\tisAuthenticated: isAuthenticatedRef,\n\t\t\t\tidTokenClaims: idTokenClaimsRef,\n\t\t\t\taccessToken: accessTokenRef,\n\t\t\t\trefreshToken: refreshTokenRef,\n\t\t\t\taccessTokenExpired: accessTokenExpiredRef,\n\t\t\t\taccessTokenExpirationDate: accessTokenExpirationDateRef,\n\n\t\t\t\tlogin: async (options?: Parameters<PopupFlow['login'] | RedirectFlow['login'] | NativeFlow['login']>[0]) => {\n\t\t\t\t\tif (sdk.options.mode === 'native') {\n\t\t\t\t\t\treturn sdk.login(options);\n\t\t\t\t\t}\n\n\t\t\t\t\tawait sdk.login(options);\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\tregister: async (options?: Parameters<PopupFlow['register'] | RedirectFlow['register'] | NativeFlow['register']>[0]) => {\n\t\t\t\t\tif (sdk.options.mode === 'native') {\n\t\t\t\t\t\treturn sdk.register(options);\n\t\t\t\t\t}\n\n\t\t\t\t\tawait sdk.register(options);\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\trefresh: async () => {\n\t\t\t\t\tawait sdk.refresh();\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\trevoke: async () => {\n\t\t\t\t\tawait sdk.revoke();\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\tlogout: async (options?: Parameters<PopupFlow['logout'] | RedirectFlow['logout']>[0]) => {\n\t\t\t\t\tawait sdk.logout(options);\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t\thandleCallback: async (url?: Parameters<PopupFlow['handleCallback'] | RedirectFlow['handleCallback'] | NativeFlow['handleCallback']>[0]) => {\n\t\t\t\t\tawait sdk.handleCallback(url);\n\t\t\t\t\tawait updateSession();\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t};\n\n\treturn plugin;\n};\n"],"names":["isAuthenticated","createStrivacitySDK","options","sdk","initFlow","app","loadingRef","ref","optionsRef","isAuthenticatedRef","idTokenClaimsRef","accessTokenRef","refreshTokenRef","accessTokenExpiredRef","accessTokenExpirationDateRef","updateSession","LoginRendererComponent","STRIVACITY_SDK","url"],"mappings":"0iBAsBO,IAAIA,EAA0C,IAAM,QAAQ,QAAQ,EAAK,EASzE,MAAMC,EAAuBC,GAAwB,CAC3D,MAAMC,EAAMC,EAASF,CAAO,EAqF5B,MAnFe,CACd,QAAUG,GAAa,CACtB,MAAMC,EAAaC,EAAa,EAAI,EAC9BC,EAAaD,EAAgBJ,EAAI,OAAO,EACxCM,EAAqBF,EAAa,EAAK,EACvCG,EAAmBH,EAA0B,IAAI,EACjDI,EAAiBJ,EAAmB,IAAI,EACxCK,EAAkBL,EAAmB,IAAI,EACzCM,EAAwBN,EAAa,EAAI,EACzCO,EAA+BP,EAAmB,IAAI,EAEtDQ,EAAgB,SAAY,CACjCN,EAAmB,MAAQ,MAAMN,EAAI,gBACrCO,EAAiB,MAAQP,EAAI,eAAiB,KAC9CQ,EAAe,MAAQR,EAAI,aAAe,KAC1CS,EAAgB,MAAQT,EAAI,cAAgB,KAC5CU,EAAsB,MAAQV,EAAI,mBAClCW,EAA6B,MAAQX,EAAI,2BAA6B,KAElEG,EAAW,QACdA,EAAW,MAAQ,GACpB,EAGDN,EAAkB,IAAMG,EAAI,gBAE5BA,EAAI,iBAAiB,OAAQY,CAAa,EAC1CZ,EAAI,iBAAiB,WAAYY,CAAa,EAC9CZ,EAAI,iBAAiB,gBAAiBY,CAAa,EACnDZ,EAAI,iBAAiB,iBAAkBY,CAAa,EACpDZ,EAAI,iBAAiB,qBAAsBY,CAAa,EACxDZ,EAAI,iBAAiB,kBAAmBY,CAAa,EACrDZ,EAAI,iBAAiB,eAAgBY,CAAa,EAClDZ,EAAI,iBAAiB,oBAAqBY,CAAa,EAEvDV,EAAI,UAAU,mBAAoBW,CAAsB,EACxDX,EAAI,QAAQY,EAAgB,CAC3B,IAAAd,EACA,QAASG,EACT,QAASE,EACT,gBAAiBC,EACjB,cAAeC,EACf,YAAaC,EACb,aAAcC,EACd,mBAAoBC,EACpB,0BAA2BC,EAE3B,MAAO,MAAOZ,GAA8F,CAC3G,GAAIC,EAAI,QAAQ,OAAS,SACxB,OAAOA,EAAI,MAAMD,CAAO,EAGzB,MAAMC,EAAI,MAAMD,CAAO,EACvB,MAAMa,EAAA,CAAc,EAErB,SAAU,MAAOb,GAAuG,CACvH,GAAIC,EAAI,QAAQ,OAAS,SACxB,OAAOA,EAAI,SAASD,CAAO,EAG5B,MAAMC,EAAI,SAASD,CAAO,EAC1B,MAAMa,EAAA,CAAc,EAErB,QAAS,SAAY,CACpB,MAAMZ,EAAI,QAAA,EACV,MAAMY,EAAA,CAAc,EAErB,OAAQ,SAAY,CACnB,MAAMZ,EAAI,OAAA,EACV,MAAMY,EAAA,CAAc,EAErB,OAAQ,MAAOb,GAA0E,CACxF,MAAMC,EAAI,OAAOD,CAAO,EACxB,MAAMa,EAAA,CAAc,EAErB,eAAgB,MAAOG,GAAqH,CAC3I,MAAMf,EAAI,eAAee,CAAG,EAC5B,MAAMH,EAAA,CAAc,CACrB,CACA,CAAA,CACF,CAIF"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const e=require("./assets/login-renderer.vue_vue_type_script_setup_true_lang.cjs");require("vue");require("@strivacity/sdk-core");require("@strivacity/sdk-core/utils/object");require("./composables.cjs");module.exports=e._sfc_main;
|
|
2
|
+
//# sourceMappingURL=login-renderer.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"login-renderer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"login-renderer.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Component } from 'vue';
|
|
2
|
+
import { PartialRecord, NativeParams, WidgetType, LoginFlowState, IdTokenClaims, FallbackError } from '@strivacity/sdk-core';
|
|
3
|
+
type __VLS_Props = {
|
|
4
|
+
params?: NativeParams;
|
|
5
|
+
widgets?: PartialRecord<WidgetType, Component>;
|
|
6
|
+
sessionId?: string | null;
|
|
7
|
+
};
|
|
8
|
+
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
9
|
+
login: (args_0: IdTokenClaims | null | undefined) => any;
|
|
10
|
+
fallback: (args_0: FallbackError) => any;
|
|
11
|
+
error: (args_0: any) => any;
|
|
12
|
+
globalMessage: (args_0: string) => any;
|
|
13
|
+
blockReady: (args_0: {
|
|
14
|
+
previousState: LoginFlowState;
|
|
15
|
+
state: LoginFlowState;
|
|
16
|
+
}) => any;
|
|
17
|
+
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
18
|
+
onLogin?: ((args_0: IdTokenClaims | null | undefined) => any) | undefined;
|
|
19
|
+
onFallback?: ((args_0: FallbackError) => any) | undefined;
|
|
20
|
+
onError?: ((args_0: any) => any) | undefined;
|
|
21
|
+
onGlobalMessage?: ((args_0: string) => any) | undefined;
|
|
22
|
+
onBlockReady?: ((args_0: {
|
|
23
|
+
previousState: LoginFlowState;
|
|
24
|
+
state: LoginFlowState;
|
|
25
|
+
}) => any) | undefined;
|
|
26
|
+
}>, {
|
|
27
|
+
params: NativeParams;
|
|
28
|
+
widgets: PartialRecord<WidgetType, Component>;
|
|
29
|
+
sessionId: string | null;
|
|
30
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
31
|
+
export default _default;
|
package/dist/types.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Ref } from 'vue';
|
|
2
|
-
import { IdTokenClaims } from '@strivacity/sdk-core';
|
|
2
|
+
import { IdTokenClaims, LoginFlowMessage, LoginFlowState, SDKOptions } from '@strivacity/sdk-core';
|
|
3
3
|
import { PopupFlow } from '@strivacity/sdk-core/flows/PopupFlow';
|
|
4
4
|
import { RedirectFlow } from '@strivacity/sdk-core/flows/RedirectFlow';
|
|
5
|
+
import { NativeFlow } from '@strivacity/sdk-core/flows/NativeFlow';
|
|
5
6
|
/**
|
|
6
7
|
* Represents the session state, including authentication details and token information.
|
|
7
8
|
*/
|
|
@@ -11,6 +12,10 @@ export type Session = {
|
|
|
11
12
|
* `true` when the session is initializing, otherwise `false`.
|
|
12
13
|
*/
|
|
13
14
|
loading: Ref<boolean>;
|
|
15
|
+
/**
|
|
16
|
+
* The SDK options used to configure the session.
|
|
17
|
+
*/
|
|
18
|
+
options: Ref<SDKOptions>;
|
|
14
19
|
/**
|
|
15
20
|
* Reactive reference to the user's authentication status.
|
|
16
21
|
* `true` if the user is authenticated, otherwise `false`.
|
|
@@ -47,27 +52,31 @@ export type Session = {
|
|
|
47
52
|
*/
|
|
48
53
|
export type PopupSDK = {
|
|
49
54
|
/**
|
|
50
|
-
*
|
|
55
|
+
* Represents the SDK instance.
|
|
56
|
+
*/
|
|
57
|
+
sdk: InstanceType<typeof PopupFlow>;
|
|
58
|
+
/**
|
|
59
|
+
* Initiates the login process.
|
|
51
60
|
*/
|
|
52
61
|
login: InstanceType<typeof PopupFlow>['login'];
|
|
53
62
|
/**
|
|
54
|
-
* Registers a new user
|
|
63
|
+
* Registers a new user.
|
|
55
64
|
*/
|
|
56
65
|
register: InstanceType<typeof PopupFlow>['register'];
|
|
57
66
|
/**
|
|
58
|
-
* Refreshes the user's session
|
|
67
|
+
* Refreshes the user's session.
|
|
59
68
|
*/
|
|
60
69
|
refresh: InstanceType<typeof PopupFlow>['refresh'];
|
|
61
70
|
/**
|
|
62
|
-
* Revokes the current session tokens
|
|
71
|
+
* Revokes the current session tokens.
|
|
63
72
|
*/
|
|
64
73
|
revoke: InstanceType<typeof PopupFlow>['revoke'];
|
|
65
74
|
/**
|
|
66
|
-
* Logs out the user
|
|
75
|
+
* Logs out the user.
|
|
67
76
|
*/
|
|
68
77
|
logout: InstanceType<typeof PopupFlow>['logout'];
|
|
69
78
|
/**
|
|
70
|
-
* Handles the callback after
|
|
79
|
+
* Handles the callback after authentication or token exchange.
|
|
71
80
|
*/
|
|
72
81
|
handleCallback: InstanceType<typeof PopupFlow>['handleCallback'];
|
|
73
82
|
};
|
|
@@ -76,30 +85,67 @@ export type PopupSDK = {
|
|
|
76
85
|
*/
|
|
77
86
|
export type RedirectSDK = {
|
|
78
87
|
/**
|
|
79
|
-
*
|
|
88
|
+
* Represents the SDK instance.
|
|
89
|
+
*/
|
|
90
|
+
sdk: InstanceType<typeof RedirectFlow>;
|
|
91
|
+
/**
|
|
92
|
+
* Initiates the login process.
|
|
80
93
|
*/
|
|
81
94
|
login: InstanceType<typeof RedirectFlow>['login'];
|
|
82
95
|
/**
|
|
83
|
-
* Registers a new user
|
|
96
|
+
* Registers a new user.
|
|
84
97
|
*/
|
|
85
98
|
register: InstanceType<typeof RedirectFlow>['register'];
|
|
86
99
|
/**
|
|
87
|
-
* Refreshes the user's session
|
|
100
|
+
* Refreshes the user's session.
|
|
88
101
|
*/
|
|
89
102
|
refresh: InstanceType<typeof RedirectFlow>['refresh'];
|
|
90
103
|
/**
|
|
91
|
-
* Revokes the current session tokens
|
|
104
|
+
* Revokes the current session tokens.
|
|
92
105
|
*/
|
|
93
106
|
revoke: InstanceType<typeof RedirectFlow>['revoke'];
|
|
94
107
|
/**
|
|
95
|
-
* Logs out the user
|
|
108
|
+
* Logs out the user.
|
|
96
109
|
*/
|
|
97
110
|
logout: InstanceType<typeof RedirectFlow>['logout'];
|
|
98
111
|
/**
|
|
99
|
-
* Handles the callback after
|
|
112
|
+
* Handles the callback after authentication or token exchange.
|
|
100
113
|
*/
|
|
101
114
|
handleCallback: InstanceType<typeof RedirectFlow>['handleCallback'];
|
|
102
115
|
};
|
|
116
|
+
/**
|
|
117
|
+
* Represents the available authentication flows and operations for Native-based interactions.
|
|
118
|
+
*/
|
|
119
|
+
export type NativeSDK = {
|
|
120
|
+
/**
|
|
121
|
+
* Represents the SDK instance.
|
|
122
|
+
*/
|
|
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
|
+
};
|
|
103
149
|
/**
|
|
104
150
|
* Represents a combined context for Popup-based flows, containing both the Popup SDK and the session state.
|
|
105
151
|
*/
|
|
@@ -108,3 +154,17 @@ export type PopupContext = PopupSDK & Session;
|
|
|
108
154
|
* Represents a combined context for Redirect-based flows, containing both the Redirect SDK and the session state.
|
|
109
155
|
*/
|
|
110
156
|
export 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
|
+
export type NativeContext = NativeSDK & Session;
|
|
161
|
+
export 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
|
+
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strivacity/sdk-vue",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0-beta.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Strivacity Vue.js SDK client",
|
|
7
7
|
"author": "strivacity <info@strivacity.com>",
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@strivacity/sdk-core": "
|
|
9
|
+
"@strivacity/sdk-core": "2.0.0-beta.2"
|
|
10
10
|
},
|
|
11
11
|
"peerDependencies": {
|
|
12
12
|
"vue": ">=3"
|