@descope/vue-sdk 0.0.0-next-45ef6f06-20240717 → 0.0.0-next-c55974df-20250416

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -27,11 +27,11 @@ import descope from '@descope/vue-sdk';
27
27
 
28
28
  const app = createApp(App);
29
29
  app.use(descope, {
30
- projectId: 'my-project-id'
31
- // If the Descope project manages the token response in cookies, a custom domain
32
- // must be configured (e.g., https://auth.app.example.com)
33
- // and should be set as the baseUrl property.
34
- // baseUrl: https://auth.app.example.com'
30
+ projectId: 'my-project-id',
31
+ // If the Descope project manages the token response in cookies, a custom domain
32
+ // must be configured (e.g., https://auth.app.example.com)
33
+ // and should be set as the baseUrl property.
34
+ // baseUrl: https://auth.app.example.com'
35
35
  });
36
36
  app.mount('#app');
37
37
  ```
@@ -40,24 +40,23 @@ app.mount('#app');
40
40
 
41
41
  ```vue
42
42
  <template>
43
- <p v-if="isFlowLoading">Loading...</p>
44
- <Descope
45
- flowId="my-flow-id"
46
- @success="handleSuccess"
47
- @error="handleError"
48
- @ready="handleReady"
49
- />
50
- <!-- additional props -->
51
- <!-- theme="dark" theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light" -->
52
- <!-- v-bind:debug="true" debug can be set to true to enable debug mode -->
53
- <!-- locale="en" locale can be any supported locale which the flow's screen translated to, if not provided, the locale is taken from the browser's locale. -->
54
- <!-- tenant="tenantId" tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant -->
55
- <!-- redirectUrl="redirectUrl" Redirect URL for OAuth and SSO (will be used when redirecting back from the OAuth provider / IdP), or for "Magic Link" and "Enchanted Link" (will be used as a link in the message sent to the the user) -->
56
- <!-- autoFocus="skipFirstScreen" autoFocus can be true, false or "skipFirstScreen". Default is true. - true: automatically focus on the first input of each screen - false: do not automatically focus on screen's inputs - "skipFirstScreen": automatically focus on the first input of each screen, except first screen -->
57
- <!-- validateOnBlur can be true in order to show input validation errors on blur, in addition to on submit. Default is false. -->
58
- <!-- errorTransformer="errorTransformer" errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user. NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is. -->
59
- <!-- form="{ email: 'test@domain.com' }" form is an object the initial form context that is used in screens inputs in the flow execution. Used to inject predifined input values on flow start such as custom inputs, custom attrbiutes and other inputs. Keys passed can be accessed in flows actions, conditions and screens prefixed with "form.". NOTE: form is not required. If not provided, 'form' context key will be empty before user input. -->
60
- <!-- client="{ version: '1.2.3' }" client is an object the initial client context in the flow execution. Keys passed can be accessed in flows actions and conditions prefixed with "client.". NOTE: client is not required. If not provided, context key will be empty. -->
43
+ <p v-if="isFlowLoading">Loading...</p>
44
+ <Descope flowId="my-flow-id" @success="handleSuccess" @error="handleError" @ready="handleReady" />
45
+ <!-- additional props -->
46
+ <!-- theme="dark" theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light" -->
47
+ <!-- v-bind:debug="true" debug can be set to true to enable debug mode -->
48
+ <!-- locale="en" locale can be any supported locale which the flow's screen translated to, if not provided, the locale is taken from the browser's locale. -->
49
+ <!-- tenant="tenantId" tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant -->
50
+ <!-- redirectUrl="redirectUrl" Redirect URL for OAuth and SSO (will be used when redirecting back from the OAuth provider / IdP), or for "Magic Link" and "Enchanted Link" (will be used as a link in the message sent to the the user) -->
51
+ <!-- autoFocus="skipFirstScreen" autoFocus can be true, false or "skipFirstScreen". Default is true. - true: automatically focus on the first input of each screen - false: do not automatically focus on screen's inputs - "skipFirstScreen": automatically focus on the first input of each screen, except first screen -->
52
+ <!-- validateOnBlur can be true in order to show input validation errors on blur, in addition to on submit. Default is false. -->
53
+ <!-- restartOnError if set to true, in case of flow version mismatch, will restart the flow if the components version was not changed. Default is false. -->
54
+ <!-- errorTransformer="errorTransformer" errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user. NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is. -->
55
+ <!-- form="{ email: 'test@domain.com' }" form is an object the initial form context that is used in screens inputs in the flow execution. Used to inject predifined input values on flow start such as custom inputs, custom attrbiutes and other inputs. Keys passed can be accessed in flows actions, conditions and screens prefixed with "form.". NOTE: form is not required. If not provided, 'form' context key will be empty before user input. -->
56
+ <!-- client="{ version: '1.2.3' }" client is an object the initial client context in the flow execution. Keys passed can be accessed in flows actions and conditions prefixed with "client.". NOTE: client is not required. If not provided, context key will be empty. -->
57
+ <!-- styleId="my-awesome-style" Use a custom style name or keep empty to use the default style. -->
58
+ <!-- nonce="rAnd0m" Set a CSP nonce that will be used for style and script tags -->
59
+ <!-- dismissScreenErrorOnInput=true Clear screen error message on user input -->
61
60
  </template>
