@descope/vue-sdk 0.0.0-next-fe60cdb6-20230614

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Descope <help@descope.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+# Descope SDK for Vue
+
+The Descope SDK for Vue provides convenient access to the Descope for an application written on top of Vue. You can read more on the [Descope Website](https://descope.com).
+
+## Requirements
+
+- The SDK supports Vue version 3 and above.
+- A Descope `Project ID` is required for using the SDK. Find it on the [project page in the Descope Console](https://app.descope.com/settings/project).
+
+## Installing the SDK
+
+Install the package with:
+
+```bash
+npm i --save @descope/vue-sdk
+```
+
+## Usage
+
+### Render it in your application
+
+#### Add Descope plugin to your application
+
+```js
+import { createApp } from 'vue';
+import App from './App.vue';
+import descope from '@descope/vue-sdk';
+
+const app = createApp(App);
+app.use(descope, {
+	projectId: 'my-project-id'
+	// If the Descope project manages the token response in cookies, a custom domain
+	// must be configured (e.g., https://auth.app.example.com)
+	// and should be set as the baseUrl property.
+	// baseUrl: https://auth.app.example.com'
+});
+app.mount('#app');
+```
+
+#### Use Descope to render specific flow
+
+```js
+<template>
+	<Descope
+		flowId="sign-up-or-in"
+		@error="handleError"
+		@success="handleSuccess"
+	/>
+</template>
+
+<script setup>
+import { Descope } from '@descope/vue-sdk';
+
+const handleError = (e) => {
+	console.log('Got error', e);
+};
+
+const handleSuccess = (e) => {
+	console.log('Logged in', e);
+};
+</script>
+```
+
+#### Use the `useDescope`, `useSession` and `useUser` functions in your components in order to get authentication state, user details and utilities
+
+This can be helpful to implement application-specific logic. Examples:
+
+- Render different components if current session is authenticated
+- Render user's content
+- Logout button
+
+```js
+<template>
+	<div>
+		<div v-if="isSessionLoading || isUserLoading">Loading ...</div>
+		<div v-else-if="isAuthenticated">
+			<div>Hello {{ user?.name }}</div>
+			<button @click="logout">Logout</button>
+		</div>
+		<div v-else>You are not logged in</div>
+	</div>
+</template>
+
+<script setup>
+import { useDescope, useSession, useUser } from '../../src';
+
+const { isAuthenticated, isSessionLoading } = useSession();
+const { user, isUserLoading } = useUser();
+const { logout } = useDescope();
+</script>
+```
+
+Note: `useSession` triggers a single request to the Descope backend to attempt to refresh the session. If you **don't** `useSession` on your app, the session will not be refreshed automatically. If your app does not require `useSession`, you can trigger the refresh manually by calling `refresh` from `useDescope` hook.
+
+**For more SDK usage examples refer to [docs](https://docs.descope.com/build/guides/client_sdks/)**
+
+#### Refresh token lifecycle
+
+Descope SDK is automatically refreshes the session token when it is about to expire. This is done in the background using the refresh token, without any additional configuration.
+
+If the Descope project settings are configured to manage tokens in cookies.
+you must also configure a custom domain, and set it as the `baseUrl` to the `descope` plugin. See the above [`plugin` usage](#add-descope-plugin-to-your-application) for usage example.
+
+## Code Example
+
+You can find an example Vue app in the [examples folder](./example).
+
+### Setup
+
+To run the examples, set your `Project ID` by setting the `DESCOPE_PROJECT_ID` env var or directly
+in the sample code.
+Find your Project ID in the [Descope console](https://app.descope.com/settings/project).
+
+```bash
+export VUE_APP_DESCOPE_PROJECT_ID=<Project-ID>
+```
+
+Alternatively, put the environment variable in `.env.local` file in the project root directory.
+See bellow for an `.env.local` file template with more information.
+
+### Run Example
+
+Run the following command in the root of the project to build and run the example:
+
+```bash
+npm i && npm start
+```
+
+### Example Optional Env Variables
+
+See the following table for customization environment variables for the example app:
+
+| Env Variable | Description | Default value |
+| ------------ | ----------- | ------------- |
+
+| VUE_APP_DESCOPE_FLOW_ID | Which flow ID to use in the login page | **sign-up-or-in** |
+| VUE_APP_DESCOPE_BASE_URL | Custom Descope base URL | None |
+
+Example for `.env.local` file template:
+
+```
+# Your project ID
+VUE_APP_DESCOPE_PROJECT_ID="<Project-ID>"
+# Login flow ID
+VUE_APP_DESCOPE_FLOW_ID=""
+# Descope base URL
+VUE_APP_DESCOPE_BASE_URL=""
+```
+
+## Learn More
+
+To learn more please see the [Descope Documentation and API reference page](https://docs.descope.com/).
+
+## Contact Us
+
+If you need help you can email [Descope Support](mailto:support@descope.com)
+
+## License
+
+The Descope SDK for React is licensed for use under the terms and conditions of the [MIT license Agreement](./LICENSE).

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@descope/web-component"),s=require("vue"),o=require("@descope/web-js-sdk");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(e),n=r(o);const u=Symbol("$descope"),a={"x-descope-sdk-name":"vue","x-descope-sdk-version":"0.0.0-next-fe60cdb6-20230614"},i=()=>{const e=s.inject(u);if(!e)throw Error("Missing Descope context, make sure you are using the Descope plugin");return e},l=()=>i().sdk;t.default.sdkConfigOverrides={baseHeaders:a};var c={name:"Descope",props:{flowId:{type:String,required:!0},tenant:{type:String},theme:{type:String},debug:{type:Boolean},telemetryKey:{type:String},redirectUrl:{type:String},autoFocus:{type:Boolean}},emits:["success","error"],setup(e,{emit:s}){const{projectId:o,baseUrl:r,sessionTokenViaCookie:t}=i().options,n=l();return{projectId:o,baseUrl:r,sessionTokenViaCookie:t,onSuccess:async e=>{s("success",e),await(n.httpClient.hooks?.afterRequest?.({},new Response(JSON.stringify(e.detail))))},onError:e=>s("error",e)}}};const d=["project-id","base-url","flow-id","^theme","^tenant","^debug","^telemetryKey","redirect-url","auto-focus"];c.render=function(e,o,r,t,n,u){return s.openBlock(),s.createElementBlock("div",null,[s.createElementVNode("descope-wc",{"project-id":t.projectId,"base-url":t.baseUrl,"flow-id":r.flowId,"^theme":r.theme,"^tenant":r.tenant,"^debug":r.debug,"^telemetryKey":r.telemetryKey,"redirect-url":r.redirectUrl,"auto-focus":r.autoFocus,onSuccess:o[0]||(o[0]=(...e)=>t.onSuccess&&t.onSuccess(...e)),onError:o[1]||(o[1]=(...e)=>t.onError&&t.onError(...e))},null,40,d)])},c.__file="src/Descope.vue";const p=s.ref(null);var v={install:function(e,o){const r=n.default({persistTokens:!0,autoRefresh:!0,baseHeaders:a,...o}),t=s.ref(null),i=s.ref(""),l=s.ref(null),c=s.ref(null);r.onSessionTokenChange((e=>{i.value=e})),r.onUserChange((e=>{c.value=e}));const d=async()=>{t.value=!0,await r.refresh(),t.value=!1},v=s.computed((()=>null===t.value)),f=s.computed((()=>null===l.value));p.value=async()=>(!i.value&&v.value&&await d(),!!s.unref(i)),e.provide(u,{session:{fetchSession:d,isLoading:s.readonly(t),session:s.readonly(i),isFetchSessionWasNeverCalled:v},user:{fetchUser:async()=>{l.value=!0,await r.me(),l.value=!1},isLoading:s.readonly(l),user:s.readonly(c),isFetchUserWasNeverCalled:f},sdk:r,options:o})}};exports.Descope=c,exports.default=v,exports.routeGuard=()=>s.unref(p)?.(),exports.useDescope=l,exports.useSession=()=>{const{session:e}=i();return e.isFetchSessionWasNeverCalled.value&&e.fetchSession(),{isLoading:s.computed((()=>e.isLoading.value||e.isFetchSessionWasNeverCalled.value)),sessionToken:e.session,isAuthenticated:s.computed((()=>!!e.session.value))}},exports.useUser=()=>{const{user:e,session:o}=i(),r=()=>{!e.user.value&&o.session.value&&e.fetchUser()};return r(),s.watch(o.session,r),{isLoading:s.computed((()=>e.isLoading.value||e.isFetchUserWasNeverCalled.value)),user:e.user}};
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/Descope.vue?vue&type=template&id=8a031dec&lang.js"],"sourcesContent":["<template>\n\t<div>\n\t\t<descope-wc\n\t\t\t:project-id=\"projectId\"\n\t\t\t:base-url=\"baseUrl\"\n\t\t\t:flow-id=\"flowId\"\n\t\t\t:theme.attr=\"theme\"\n\t\t\t:tenant.attr=\"tenant\"\n\t\t\t:debug.attr=\"debug\"\n\t\t\t:telemetryKey.attr=\"telemetryKey\"\n\t\t\t:redirect-url=\"redirectUrl\"\n\t\t\t:auto-focus=\"autoFocus\"\n\t\t\t@success=\"onSuccess\"\n\t\t\t@error=\"onError\"\n\t\t/>\n\t</div>\n</template>\n\n<script lang=\"ts\">\nimport DescopeWc from '@descope/web-component';\nimport { useOptions, useDescope } from './hooks';\nimport { baseHeaders } from './constants';\nimport { RequestConfig } from '@descope/core-js-sdk';\nimport { SetupContext } from 'vue';\n\nDescopeWc.sdkConfigOverrides = { baseHeaders };\n\nexport default {\n\t// eslint-disable-next-line vue/multi-word-component-names\n\tname: 'Descope',\n\tprops: {\n\t\tflowId: {\n\t\t\ttype: String,\n\t\t\trequired: true\n\t\t},\n\t\ttenant: {\n\t\t\ttype: String\n\t\t},\n\t\ttheme: {\n\t\t\ttype: String\n\t\t},\n\t\tdebug: {\n\t\t\ttype: Boolean\n\t\t},\n\t\ttelemetryKey: {\n\t\t\ttype: String\n\t\t},\n\t\tredirectUrl: {\n\t\t\ttype: String\n\t\t},\n\t\tautoFocus: {\n\t\t\ttype: Boolean\n\t\t}\n\t},\n\temits: ['success', 'error'],\n\tsetup(_: unknown, { emit }: SetupContext) {\n\t\tconst { projectId, baseUrl, sessionTokenViaCookie } = useOptions();\n\t\tconst sdk = useDescope();\n\n\t\tconst onSuccess = async (e: CustomEvent) => {\n\t\t\t// Note: We need to emit AFTER the afterRequest hook has been called, but for\n\t\t\t// an unknown reason, the emit is not called if we await the hook.\n\t\t\temit('success', e);\n\t\t\tawait sdk.httpClient.hooks?.afterRequest?.(\n\t\t\t\t{} as RequestConfig,\n\t\t\t\tnew Response(JSON.stringify(e.detail))\n\t\t\t);\n\t\t};\n\t\tconst onError = (e: Event) => emit('error', e);\n\n\t\treturn {\n\t\t\tprojectId,\n\t\t\tbaseUrl,\n\t\t\tsessionTokenViaCookie,\n\t\t\tonSuccess,\n\t\t\tonError\n\t\t};\n\t}\n};\n</script>\n"],"names":["_createElementBlock","_createElementVNode","$setup","projectId","baseUrl","$props","flowId","theme","tenant","debug","telemetryKey","redirectUrl","autoFocus","onSuccess","args","onError"],"mappings":"itCACCA,qBAcK,MAAA,KAAA,CAbJC,EAAAA,mBAYC,aAAA,CAXC,aAAYC,EAASC,UACrB,WAAUD,EAAOE,QACjB,UAASC,EAAMC,OACf,SAAYD,EAAKE,MACjB,UAAaF,EAAMG,OACnB,SAAYH,EAAKI,MACjB,gBAAmBJ,EAAYK,aAC/B,eAAcL,EAAWM,YACzB,aAAYN,EAASO,UACrBC,8BAASX,EAASW,WAAAX,EAAAW,aAAAC,IAClBC,4BAAOb,EAAOa,SAAAb,EAAAa,WAAAD"}