{"id":18896478,"url":"https://github.com/descope/vue-sdk","last_synced_at":"2025-04-15T02:36:26.577Z","repository":{"id":177356614,"uuid":"609891053","full_name":"descope/vue-sdk","owner":"descope","description":"Vue.js library used to integrate with Descope (Deprecated)","archived":true,"fork":false,"pushed_at":"2024-07-23T10:10:59.000Z","size":4549,"stargazers_count":21,"open_issues_count":20,"forks_count":1,"subscribers_count":12,"default_branch":"main","last_synced_at":"2025-04-11T21:20:02.218Z","etag":null,"topics":["authentication","deprecated-repo","descope","sdk","sdk-vuejs","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://github.com/descope/descope-js/tree/main/packages/sdks/vue-sdk","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/descope.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-05T14:52:15.000Z","updated_at":"2024-12-29T09:15:23.000Z","dependencies_parsed_at":"2023-11-12T15:52:27.596Z","dependency_job_id":"1046c577-f2e7-4f83-b741-23e79d1690a1","html_url":"https://github.com/descope/vue-sdk","commit_stats":null,"previous_names":["descope/vue-sdk"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope%2Fvue-sdk","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope%2Fvue-sdk/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope%2Fvue-sdk/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/descope%2Fvue-sdk/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/descope","download_url":"https://codeload.github.com/descope/vue-sdk/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248995092,"owners_count":21195495,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","deprecated-repo","descope","sdk","sdk-vuejs","vue","vuejs"],"created_at":"2024-11-08T08:34:06.749Z","updated_at":"2025-04-15T02:36:26.125Z","avatar_url":"https://github.com/descope.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# IMPORTANT NOTE: This repository is _DEPRECATED_.\n\nDescope Vue SDK has been moved to the [descope-js](https://github.com/descope/descope-js/tree/main/packages/sdks/vue-sdk) repoistory.\n\n---\n\n\n# Descope Vue SDK\n\nThe Descope Vue SDK provides convenient access to the Descope for an application written on top of Vue.  \nYou can read more on the [Descope Website](https://descope.com).\n\n## Requirements\n\n- The SDK supports Vue version 3 and above.\n- 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).\n\n## Installing the SDK\n\nInstall the package with:\n\n```bash\nnpm i --save @descope/vue-sdk\n```\n\n## Usage\n\n### Add Descope plugin to your application\n\n```js\nimport { createApp } from 'vue';\nimport App from './App.vue';\nimport descope from '@descope/vue-sdk';\n\nconst app = createApp(App);\napp.use(descope, {\n\tprojectId: 'my-project-id'\n\t// If the Descope project manages the token response in cookies, a custom domain\n\t// must be configured (e.g., https://auth.app.example.com)\n\t// and should be set as the baseUrl property.\n\t// baseUrl: https://auth.app.example.com'\n});\napp.mount('#app');\n```\n\n### Use Descope to render specific flow\n\n```vue\n\u003ctemplate\u003e\n\t\u003cp v-if=\"isFlowLoading\"\u003eLoading...\u003c/p\u003e\n\t\u003cDescope\n\t\tflowId=\"my-flow-id\"\n\t\t@success=\"handleSuccess\"\n\t\t@error=\"handleError\"\n\t\t@ready=\"handleReady\"\n\t/\u003e\n\t\u003c!-- additional props --\u003e\n\t\u003c!-- theme=\"dark\" theme can be \"light\", \"dark\" or \"os\", which auto select a theme based on the OS theme. Default is \"light\" --\u003e\n\t\u003c!-- v-bind:debug=\"true\" debug can be set to true to enable debug mode --\u003e\n\t\u003c!-- 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. --\u003e\n\t\u003c!-- tenant=\"tenantId\" tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant --\u003e\n\t\u003c!-- 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) --\u003e\n\t\u003c!-- 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 --\u003e\n\t\u003c!-- validateOnBlur can be true in order to show input validation errors on blur, in addition to on submit. Default is false.  --\u003e\n\t\u003c!-- 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. --\u003e\n\t\u003c!-- 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. --\u003e\n\t\u003c!-- 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. --\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { Descope } from '@descope/vue-sdk';\nimport { ref } from 'vue';\n\nconst isFlowLoading = ref(true);\n\nconst handleSuccess = (e) =\u003e {\n\tconsole.log('Logged in!', e);\n};\n\nconst handleError = (e) =\u003e {\n\tconsole.log('Could not log in', e);\n};\n\nconst handleReady = () =\u003e {\n\tisFlowLoading.value = false;\n};\n\n// let tenantId = '\u003ctenantId\u003e'; // replace with your tenant ID\n// let redirectUrl = '\u003credirectUrl\u003e'; // replace with your redirect URL\n\n// const errorTransformer = (error) =\u003e {\n//   const translationMap = {\n//     SAMLStartFailed: 'Failed to start SAML flow'\n//   };\n//   return translationMap[error.type] || error.text;\n// };\n\u003c/script\u003e\n```\n\n### Use the `useDescope`, `useSession` and `useUser` functions in your components in order to get authentication state, user details and utilities\n\nThis can be helpful to implement application-specific logic. Examples:\n\n- Render different components if current session is authenticated\n- Render user's content\n- Logout button\n\n```js\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cdiv v-if=\"isSessionLoading || isUserLoading\"\u003eLoading ...\u003c/div\u003e\n\t\t\u003cdiv v-else-if=\"isAuthenticated\"\u003e\n\t\t\t\u003cdiv\u003eHello {{ user?.name }}\u003c/div\u003e\n\t\t\t\u003cbutton @click=\"logout\"\u003eLogout\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t\t\u003cdiv v-else\u003eYou are not logged in\u003c/div\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { useDescope, useSession, useUser } from '@descope/vue-sdk';\n\nconst { isAuthenticated, isSessionLoading } = useSession();\nconst { user, isUserLoading } = useUser();\nconst { logout } = useDescope();\n\u003c/script\u003e\n```\n\nNote: `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.\n\n**For more SDK usage examples refer to [docs](https://docs.descope.com/build/guides/client_sdks/)**\n\n### Session token server validation (pass session token to server API)\n\nWhen developing a full-stack application, it is common to have private server API which requires a valid session token:\n\n![session-token-validation-diagram](https://docs.descope.com/static/SessionValidation-cf7b2d5d26594f96421d894273a713d8.png)\n\nNote: Descope also provides server-side SDKs in various languages (NodeJS, Go, Python, etc). Descope's server SDKs have out-of-the-box session validation API that supports the options described bellow. To read more about session validation, Read [this section](https://docs.descope.com/build/guides/gettingstarted/#session-validation) in Descope documentation.\n\nThere are 2 ways to achieve that:\n\n1. Using `getSessionToken` to get the token, and pass it on the `Authorization` Header (Recommended)\n2. Passing `sessionTokenViaCookie` boolean option when initializing the plugin (Use cautiously, session token may grow, especially in cases of using authorization, or adding custom claim)\n\n#### 1. Using `getSessionToken` to get the token\n\nAn example for api function, and passing the token on the `Authorization` header:\n\n```js\nimport { getSessionToken } from '@descope/vue-sdk';\n\n// fetch data using back\n// Note: Descope backend SDKs support extracting session token from the Authorization header\nexport const fetchData = async () =\u003e {\n\tconst sessionToken = getSessionToken();\n\tconst res = await fetch('/path/to/server/api', {\n\t\theaders: {\n\t\t\tAuthorization: `Bearer ${sessionToken}`\n\t\t}\n\t});\n\t// ... use res\n};\n```\n\n#### 2. Passing `sessionTokenViaCookie` option when initializing the plugin\n\nWhen doing so, Descope SDK will automatically store session token on the `DS` cookie.\n\nNote: Use this option if session token will stay small (less than 1k). Session token can grow, especially in cases of using authorization, or adding custom claims\n\nExample:\n\n```js\nimport { createApp } from 'vue';\nimport App from './components/App.vue';\nimport descope from '@descope/vue-sdk';\n\nconst app = createApp(App);\n\napp.use(descope, {\n\tprojectId: 'project-id',\n\tsessionTokenViaCookie: true\n});\n```\n\nNow, whenever you call `fetch`, the cookie will automatically be sent with the request.  \nDescope backend SDKs also support extracting the token from the `DS` cookie.\n\n### Get the Descope SDK instance\n\nIn case you need the SDK instance outside the Vue application, you can use the `getSdk` function\n\n**Make sure to call it only after initializing the descope plugin, this is where the SDK instance is actually created, otherwise you will no instance.**\n\nFor example:\n\n```js\nimport { createApp } from 'vue';\nimport App from './components/App.vue';\nimport descope, { getSdk } from '../src';\n\nconst app = createApp(App);\n\napp.use(descope, {\n\tprojectId: 'project-id'\n});\n\nconst sdk = getSdk();\n\nsdk?.onSessionTokenChange((newSession) =\u003e {\n\t// here you can implement custom logic when the session is changing\n});\n```\n\n### Helper Functions\n\nYou can also use the following functions to assist with various actions managing your JWT.\n\n`getSessionToken()` - Get current session token.\n`getRefreshToken()` - Get current refresh token.\n`refresh(token = getRefreshToken())` - Force a refresh on current session token using an existing valid refresh token.\n`isSessionTokenExpired(token = getSessionToken())` - Check whether the current session token is expired. Provide a session token if is not persisted.\n`isRefreshTokenExpired(token = getRefreshToken())` - Check whether the current refresh token is expired. Provide a refresh token if is not persisted.\n`getJwtRoles(token = getSessionToken(), tenant = '')` - Get current roles from an existing session token. Provide tenant id for specific tenant roles.\n`getJwtPermissions(token = getSessionToken(), tenant = '')` - Fet current permissions from an existing session token. Provide tenant id for specific tenant permissions.\n\n### Refresh token lifecycle\n\nDescope 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.\n\nIf the Descope project settings are configured to manage tokens in cookies.\nyou 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.\n\n### Token Persistence\n\nDescope stores two tokens: the session token and the refresh token.\n\n- The refresh token is either stored in local storage or an `httpOnly` cookie. This is configurable in the Descope console.\n- The session token is stored in either local storage or a JS cookie. This behavior is configurable via the `sessionTokenViaCookie` prop in the Descope plugin.\n\nHowever, for security reasons, you may choose not to store tokens in the browser. In this case, you can pass `persistTokens: false` to the Descope plugin. This prevents the SDK from storing the tokens in the browser.\n\nNotes:\n\n- You must configure the refresh token to be stored in an `httpOnly` cookie in the Descope console. Otherwise, the refresh token will not be stored, and when the page is refreshed, the user will be logged out.\n- You can still retrieve the session token using the `useSession` hook.\n\n### Last User Persistence\n\nDescope stores the last user information in local storage. If you wish to disable this feature, you can pass `storeLastAuthenticatedUser: false` to the Descope plugin. Please note that some features related to the last authenticated user may not function as expected if this behavior is disabled.\n\n### Widgets\n\nWidgets are components that allow you to expose management features for tenant-based implementation. In certain scenarios, your customers may require the capability to perform managerial actions independently, alleviating the necessity to contact you. Widgets serve as a feature enabling you to delegate these capabilities to your customers in a modular manner.\n\nImportant Note:\n\n- For the user to be able to use the widget, they need to be assigned the `Tenant Admin` Role.\n\n#### User Management\n\nThe `UserManagement` widget lets you embed a user table in your site to view and take action.\n\nThe widget lets you:\n\n- Create a new user\n- Edit an existing user\n- Activate / disable an existing user\n- Reset an existing user's password\n- Remove an existing user's passkey\n- Delete an existing user\n\nNote:\n\n- Custom fields also appear in the table.\n\n###### Usage\n\n```vue\n\u003ctemplate\u003e\n\t\u003cUserManagement tenant=\"tenant-id\" widget-id=\"user-management-widget\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { UserManagement } from '@descope/vue-sdk';\n\u003c/script\u003e\n```\n\nExample:\n[Manage Users](./example/components/ManageUsers.vue)\n\n#### Role Management\n\nThe `RoleManagement` widget lets you embed a role table in your site to view and take action.\n\nThe widget lets you:\n\n- Create a new role\n- Change an existing role's fields\n- Delete an existing role\n\nNote:\n\n- The `Editable` field is determined by the user's access to the role - meaning that project-level roles are not editable by tenant level users.\n- You need to pre-define the permissions that the user can use, which are not editable in the widget.\n\n###### Usage\n\n```vue\n\u003ctemplate\u003e\n\t\u003cRoleManagement tenant=\"tenant-id\" widget-id=\"role-management-widget\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { RoleManagement } from '@descope/vue-sdk';\n\u003c/script\u003e\n```\n\nExample:\n[Manage Roles](./example/components/ManageRoles.vue)\n\n#### Access Key Management\n\nThe `AccessKeyManagement` widget lets you embed an access key table in your site to view and take action.\n\nThe widget lets you:\n\n- Create a new access key\n- Activate / deactivate an existing access key\n- Delete an exising access key\n\n###### Usage\n\n```vue\n\u003ctemplate\u003e\n\t\u003c!-- admin view: manage all tenant users' access keys --\u003e\n\t\u003cAccessKeyManagement\n\t\ttenant=\"tenant-id\"\n\t\twidget-id=\"access-key-management-widget\"\n\t/\u003e\n\n\t\u003c!-- user view: mange access key for the logged-in tenant's user  --\u003e\n\t\u003cAccessKeyManagement\n\t\ttenant=\"tenant-id\"\n\t\twidget-id=\"user-access-key-management-widget\"\n\t/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { AccessKeyManagement } from '@descope/vue-sdk';\n\u003c/script\u003e\n```\n\nExample:\n[Manage Access Keys](./example/components/ManageAccessKeys.vue)\n\n#### Audit Management\n\nThe `AuditManagement` widget lets you embed an audit table in your site.\n\n###### Usage\n\n```vue\n\u003ctemplate\u003e\n\t\u003cAuditManagement tenant=\"tenant-id\" widget-id=\"audit-management-widget\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { AuditManagement } from '@descope/vue-sdk';\n\u003c/script\u003e\n```\n\nExample:\n[Manage Audit](./example/components/ManageAudit.vue)\n\n#### User Profile\n\nThe `UserProfile` widget lets you embed a user profile component in your app and let the logged in user update his profile.\n\nThe widget lets you:\n\n- Update user profile picture\n- Update user personal information\n- Update authentication methods\n- Logout\n\n###### Usage\n\n```vue\n\u003ctemplate\u003e\n\t\u003cUserProfile widget-id=\"user-profile-widget\" @logout=\"onLogout\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { UserProfile } from '@descope/vue-sdk';\n\nconst onLogout = () =\u003e (window.location.href = '/login');\n\u003c/script\u003e\n```\n\nExample:\n[User Profile](./example/components/MyUserProfile.vue)\n\n## Code Example\n\nYou can find an example Vue app in the [example folder](./example).\n\n### Setup\n\nTo run the examples, set your `Project ID` by setting the `VUE_APP_DESCOPE_PROJECT_ID` env var or directly\nin the sample code.\nFind your Project ID in the [Descope console](https://app.descope.com/settings/project).\n\n```bash\nexport VUE_APP_DESCOPE_PROJECT_ID=\u003cProject-ID\u003e\n```\n\nAlternatively, put the environment variable in `.env.local` file in the project root directory.\nSee bellow for an `.env.local` file template with more information.\n\n### Run Example\n\nRun the following command in the root of the project to build and run the example:\n\n```bash\nnpm i \u0026\u0026 npm start\n```\n\nOpen your browser and navigate to [http://localhost:3000](http://localhost:3000).\n\n### Example Optional Env Variables\n\nSee the following table for customization environment variables for the example app:\n\n| Env Variable                    | Description                            | Default value     |\n| ------------------------------- | -------------------------------------- | ----------------- |\n| VUE_APP_DESCOPE_FLOW_ID         | Which flow ID to use in the login page | **sign-up-or-in** |\n| VUE_APP_DESCOPE_BASE_URL        | Custom Descope base URL                | None              |\n| VUE_APP_DESCOPE_BASE_STATIC_URL | Custom Descope base static URL         | None              |\n\nExample for `.env.local` file template:\n\n```\n# Your project ID\nVUE_APP_DESCOPE_PROJECT_ID=\"\u003cProject-ID\u003e\"\n# Login flow ID\nVUE_APP_DESCOPE_FLOW_ID=\"\"\n# Descope base URL\nVUE_APP_DESCOPE_BASE_URL=\"\"\n# Descope base static URL\nVUE_APP_DESCOPE_BASE_STATIC_URL=\"\"\n```\n\n## Q \u0026 A\n\n### I updated the user in my backend, but the user / session token are not updated in the frontend\n\n// adjust the answer to vue sdk\nThe 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:\n\n```js\nconst sdk = useDescope();\n\nconst handleUpdateUser = () =\u003e {\n\tmyBackendUpdateUser().then(() =\u003e {\n\t\tsdk.me();\n\t\t// or\n\t\tsdk.refresh();\n\t});\n};\n```\n\n## Learn More\n\nTo learn more please see the [Descope Documentation and API reference page](https://docs.descope.com/).\n\n## Contact Us\n\nIf you need help you can email [Descope Support](mailto:support@descope.com)\n\n## License\n\nThe Descope SDK for React is licensed for use under the terms and conditions of the [MIT license Agreement](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdescope%2Fvue-sdk","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdescope%2Fvue-sdk","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdescope%2Fvue-sdk/lists"}