@descope/vue-sdk 2.0.1 → 2.0.3

package/README.md

@@ -48,9 +48,9 @@ app.mount('#app');
 	<!-- tenant="tenantId" tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant -->
 	<!-- 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) -->
 	<!-- 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 -->
-	<!-- :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. -->
-	<!-- :form="form" 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. NOTE: form is not required. If not provided, 'form' context key will be empty before user input. -->
-	<!-- :client="client" client is an object the initial client context in the flow execution. NOTE: client is not required. If not provided, context key will be empty. -->
+	<!-- 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. -->
+	<!-- 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. -->
+	<!-- 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. -->
 </template>
 
 <script setup>
@@ -97,7 +97,7 @@ This can be helpful to implement application-specific logic. Examples:
 </template>
 
 <script setup>
-import { useDescope, useSession, useUser } from '../../src';
+import { useDescope, useSession, useUser } from '@descope/vue-sdk';
 
 const { isAuthenticated, isSessionLoading } = useSession();
 const { user, isUserLoading } = useUser();
@@ -254,6 +254,25 @@ VUE_APP_DESCOPE_FLOW_ID=""
 VUE_APP_DESCOPE_BASE_URL=""
 ```
 
+## Q & A
+
+### I updated the user in my backend, but the user / session token are not updated in the frontend
+
+// adjust the answer to vue sdk
+The Descope SDK caches the user and session token in the frontend. If you update the user in your backend (using Descope Management SDK/API for example), you can call `me` / `refresh` from `useDescope` hook to refresh the user and session token. Example:
+
+```js
+const sdk = useDescope();
+
+const handleUpdateUser = () => {
+	myBackendUpdateUser().then(() => {
+		sdk.me();
+		// or
+		sdk.refresh();
+	});
+};
+```
+
 ## Learn More
 
 To learn more please see the [Descope Documentation and API reference page](https://docs.descope.com/).

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),s=require("@descope/web-component"),t=require("@descope/web-js-sdk");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(s),n=r(t);const i=Symbol("$descope"),u={"x-descope-sdk-name":"vue","x-descope-sdk-version":"2.0.1"},a="undefined"!=typeof window,l=()=>{const s=e.inject(i);if(!s)throw Error("Missing Descope context, make sure you are using the Descope plugin");return s},c=()=>l().sdk,d=["project-id","base-url","flow-id","^theme","^locale","^tenant","^debug","^telemetryKey","redirect-url","auto-focus",".errorTransformer","form","client"];var p=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},errorTransformer:{type:Function},form:{type:Object},client:{type:Object}},emits:["success","error"],setup(s,{emit:t}){const r=s;o.default.sdkConfigOverrides={baseHeaders:u};const{projectId:n,baseUrl:i}=l().options,a=c(),p=e.computed((()=>r.form?JSON.stringify(r.form):"")),f=e.computed((()=>r.client?JSON.stringify(r.client):"")),m=async e=>{await(a.httpClient.hooks?.afterRequest?.({},new Response(JSON.stringify(e.detail)))),t("success",e)},v=e=>t("error",e);return(t,r)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("descope-wc",{"project-id":e.unref(n),"base-url":e.unref(i),"flow-id":s.flowId,"^theme":s.theme,"^locale":s.locale,"^tenant":s.tenant,"^debug":s.debug,"^telemetryKey":s.telemetryKey,"redirect-url":s.redirectUrl,"auto-focus":s.autoFocus,".errorTransformer":s.errorTransformer,form:e.unref(p),client:e.unref(f),onSuccess:m,onError:v},null,40,d)]))}});p.__file="src/Descope.vue";const f=e=>(...s)=>{let t;try{t=e(...s)}catch(e){console.error(e)}return t};let m;const v=e=>{const s=n.default({...e,persistTokens:a,autoRefresh:a});return m=s,s};m=v({projectId:"temp pid"});const y=()=>a?m?.getSessionToken():(console.warn("Get session token is not supported in SSR"),""),g=f(((e=y(),s)=>m?.getJwtPermissions(e,s))),h=f(((e=y(),s)=>m?.getJwtRoles(e,s))),S=e.ref(null);let w;var k={install:function(s,t){const r=v({...t,persistTokens:!0,autoRefresh:!0,baseHeaders:u});w=r;const o=e.ref(null),n=e.ref(""),a=e.ref(null),l=e.ref(null);r.onSessionTokenChange((e=>{n.value=e})),r.onUserChange((e=>{l.value=e}));const c=async()=>{o.value=!0,await r.refresh(),o.value=!1},d=e.computed((()=>null===o.value)),p=e.computed((()=>null===a.value));S.value=()=>new Promise(((s,t)=>{!n.value&&d.value&&c().catch(t),e.watch((()=>o.value),(()=>!o.value&&s(!!e.unref(n))),{immediate:!0})})),s.provide(i,{session:{fetchSession:c,isLoading:e.readonly(o),session:e.readonly(n),isFetchSessionWasNeverCalled:d},user:{fetchUser:async()=>{a.value=!0,await r.me(),a.value=!1},isLoading:e.readonly(a),user:e.readonly(l),isFetchUserWasNeverCalled:p},sdk:r,options:t})}};exports.Descope=p,exports.default=k,exports.getJwtPermissions=g,exports.getJwtRoles=h,exports.getRefreshToken=()=>a?m?.getRefreshToken():(console.warn("Get refresh token is not supported in SSR"),""),exports.getSdk=()=>w,exports.getSessionToken=y,exports.routeGuard=()=>e.unref(S)?.(),exports.useDescope=c,exports.useSession=()=>{const{session:s}=l();return s.isFetchSessionWasNeverCalled.value&&s.fetchSession(),{isLoading:e.computed((()=>s.isLoading.value||s.isFetchSessionWasNeverCalled.value)),sessionToken:s.session,isAuthenticated:e.computed((()=>!!s.session.value))}},exports.useUser=()=>{const{user:s,session:t}=l(),r=()=>{!s.user.value&&t.session.value&&s.fetchUser()};return r(),e.watch(t.session,r),{isLoading:e.computed((()=>s.isLoading.value||s.isFetchUserWasNeverCalled.value)),user:s.user}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),s=require("@descope/web-component"),t=require("@descope/web-js-sdk");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(s),n=r(t);const i=Symbol("$descope"),u={"x-descope-sdk-name":"vue","x-descope-sdk-version":"2.0.3"},a="undefined"!=typeof window,l=()=>{const s=e.inject(i);if(!s)throw Error("Missing Descope context, make sure you are using the Descope plugin");return s},c=()=>l().sdk,d=["project-id","base-url","flow-id","^theme","^locale","^tenant","^debug","^telemetryKey","redirect-url","auto-focus",".errorTransformer","^form","^client"];var p=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},errorTransformer:{type:Function},form:{type:Object},client:{type:Object}},emits:["success","error"],setup(s,{emit:t}){const r=s;o.default.sdkConfigOverrides={baseHeaders:u};const{projectId:n,baseUrl:i}=l().options,a=c(),p=e.computed((()=>r.form?JSON.stringify(r.form):"")),f=e.computed((()=>r.client?JSON.stringify(r.client):"")),m=async e=>{await(a.httpClient.hooks?.afterRequest?.({},new Response(JSON.stringify(e.detail)))),t("success",e)},v=e=>t("error",e);return(t,r)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("descope-wc",{"project-id":e.unref(n),"base-url":e.unref(i),"flow-id":s.flowId,"^theme":s.theme,"^locale":s.locale,"^tenant":s.tenant,"^debug":s.debug,"^telemetryKey":s.telemetryKey,"redirect-url":s.redirectUrl,"auto-focus":s.autoFocus,".errorTransformer":s.errorTransformer,"^form":e.unref(p),"^client":e.unref(f),onSuccess:m,onError:v},null,40,d)]))}});p.__file="src/Descope.vue";const f=e=>(...s)=>{let t;try{t=e(...s)}catch(e){console.error(e)}return t};let m;const v=e=>{const s=n.default({...e,persistTokens:a,autoRefresh:a});return m=s,s};m=v({projectId:"temp pid"});const y=()=>a?m?.getSessionToken():(console.warn("Get session token is not supported in SSR"),""),g=f(((e=y(),s)=>m?.getJwtPermissions(e,s))),h=f(((e=y(),s)=>m?.getJwtRoles(e,s))),S=e.ref(null);let w;var k={install:function(s,t){const r=v({...t,persistTokens:!0,autoRefresh:!0,baseHeaders:u});w=r;const o=e.ref(null),n=e.ref(""),a=e.ref(null),l=e.ref(null);r.onSessionTokenChange((e=>{n.value=e})),r.onUserChange((e=>{l.value=e}));const c=async()=>{o.value=!0,await r.refresh(),o.value=!1},d=e.computed((()=>null===o.value)),p=e.computed((()=>null===a.value));S.value=()=>new Promise(((s,t)=>{!n.value&&d.value&&c().catch(t),e.watch((()=>o.value),(()=>!o.value&&s(!!e.unref(n))),{immediate:!0})})),s.provide(i,{session:{fetchSession:c,isLoading:e.readonly(o),session:e.readonly(n),isFetchSessionWasNeverCalled:d},user:{fetchUser:async()=>{a.value=!0,await r.me(),a.value=!1},isLoading:e.readonly(a),user:e.readonly(l),isFetchUserWasNeverCalled:p},sdk:r,options:t})}};exports.Descope=p,exports.default=k,exports.getJwtPermissions=g,exports.getJwtRoles=h,exports.getRefreshToken=()=>a?m?.getRefreshToken():(console.warn("Get refresh token is not supported in SSR"),""),exports.getSdk=()=>w,exports.getSessionToken=y,exports.routeGuard=()=>e.unref(S)?.(),exports.useDescope=c,exports.useSession=()=>{const{session:s}=l();return s.isFetchSessionWasNeverCalled.value&&s.fetchSession(),{isLoading:e.computed((()=>s.isLoading.value||s.isFetchSessionWasNeverCalled.value)),sessionToken:s.session,isAuthenticated:e.computed((()=>!!s.session.value))}},exports.useUser=()=>{const{user:s,session:t}=l(),r=()=>{!s.user.value&&t.session.value&&s.fetchUser()};return r(),e.watch(t.session,r),{isLoading:e.computed((()=>s.isLoading.value||s.isFetchUserWasNeverCalled.value)),user:s.user}};
 //# sourceMappingURL=index.cjs.map

package/dist/index.mjs

@@ -1,2 +1,2 @@
-import{computed as e,watch as s,inject as o,defineComponent as t,openBlock as r,createElementBlock as n,createElementVNode as i,unref as a,ref as l,readonly as c}from"vue";import u from"@descope/web-component";import d from"@descope/web-js-sdk";const p=Symbol("$descope"),f={"x-descope-sdk-name":"vue","x-descope-sdk-version":"2.0.1"},m="undefined"!=typeof window,v=()=>{const e=o(p);if(!e)throw Error("Missing Descope context, make sure you are using the Descope plugin");return e},g=()=>v().sdk,y=()=>{const{session:s}=v();return s.isFetchSessionWasNeverCalled.value&&s.fetchSession(),{isLoading:e((()=>s.isLoading.value||s.isFetchSessionWasNeverCalled.value)),sessionToken:s.session,isAuthenticated:e((()=>!!s.session.value))}},h=()=>{const{user:o,session:t}=v(),r=()=>{!o.user.value&&t.session.value&&o.fetchUser()};return r(),s(t.session,r),{isLoading:e((()=>o.isLoading.value||o.isFetchUserWasNeverCalled.value)),user:o.user}},S=["project-id","base-url","flow-id","^theme","^locale","^tenant","^debug","^telemetryKey","redirect-url","auto-focus",".errorTransformer","form","client"];var w=t({__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},errorTransformer:{type:Function},form:{type:Object},client:{type:Object}},emits:["success","error"],setup(s,{emit:o}){const t=s;u.sdkConfigOverrides={baseHeaders:f};const{projectId:l,baseUrl:c}=v().options,d=g(),p=e((()=>t.form?JSON.stringify(t.form):"")),m=e((()=>t.client?JSON.stringify(t.client):"")),y=async e=>{await(d.httpClient.hooks?.afterRequest?.({},new Response(JSON.stringify(e.detail)))),o("success",e)},h=e=>o("error",e);return(e,o)=>(r(),n("div",null,[i("descope-wc",{"project-id":a(l),"base-url":a(c),"flow-id":s.flowId,"^theme":s.theme,"^locale":s.locale,"^tenant":s.tenant,"^debug":s.debug,"^telemetryKey":s.telemetryKey,"redirect-url":s.redirectUrl,"auto-focus":s.autoFocus,".errorTransformer":s.errorTransformer,form:a(p),client:a(m),onSuccess:y,onError:h},null,40,S)]))}});w.__file="src/Descope.vue";const k=e=>(...s)=>{let o;try{o=e(...s)}catch(e){console.error(e)}return o};let b;const T=e=>{const s=d({...e,persistTokens:m,autoRefresh:m});return b=s,s};b=T({projectId:"temp pid"});const C=()=>m?b?.getSessionToken():(console.warn("Get session token is not supported in SSR"),""),F=()=>m?b?.getRefreshToken():(console.warn("Get refresh token is not supported in SSR"),""),N=k(((e=C(),s)=>b?.getJwtPermissions(e,s))),R=k(((e=C(),s)=>b?.getJwtRoles(e,s))),U=l(null),j=()=>a(U)?.();let L;const O=()=>L;var D={install:function(o,t){const r=T({...t,persistTokens:!0,autoRefresh:!0,baseHeaders:f});L=r;const n=l(null),i=l(""),u=l(null),d=l(null);r.onSessionTokenChange((e=>{i.value=e})),r.onUserChange((e=>{d.value=e}));const m=async()=>{n.value=!0,await r.refresh(),n.value=!1},v=e((()=>null===n.value)),g=e((()=>null===u.value));U.value=()=>new Promise(((e,o)=>{!i.value&&v.value&&m().catch(o),s((()=>n.value),(()=>!n.value&&e(!!a(i))),{immediate:!0})})),o.provide(p,{session:{fetchSession:m,isLoading:c(n),session:c(i),isFetchSessionWasNeverCalled:v},user:{fetchUser:async()=>{u.value=!0,await r.me(),u.value=!1},isLoading:c(u),user:c(d),isFetchUserWasNeverCalled:g},sdk:r,options:t})}};export{w as Descope,D as default,N as getJwtPermissions,R as getJwtRoles,F as getRefreshToken,O as getSdk,C as getSessionToken,j as routeGuard,g as useDescope,y as useSession,h as useUser};
+import{computed as e,watch as s,inject as o,defineComponent as t,openBlock as r,createElementBlock as n,createElementVNode as i,unref as a,ref as l,readonly as c}from"vue";import u from"@descope/web-component";import d from"@descope/web-js-sdk";const p=Symbol("$descope"),f={"x-descope-sdk-name":"vue","x-descope-sdk-version":"2.0.3"},m="undefined"!=typeof window,v=()=>{const e=o(p);if(!e)throw Error("Missing Descope context, make sure you are using the Descope plugin");return e},g=()=>v().sdk,y=()=>{const{session:s}=v();return s.isFetchSessionWasNeverCalled.value&&s.fetchSession(),{isLoading:e((()=>s.isLoading.value||s.isFetchSessionWasNeverCalled.value)),sessionToken:s.session,isAuthenticated:e((()=>!!s.session.value))}},h=()=>{const{user:o,session:t}=v(),r=()=>{!o.user.value&&t.session.value&&o.fetchUser()};return r(),s(t.session,r),{isLoading:e((()=>o.isLoading.value||o.isFetchUserWasNeverCalled.value)),user:o.user}},S=["project-id","base-url","flow-id","^theme","^locale","^tenant","^debug","^telemetryKey","redirect-url","auto-focus",".errorTransformer","^form","^client"];var w=t({__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},errorTransformer:{type:Function},form:{type:Object},client:{type:Object}},emits:["success","error"],setup(s,{emit:o}){const t=s;u.sdkConfigOverrides={baseHeaders:f};const{projectId:l,baseUrl:c}=v().options,d=g(),p=e((()=>t.form?JSON.stringify(t.form):"")),m=e((()=>t.client?JSON.stringify(t.client):"")),y=async e=>{await(d.httpClient.hooks?.afterRequest?.({},new Response(JSON.stringify(e.detail)))),o("success",e)},h=e=>o("error",e);return(e,o)=>(r(),n("div",null,[i("descope-wc",{"project-id":a(l),"base-url":a(c),"flow-id":s.flowId,"^theme":s.theme,"^locale":s.locale,"^tenant":s.tenant,"^debug":s.debug,"^telemetryKey":s.telemetryKey,"redirect-url":s.redirectUrl,"auto-focus":s.autoFocus,".errorTransformer":s.errorTransformer,"^form":a(p),"^client":a(m),onSuccess:y,onError:h},null,40,S)]))}});w.__file="src/Descope.vue";const k=e=>(...s)=>{let o;try{o=e(...s)}catch(e){console.error(e)}return o};let b;const T=e=>{const s=d({...e,persistTokens:m,autoRefresh:m});return b=s,s};b=T({projectId:"temp pid"});const C=()=>m?b?.getSessionToken():(console.warn("Get session token is not supported in SSR"),""),F=()=>m?b?.getRefreshToken():(console.warn("Get refresh token is not supported in SSR"),""),N=k(((e=C(),s)=>b?.getJwtPermissions(e,s))),R=k(((e=C(),s)=>b?.getJwtRoles(e,s))),U=l(null),j=()=>a(U)?.();let L;const O=()=>L;var D={install:function(o,t){const r=T({...t,persistTokens:!0,autoRefresh:!0,baseHeaders:f});L=r;const n=l(null),i=l(""),u=l(null),d=l(null);r.onSessionTokenChange((e=>{i.value=e})),r.onUserChange((e=>{d.value=e}));const m=async()=>{n.value=!0,await r.refresh(),n.value=!1},v=e((()=>null===n.value)),g=e((()=>null===u.value));U.value=()=>new Promise(((e,o)=>{!i.value&&v.value&&m().catch(o),s((()=>n.value),(()=>!n.value&&e(!!a(i))),{immediate:!0})})),o.provide(p,{session:{fetchSession:m,isLoading:c(n),session:c(i),isFetchSessionWasNeverCalled:v},user:{fetchUser:async()=>{u.value=!0,await r.me(),u.value=!1},isLoading:c(u),user:c(d),isFetchUserWasNeverCalled:g},sdk:r,options:t})}};export{w as Descope,D as default,N as getJwtPermissions,R as getJwtRoles,F as getRefreshToken,O as getSdk,C as getSessionToken,j as routeGuard,g as useDescope,y as useSession,h as useUser};
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@descope/vue-sdk",
-	"version": "2.0.1",
+	"version": "2.0.3",
 	"main": "dist/index.cjs",
 	"module": "dist/index.mjs",
 	"type": "module",
@@ -37,7 +37,7 @@
 		]
 	},
 	"dependencies": {
-		"@descope/web-component": "3.4.0"
+		"@descope/web-component": "3.7.0"
 	},
 	"peerDependencies": {
 		"vue": ">=3"