62
61
 
63
62
  <script setup>
@@ -67,15 +66,15 @@ import { ref } from 'vue';
67
66
  const isFlowLoading = ref(true);
68
67
 
69
68
  const handleSuccess = (e) => {
70
- console.log('Logged in!', e);
69
+ console.log('Logged in!', e);
71
70
  };
72
71
 
73
72
  const handleError = (e) => {
74
- console.log('Could not log in', e);
73
+ console.log('Could not log in', e);
75
74
  };
76
75
 
77
76
  const handleReady = () => {
78
- isFlowLoading.value = false;
77
+ isFlowLoading.value = false;
79
78
  };
80
79
 
81
80
  // let tenantId = '<tenantId>'; // replace with your tenant ID
@@ -90,6 +89,37 @@ const handleReady = () => {
90
89
  </script>
91
90
  ```
92
91
 
92
+ ### `onScreenUpdate`
93
+
94
+ A function that is called whenever there is a new screen state and after every next call. It receives the following parameters:
95
+
96
+ - `screenName`: The name of the screen that is about to be rendered
97
+ - `context`: An object containing the upcoming screen state
98
+ - `next`: A function that, when called, continues the flow execution
99
+ - `ref`: A reference to the descope-wc node
100
+
101
+ The function can be sync or async, and should return a boolean indicating whether a custom screen should be rendered:
102
+
103
+ - `true`: Render a custom screen
104
+ - `false`: Render the default flow screen
105
+
106
+ This function allows rendering custom screens instead of the default flow screens.
107
+ It can be useful for highly customized UIs or specific logic not covered by the default screens
108
+
109
+ To render a custom screen, its elements should be appended as children of the `Descope` component
110
+
111
+ Usage example:
112
+
113
+ ```javascript
114
+ function onScreenUpdate(screenName, context, next) {
115
+ if (screenName === 'My Custom Screen') {
116
+ return true;
117
+ }
118
+
119
+ return false;
120
+ }
121
+ ```
122
+
93
123
  ### Use the `useDescope`, `useSession` and `useUser` functions in your components in order to get authentication state, user details and utilities
94
124
 
95
125
  This can be helpful to implement application-specific logic. Examples:
@@ -104,7 +134,7 @@ This can be helpful to implement application-specific logic. Examples:
104
134
  <div v-if="isSessionLoading || isUserLoading">Loading ...</div>
105
135
  <div v-else-if="isAuthenticated">
106
136
  <div>Hello {{ user?.name }}</div>
107
- <button @click="logout">Logout</button>
137
+ <button @click="logout()">Logout</button>
108
138
  </div>
109
139
  <div v-else>You are not logged in</div>
110
140
  </div>
@@ -113,8 +143,8 @@ This can be helpful to implement application-specific logic. Examples:
113
143
  <script setup>
114
144
  import { useDescope, useSession, useUser } from '@descope/vue-sdk';
115
145
 
116
- const { isAuthenticated, isSessionLoading } = useSession();
117
- const { user, isUserLoading } = useUser();
146
+ const { isAuthenticated, isLoading: isSessionLoading } = useSession();
147
+ const { user, isLoading: isUserLoading } = useUser();
118
148
  const { logout } = useDescope();
119
149
  </script>
120
150
  ```
@@ -134,7 +164,7 @@ Note: Descope also provides server-side SDKs in various languages (NodeJS, Go, P
134
164
  There are 2 ways to achieve that:
135
165
 
136
166
  1. Using `getSessionToken` to get the token, and pass it on the `Authorization` Header (Recommended)
137
- 2. Passing `sessionTokenViaCookie` boolean option when initializing the plugin (Use cautiously, session token may grow, especially in cases of using authorization, or adding custom claim)
167
+ 2. Passing `sessionTokenViaCookie` option when initializing the plugin (Use cautiously, session token may grow, especially in cases of using authorization, or adding custom claim)
138
168
 
139
169
  #### 1. Using `getSessionToken` to get the token
140
170
 
@@ -146,13 +176,13 @@ import { getSessionToken } from '@descope/vue-sdk';
146
176
  // fetch data using back
147
177
  // Note: Descope backend SDKs support extracting session token from the Authorization header
148
178
  export const fetchData = async () => {
149
- const sessionToken = getSessionToken();
150
- const res = await fetch('/path/to/server/api', {
151
- headers: {
152
- Authorization: `Bearer ${sessionToken}`
153
- }
154
- });
155
- // ... use res
179
+ const sessionToken = getSessionToken();
180
+ const res = await fetch('/path/to/server/api', {
181
+ headers: {
182
+ Authorization: `Bearer ${sessionToken}`,
183
+ },
184
+ });
185
+ // ... use res
156
186
  };
157
187
  ```
158
188
 
@@ -172,11 +202,14 @@ import descope from '@descope/vue-sdk';
172
202
  const app = createApp(App);
173
203
 
174
204
  app.use(descope, {
175
- projectId: 'project-id',
176
- sessionTokenViaCookie: true
205
+ projectId: 'project-id',
206
+ sessionTokenViaCookie: true,
177
207
  });
178
208
  ```
179
209
 
210
+ Note: The session token cookie is set to [`SameSite=Strict; Secure;`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie) by default.
211
+ If you need to customize this, you can set `sessionTokenViaCookie={sameSite: 'Lax', secure: false}` (if you pass only `sameSite`, `secure` will be set to `true` by default).
212
+
180
213
  Now, whenever you call `fetch`, the cookie will automatically be sent with the request.
181
214
  Descope backend SDKs also support extracting the token from the `DS` cookie.
182
215
 
@@ -196,13 +229,18 @@ import descope, { getSdk } from '../src';
196
229
  const app = createApp(App);
197
230
 
198
231
  app.use(descope, {
199
- projectId: 'project-id'
232
+ projectId: 'project-id',
200
233
  });
201
234
 
202
235
  const sdk = getSdk();
203
236
 
204
237
  sdk?.onSessionTokenChange((newSession) => {
205
- // here you can implement custom logic when the session is changing
238
+ // here you can implement custom logic when the session is changing,
239
+ // note that the session may be not available if it is managed in cookies
240
+ });
241
+
242
+ sdk?.onIsAuthenticatedChange((isAuthenticated) => {
243
+ // here you can implement custom logic when the authentication state is changing
206
244
  });
207
245
  ```
208
246
 
@@ -217,6 +255,7 @@ You can also use the following functions to assist with various actions managing
217
255
  `isRefreshTokenExpired(token = getRefreshToken())` - Check whether the current refresh token is expired. Provide a refresh token if is not persisted.
218
256
  `getJwtRoles(token = getSessionToken(), tenant = '')` - Get current roles from an existing session token. Provide tenant id for specific tenant roles.
219
257
  `getJwtPermissions(token = getSessionToken(), tenant = '')` - Fet current permissions from an existing session token. Provide tenant id for specific tenant permissions.
258
+ `getCurrentTenant(token = getSessionToken())` - Get current tenant id from an existing session token (from the `dct` claim).
220
259
 
221
260
  ### Refresh token lifecycle
222
261
 
@@ -272,7 +311,7 @@ Note:
272
311
 
273
312
  ```vue
274
313
  <template>
275
- <UserManagement tenant="tenant-id" widget-id="user-management-widget" />
314
+ <UserManagement tenant="tenant-id" widget-id="user-management-widget" />
276
315
  </template>
277
316
 
278
317
  <script setup>
@@ -302,7 +341,7 @@ Note:
302
341
 
303
342
  ```vue
304
343
  <template>
305
- <RoleManagement tenant="tenant-id" widget-id="role-management-widget" />
344
+ <RoleManagement tenant="tenant-id" widget-id="role-management-widget" />
306
345
  </template>
307
346
 
308
347
  <script setup>
@@ -327,17 +366,11 @@ The widget lets you:
327
366
 
328
367
  ```vue
329
368
  <template>
330
- <!-- admin view: manage all tenant users' access keys -->
331
- <AccessKeyManagement
332
- tenant="tenant-id"
333
- widget-id="access-key-management-widget"
334
- />
335
-
336
- <!-- user view: mange access key for the logged-in tenant's user -->
337
- <AccessKeyManagement
338
- tenant="tenant-id"
339
- widget-id="user-access-key-management-widget"
340
- />
369
+ <!-- admin view: manage all tenant users' access keys -->
370
+ <AccessKeyManagement tenant="tenant-id" widget-id="access-key-management-widget" />
371
+
372
+ <!-- user view: mange access key for the logged-in tenant's user -->
373
+ <AccessKeyManagement tenant="tenant-id" widget-id="user-access-key-management-widget" />
341
374
  </template>
342
375
 
343
376
  <script setup>
@@ -356,7 +389,7 @@ The `AuditManagement` widget lets you embed an audit table in your site.
356
389
 
357
390
  ```vue
358
391
  <template>
359
- <AuditManagement tenant="tenant-id" widget-id="audit-management-widget" />
392
+ <AuditManagement tenant="tenant-id" widget-id="audit-management-widget" />
360
393
  </template>
361
394
 
362
395
  <script setup>
@@ -382,7 +415,7 @@ The widget lets you:
382
415
 
383
416
  ```vue
384
417
  <template>
385
- <UserProfile widget-id="user-profile-widget" @logout="onLogout" />
418
+ <UserProfile widget-id="user-profile-widget" @logout="onLogout" />
386
419
  </template>
387
420
 
388
421
  <script setup>
@@ -395,6 +428,25 @@ const onLogout = () => (window.location.href = '/login');
395
428
  Example:
396
429
  [User Profile](./example/components/MyUserProfile.vue)
397
430
 
431
+ #### Applications Portal
432
+
433
+ The `ApplicationsPortal` lets you embed an applications portal component in your app and allows the logged-in user to open applications they are assigned to.
434
+
435
+ ###### Usage
436
+
437
+ ```vue
438
+ <template>
439
+ <ApplicationsPortal widget-id="applications-portal-widget" />
440
+ </template>
441
+
442
+ <script setup>
443
+ import { ApplicationsPortal } from '@descope/vue-sdk';
444
+ </script>
445
+ ```
446
+
447
+ Example:
448
+ [User Profile](./example/components/MyApplicationsPortal.vue)
449
+
398
450
  ## Code Example
399
451
 
400
452
  You can find an example Vue app in the [example folder](./example).
@@ -456,11 +508,11 @@ The Descope SDK caches the user and session token in the frontend. If you update
456
508
  const sdk = useDescope();
457
509
 
458
510
  const handleUpdateUser = () => {
459
- myBackendUpdateUser().then(() => {
460
- sdk.me();
461
- // or
462
- sdk.refresh();
463
- });
511
+ myBackendUpdateUser().then(() => {
512
+ sdk.me();
513
+ // or
514
+ sdk.refresh();
515
+ });
464
516
  };
465
517
  ```
466
518
 
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("@descope/web-component"),r=require("@descope/web-js-sdk");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@descope/user-management-widget"),require("@descope/role-management-widget"),require("@descope/access-key-management-widget"),require("@descope/audit-management-widget"),require("@descope/user-profile-widget");var s=n(t),o=n(r);const a=Symbol("$descope"),i={"x-descope-sdk-name":"vue","x-descope-sdk-version":"0.0.0-next-45ef6f06-20240717"},u="undefined"!=typeof window,d=()=>{const t=e.inject(a);if(!t)throw Error("Missing Descope context, make sure you are using the Descope plugin");return t},l=()=>d().options,c=()=>d().sdk,p=e=>(...t)=>{let r;try{r=e(...t)}catch(e){console.error(e)}return r};let g;const m=e=>{const t=o.default({persistTokens:u,storeLastAuthenticatedUser:u,...e,autoRefresh:u});return g=t,t};g=m({projectId:"temp pid"});const f=()=>u?g?.getSessionToken():(console.warn("Get session token is not supported in SSR"),""),b=()=>u?g?.getRefreshToken():(console.warn("Get refresh token is not supported in SSR"),""),y=p(((e=f(),t)=>g?.getJwtPermissions(e,t))),h=p(((e=f(),t)=>g?.getJwtRoles(e,t))),v=["project-id","base-url","base-static-url","flow-id","^theme","^locale","^tenant","^debug","^telemetryKey","redirect-url","auto-focus","validate-on-blur","store-last-authenticated-user",".errorTransformer","^form","^client"];var w=e.defineComponent({__name:"Descope",props:{flowId:{type:String,required:!0},tenant:{type:String},theme:{type:String},locale:{type:String},debug:{type:Boolean},telemetryKey:{type:String},redirectUrl:{type:String},autoFocus:{type:Boolean||String},validateOnBlur:{type:Boolean},errorTransformer:{type:Function},form:{type:Object},client:{type:Object}},emits:["success","error","ready"],setup(t,{emit:r}){const n=t;s.default.sdkConfigOverrides={baseHeaders:i,persistTokens:!1,hooks:{get beforeRequest(){return g.httpClient.hooks.beforeRequest},set beforeRequest(e){}}};const{projectId:o,baseUrl:a,baseStaticUrl:u,storeLastAuthenticatedUser:d}=l(),p=c(),m=e.computed((()=>n.form?JSON.stringify(n.form):"")),f=e.computed((()=>n.client?JSON.stringify(n.client):"")),b=async e=>{await(p.httpClient.hooks?.afterRequest?.({},new Response(JSON.stringify(e.detail)))),r("success",e)},y=e=>r("error",e),h=e=>r("ready",e);return(r,n)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("descope-wc",{"project-id":e.unref(o),"base-url":e.unref(a),"base-static-url":e.unref(u),"flow-id":t.flowId,"^theme":t.theme,"^locale":t.locale,"^tenant":t.tenant,"^debug":t.debug,"^telemetryKey":t.telemetryKey,"redirect-url":t.redirectUrl,"auto-focus":t.autoFocus,"validate-on-blur":t.validateOnBlur,"store-last-authenticated-user":e.unref(d),".errorTransformer":t.errorTransformer,"^form":e.unref(m),"^client":e.unref(f),onSuccess:b,onError:y,onReady:h},null,40,v)]))}});w.__file="src/Descope.vue";const S=["project-id","base-url","base-static-url","^theme","^tenant","^debug","widget-id"];var k=e.defineComponent({__name:"UserManagement",props:{tenant:{type:String,required:!0},widgetId:{type:String,required:!0},theme:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s}=l();return(o,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("descope-user-management-widget",{"project-id":e.unref(r),"base-url":e.unref(n),"base-static-url":e.unref(s),"^theme":t.theme,"^tenant":t.tenant,"^debug":t.debug,"widget-id":t.widgetId},null,8,S)]))}});k.__file="src/UserManagement.vue";const U=["project-id","base-url","base-static-url","^theme","^tenant","^debug","widget-id"];var x=e.defineComponent({__name:"RoleManagement",props:{tenant:{type:String,required:!0},widgetId:{type:String,required:!0},theme:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s}=l();return(o,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("descope-role-management-widget",{"project-id":e.unref(r),"base-url":e.unref(n),"base-static-url":e.unref(s),"^theme":t.theme,"^tenant":t.tenant,"^debug":t.debug,"widget-id":t.widgetId},null,8,U)]))}});x.__file="src/RoleManagement.vue";const _=["project-id","base-url","base-static-url","^theme","^tenant","^debug","widget-id"];var j=e.defineComponent({__name:"AccessKeyManagement",props:{tenant:{type:String,required:!0},widgetId:{type:String,required:!0},theme:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s}=l();return(o,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("descope-access-key-management-widget",{"project-id":e.unref(r),"base-url":e.unref(n),"base-static-url":e.unref(s),"^theme":t.theme,"^tenant":t.tenant,"^debug":t.debug,"widget-id":t.widgetId},null,8,_)]))}});j.__file="src/AccessKeyManagement.vue";const q=["project-id","base-url","base-static-url","^theme","^tenant","^debug","widget-id"];var B=e.defineComponent({__name:"AuditManagement",props:{tenant:{type:String,required:!0},widgetId:{type:String,required:!0},theme:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s}=l();return(o,a)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("descope-audit-management-widget",{"project-id":e.unref(r),"base-url":e.unref(n),"base-static-url":e.unref(s),"^theme":t.theme,"^tenant":t.tenant,"^debug":t.debug,"widget-id":t.widgetId},null,8,q)]))}});B.__file="src/AuditManagement.vue";const I=["project-id","base-url","base-static-url","^theme","^debug","widget-id"];var E=e.defineComponent({__name:"UserProfile",props:{widgetId:{type:String,required:!0},theme:{type:String},debug:{type:Boolean}},emits:["logout"],setup(t,{emit:r}){const n=e=>r("logout",e),{projectId:s,baseUrl:o,baseStaticUrl:a}=l();return(r,i)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("descope-user-profile-widget",{"project-id":e.unref(s),"base-url":e.unref(o),"base-static-url":e.unref(a),"^theme":t.theme,"^debug":t.debug,"widget-id":t.widgetId,onLogout:n},null,40,I)]))}});E.__file="src/UserProfile.vue";const R=e.ref(null);let C;var T={install:function(t,r){const n=m({persistTokens:!0,...r,autoRefresh:!0,baseHeaders:i});C=n;const s=e.ref(null),o=e.ref(""),u=e.ref(null),d=e.ref(null);n.onSessionTokenChange((e=>{o.value=e})),n.onUserChange((e=>{d.value=e}));const l=async()=>{s.value=!0,await n.refresh(),s.value=!1},c=e.computed((()=>null===s.value)),p=e.computed((()=>null===u.value));R.value=()=>new Promise(((t,r)=>{!o.value&&c.value&&l().catch(r),e.watch((()=>s.value),(()=>!s.value&&t(!!e.unref(o))),{immediate:!0})})),t.provide(a,{session:{fetchSession:l,isLoading:e.readonly(s),session:e.readonly(o),isFetchSessionWasNeverCalled:c},user:{fetchUser:async()=>{u.value=!0,await n.me(),u.value=!1},isLoading:e.readonly(u),user:e.readonly(d),isFetchUserWasNeverCalled:p},sdk:n,options:r})}};exports.AccessKeyManagement=j,exports.AuditManagement=B,exports.Descope=w,exports.RoleManagement=x,exports.UserManagement=k,exports.UserProfile=E,exports.default=T,exports.getJwtPermissions=y,exports.getJwtRoles=h,exports.getRefreshToken=b,exports.getSdk=()=>C,exports.getSessionToken=f,exports.isRefreshTokenExpired=(e=b())=>g?.isJwtExpired(e),exports.isSessionTokenExpired=(e=f())=>g?.isJwtExpired(e),exports.routeGuard=()=>e.unref(R)?.(),exports.useDescope=c,exports.useSession=()=>{const{session:t}=d();return t.isFetchSessionWasNeverCalled.value&&t.fetchSession(),{isLoading:e.computed((()=>t.isLoading.value||t.isFetchSessionWasNeverCalled.value)),sessionToken:t.session,isAuthenticated:e.computed((()=>!!t.session.value))}},exports.useUser=()=>{const{user:t,session:r}=d(),n=()=>{!t.user.value&&r.session.value&&t.fetchUser()};return n(),e.watch(r.session,n),{isLoading:e.computed((()=>t.isLoading.value||t.isFetchUserWasNeverCalled.value)),user:t.user}};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("@descope/web-component"),r=require("@descope/web-js-sdk");require("@descope/user-management-widget"),require("@descope/role-management-widget"),require("@descope/access-key-management-widget"),require("@descope/audit-management-widget"),require("@descope/user-profile-widget"),require("@descope/applications-portal-widget");const n=Symbol("$descope"),s={"x-descope-sdk-name":"vue","x-descope-sdk-version":"0.0.0-next-c55974df-20250416"},o="undefined"!=typeof window,a=()=>{const t=e.inject(n);if(!t)throw Error("Missing Descope context, make sure you are using the Descope plugin");return t},i=()=>a().options,u=()=>a().sdk,d=e=>(...t)=>{let r;try{r=e(...t)}catch(e){console.error(e)}return r};let l;const c=e=>{const t=r({persistTokens:o,storeLastAuthenticatedUser:o,...e,autoRefresh:o});return l=t,t};l=c({projectId:"temp pid"});const p=()=>o?l?.getSessionToken():(console.warn("Get session token is not supported in SSR"),""),g=()=>o?l?.getRefreshToken():(console.warn("Get refresh token is not supported in SSR"),""),m=d(((e=p(),t)=>l?.getJwtPermissions(e,t))),b=d(((e=p(),t)=>l?.getJwtRoles(e,t))),f=d(((e=p())=>l?.getCurrentTenant(e)));var y=e.defineComponent({__name:"Descope",props:{flowId:{type:String,required:!0},tenant:{type:String},theme:{type:String},locale:{type:String},debug:{type:Boolean},telemetryKey:{type:String},redirectUrl:{type:String},autoFocus:{type:Boolean||String},validateOnBlur:{type:Boolean},restartOnError:{type:Boolean},errorTransformer:{type:Function},onScreenUpdate:{type:Function},form:{type:Object},client:{type:Object},styleId:{type:String},nonce:{type:String},dismissScreenErrorOnInput:{type:Boolean}},emits:["success","error","ready"],setup(r,{emit:n}){(customElements?.get("descope-wc")||t).sdkConfigOverrides={baseHeaders:s,persistTokens:!1,hooks:{get beforeRequest(){return l.httpClient.hooks.beforeRequest},set beforeRequest(e){}}};const o=r,a=n,{projectId:d,baseUrl:c,baseStaticUrl:p,storeLastAuthenticatedUser:g,baseCdnUrl:m}=i(),b=u(),f=e.computed((()=>o.form?JSON.stringify(o.form):"")),y=e.computed((()=>o.client?JSON.stringify(o.client):"")),v=async e=>{await(b.httpClient.hooks?.afterRequest?.({},new Response(JSON.stringify(e.detail)))),a("success",e)},h=e=>a("error",e),w=e=>a("ready",e);return(t,n)=>{const s=e.resolveComponent("descope-wc");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(s,{"project-id":e.unref(d),"base-url":e.unref(c),"base-static-url":e.unref(p),"base-cdn-url":e.unref(m),"flow-id":r.flowId,"^theme":r.theme,"^locale":r.locale,"^tenant":r.tenant,"^debug":r.debug,"^telemetryKey":r.telemetryKey,"redirect-url":r.redirectUrl,"auto-focus":r.autoFocus,"style-id":r.styleId,"validate-on-blur":r.validateOnBlur,"restart-on-error":r.restartOnError,"store-last-authenticated-user":e.unref(g),".errorTransformer":r.errorTransformer,".onScreenUpdate":r.onScreenUpdate,"^form":f.value,"^client":y.value,"^nonce":r.nonce,"^dismiss-screen-error-on-input":r.dismissScreenErrorOnInput,onSuccess:v,onError:h,onReady:w},{default:e.withCtx((()=>[e.renderSlot(t.$slots,"default")])),_:3},40,["project-id","base-url","base-static-url","base-cdn-url","flow-id","^theme","^locale","^tenant","^debug","^telemetryKey","redirect-url","auto-focus","style-id","validate-on-blur","restart-on-error","store-last-authenticated-user",".errorTransformer",".onScreenUpdate","^form","^client","^nonce","^dismiss-screen-error-on-input"])])}}});y.__file="src/Descope.vue";var v=e.defineComponent({__name:"UserManagement",props:{tenant:{type:String,required:!0},widgetId:{type:String,required:!0},theme:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s,baseCdnUrl:o}=i();return(a,i)=>{const u=e.resolveComponent("descope-user-management-widget");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(u,{"project-id":e.unref(r),"base-url":e.unref(n),"base-static-url":e.unref(s),"base-cdn-url":e.unref(o),"^theme":t.theme,"^tenant":t.tenant,"^debug":t.debug,"widget-id":t.widgetId},null,8,["project-id","base-url","base-static-url","base-cdn-url","^theme","^tenant","^debug","widget-id"])])}}});v.__file="src/UserManagement.vue";var h=e.defineComponent({__name:"RoleManagement",props:{tenant:{type:String,required:!0},widgetId:{type:String,required:!0},theme:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s,baseCdnUrl:o}=i();return(a,i)=>{const u=e.resolveComponent("descope-role-management-widget");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(u,{"project-id":e.unref(r),"base-url":e.unref(n),"base-cdn-url":e.unref(o),"base-static-url":e.unref(s),"^theme":t.theme,"^tenant":t.tenant,"^debug":t.debug,"widget-id":t.widgetId},null,8,["project-id","base-url","base-cdn-url","base-static-url","^theme","^tenant","^debug","widget-id"])])}}});h.__file="src/RoleManagement.vue";var w=e.defineComponent({__name:"AccessKeyManagement",props:{tenant:{type:String,required:!0},widgetId:{type:String,required:!0},theme:{type:String},styleId:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s,baseCdnUrl:o}=i();return(a,i)=>{const u=e.resolveComponent("descope-access-key-management-widget");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(u,{"project-id":e.unref(r),"base-url":e.unref(n),"base-static-url":e.unref(s),"base-cdn-url":e.unref(o),"^theme":t.theme,"^tenant":t.tenant,"^debug":t.debug,"widget-id":t.widgetId,"style-id":t.styleId},null,8,["project-id","base-url","base-static-url","base-cdn-url","^theme","^tenant","^debug","widget-id","style-id"])])}}});w.__file="src/AccessKeyManagement.vue";var S=e.defineComponent({__name:"AuditManagement",props:{tenant:{type:String,required:!0},widgetId:{type:String,required:!0},theme:{type:String},styleId:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s,baseCdnUrl:o}=i();return(a,i)=>{const u=e.resolveComponent("descope-audit-management-widget");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(u,{"project-id":e.unref(r),"base-url":e.unref(n),"base-static-url":e.unref(s),"base-cdn-url":e.unref(o),"^theme":t.theme,"^tenant":t.tenant,"^debug":t.debug,"widget-id":t.widgetId,"style-id":t.styleId},null,8,["project-id","base-url","base-static-url","base-cdn-url","^theme","^tenant","^debug","widget-id","style-id"])])}}});S.__file="src/AuditManagement.vue";var U=e.defineComponent({__name:"UserProfile",props:{widgetId:{type:String,required:!0},theme:{type:String},debug:{type:Boolean}},emits:["logout"],setup(t,{emit:r}){const s=e.inject(n),o=r,a=e=>{s?.resetAuth(),o("logout",e)},{projectId:u,baseUrl:d,baseStaticUrl:l,baseCdnUrl:c}=i();return(r,n)=>{const s=e.resolveComponent("descope-user-profile-widget");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(s,{"project-id":e.unref(u),"base-url":e.unref(d),"base-static-url":e.unref(l),"base-cdn-url":e.unref(c),"^theme":t.theme,"^debug":t.debug,"widget-id":t.widgetId,onLogout:a},null,8,["project-id","base-url","base-static-url","base-cdn-url","^theme","^debug","widget-id"])])}}});U.__file="src/UserProfile.vue";var k=e.defineComponent({__name:"ApplicationsPortal",props:{widgetId:{type:String,required:!0},theme:{type:String},styleId:{type:String},debug:{type:Boolean}},setup(t){const{projectId:r,baseUrl:n,baseStaticUrl:s,baseCdnUrl:o}=i();return(a,i)=>{const u=e.resolveComponent("descope-applications-portal-widget");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(u,{"project-id":e.unref(r),"base-url":e.unref(n),"base-static-url":e.unref(s),"base-cdn-url":e.unref(o),"^theme":t.theme,"^debug":t.debug,"widget-id":t.widgetId,"style-id":t.styleId},null,8,["project-id","base-url","base-static-url","base-cdn-url","^theme","^debug","widget-id","style-id"])])}}});k.__file="src/ApplicationsPortal.vue";const C=e.ref(null);let I;var _={install:function(t,r){const o=c({persistTokens:!0,...r,autoRefresh:!0,baseHeaders:s});I=o;const a=e.ref(null),i=e.ref(""),u=e.ref(!1),d=e.ref(null),l=e.ref(null);o.onSessionTokenChange((e=>{i.value=e})),o.onIsAuthenticatedChange((e=>{u.value=e})),o.onUserChange((e=>{l.value=e}));const p=async()=>{a.value=!0,await o.refresh(),a.value=!1},g=e.computed((()=>null===a.value)),m=e.computed((()=>null===d.value));C.value=()=>new Promise(((t,r)=>{!u.value&&g.value&&p().catch(r),e.watch((()=>a.value),(()=>!a.value&&t(!!e.unref(u))),{immediate:!0})})),t.provide(n,{session:{fetchSession:p,isLoading:e.readonly(a),session:e.readonly(i),isAuthenticated:e.readonly(u),isFetchSessionWasNeverCalled:g},user:{fetchUser:async()=>{d.value=!0,await o.me(),d.value=!1},isLoading:e.readonly(d),user:e.readonly(l),isFetchUserWasNeverCalled:m},sdk:o,options:r,resetAuth:function(){i.value="",u.value=!1,l.value=null}})}};exports.AccessKeyManagement=w,exports.ApplicationsPortal=k,exports.AuditManagement=S,exports.Descope=y,exports.RoleManagement=h,exports.UserManagement=v,exports.UserProfile=U,exports.default=_,exports.getCurrentTenant=f,exports.getJwtPermissions=m,exports.getJwtRoles=b,exports.getRefreshToken=g,exports.getSdk=()=>I,exports.getSessionToken=p,exports.isRefreshTokenExpired=(e=g())=>l?.isJwtExpired(e),exports.isSessionTokenExpired=(e=p())=>l?.isJwtExpired(e),exports.routeGuard=()=>e.unref(C)?.(),exports.useDescope=u,exports.useSession=()=>{const{session:t}=a();return t.isFetchSessionWasNeverCalled.value&&t.fetchSession(),{isLoading:e.computed((()=>t.isLoading.value||t.isFetchSessionWasNeverCalled.value)),sessionToken:t.session,isAuthenticated:t.isAuthenticated}},exports.useUser=()=>{const{user:t,session:r}=a(),n=()=>{!t.user.value&&r.session.value&&t.fetchUser()};return n(),e.watch(r.session,n),{isLoading:e.computed((()=>t.isLoading.value||t.isFetchUserWasNeverCalled.value)),user:t.user}};
2
2
  //# sourceMappingURL=index.cjs.map