Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@descope/vue-sdk

Package Overview
Dependencies
Maintainers
4
Versions
136
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@descope/vue-sdk - npm Package Compare versions

Comparing version 0.0.0-next-065c046c-20230903 to 0.0.0-next-0ceda8ee-20240606

13

package.json
{
"name": "@descope/vue-sdk",
"version": "0.0.0-next-065c046c-20230903",
"version": "0.0.0-next-0ceda8ee-20240606",
"main": "dist/index.cjs",

@@ -23,3 +23,3 @@ "module": "dist/index.mjs",

"scripts": {
"start": "vue-cli-service serve",
"start": "vue-cli-service serve --port 3000",
"build": "rollup -m -c rollup.config.js",

@@ -41,3 +41,8 @@ "test": "vue-cli-service test:unit",

"dependencies": {
"@descope/web-component": "2.9.0"
"@descope/access-key-management-widget": "0.1.81",
"@descope/audit-management-widget": "0.1.44",
"@descope/role-management-widget": "0.1.79",
"@descope/user-management-widget": "0.4.81",
"@descope/user-profile-widget": "0.0.52",
"@descope/web-component": "3.15.0"
},

@@ -48,3 +53,3 @@ "peerDependencies": {

"optionalDependencies": {
"@descope/web-js-sdk": "1.0.11"
"@descope/web-js-sdk": ">=1.10.24"
},

@@ -51,0 +56,0 @@ "devDependencies": {

232

README.md

@@ -43,3 +43,9 @@ # Descope Vue SDK

<template>
<Descope flowId="my-flow-id" @error="handleError" @success="handleSuccess" />
<p v-if="isFlowLoading">Loading...</p>
<Descope
flowId="my-flow-id"
@success="handleSuccess"
@error="handleError"
@ready="handleReady"
/>
<!-- additional props -->

@@ -52,3 +58,6 @@ <!-- theme="dark" theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light" -->

<!-- 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. -->
<!-- validateOnBlur can be true in order to show input validation errors on blur, in addition to on submit. Default is false. -->
<!-- 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>

@@ -58,3 +67,10 @@

import { Descope } from '@descope/vue-sdk';
import { ref } from 'vue';
const isFlowLoading = ref(true);
const handleSuccess = (e) => {
console.log('Logged in!', e);
};
const handleError = (e) => {

@@ -64,4 +80,4 @@ console.log('Could not log in', e);

const handleSuccess = (e) => {
console.log('Logged in!', e);
const handleReady = () => {
isFlowLoading.value = false;
};

@@ -102,3 +118,3 @@

<script setup>
import { useDescope, useSession, useUser } from '../../src';
import { useDescope, useSession, useUser } from '@descope/vue-sdk';

@@ -205,2 +221,4 @@ const { isAuthenticated, isSessionLoading } = useSession();

`refresh(token = getRefreshToken())` - Force a refresh on current session token using an existing valid refresh token.
`isSessionTokenExpired(token = getSessionToken())` - Check whether the current session token is expired. Provide a session token if is not persisted.
`isRefreshTokenExpired(token = getRefreshToken())` - Check whether the current refresh token is expired. Provide a refresh token if is not persisted.
`getJwtRoles(token = getSessionToken(), tenant = '')` - Get current roles from an existing session token. Provide tenant id for specific tenant roles.

@@ -216,2 +234,172 @@ `getJwtPermissions(token = getSessionToken(), tenant = '')` - Fet current permissions from an existing session token. Provide tenant id for specific tenant permissions.

### Token Persistence
Descope stores two tokens: the session token and the refresh token.
- The refresh token is either stored in local storage or an `httpOnly` cookie. This is configurable in the Descope console.
- 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.
However, 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.
Notes:
- 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.
- You can still retrieve the session token using the `useSession` hook.
### Last User Persistence
Descope 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.
### Widgets
Widgets 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.
Important Note:
- For the user to be able to use the widget, they need to be assigned the `Tenant Admin` Role.
#### User Management
The `UserManagement` widget lets you embed a user table in your site to view and take action.
The widget lets you:
- Create a new user
- Edit an existing user
- Activate / disable an existing user
- Reset an existing user's password
- Remove an existing user's passkey
- Delete an existing user
Note:
- Custom fields also appear in the table.
###### Usage
```vue
<template>
<UserManagement tenant="tenant-id" widget-id="user-management-widget" />
</template>
<script setup>
import { UserManagement } from '@descope/vue-sdk';
</script>
```
Example:
[Manage Users](./example/components/ManageUsers.vue)
#### Role Management
The `RoleManagement` widget lets you embed a role table in your site to view and take action.
The widget lets you:
- Create a new role
- Change an existing role's fields
- Delete an existing role
Note:
- 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.
- You need to pre-define the permissions that the user can use, which are not editable in the widget.
###### Usage
```vue
<template>
<RoleManagement tenant="tenant-id" widget-id="role-management-widget" />
</template>
<script setup>
import { RoleManagement } from '@descope/vue-sdk';
</script>
```
Example:
[Manage Roles](./example/components/ManageRoles.vue)
#### Access Key Management
The `AccessKeyManagement` widget lets you embed an access key table in your site to view and take action.
The widget lets you:
- Create a new access key
- Activate / deactivate an existing access key
- Delete an exising access key
###### Usage
```vue
<template>
<!-- admin view: manage all tenant users' access keys -->
<AccessKeyManagement
tenant="tenant-id"
widget-id="access-key-management-widget"
/>
<!-- user view: mange access key for the logged-in tenant's user -->
<AccessKeyManagement
tenant="tenant-id"
widget-id="user-access-key-management-widget"
/>
</template>
<script setup>
import { AccessKeyManagement } from '@descope/vue-sdk';
</script>
```
Example:
[Manage Access Keys](./example/components/ManageAccessKeys.vue)
#### Audit Management
The `AuditManagement` widget lets you embed an audit table in your site.
###### Usage
```vue
<template>
<AuditManagement tenant="tenant-id" widget-id="audit-management-widget" />
</template>
<script setup>
import { AuditManagement } from '@descope/vue-sdk';
</script>
```
Example:
[Manage Audit](./example/components/ManageAudit.vue)
#### User Profile
The `UserProfile` widget lets you embed a user profile component in your app and let the logged in user update his profile.
The widget lets you:
- Update user profile picture
- Update user personal information
- Update authentication methods
- Logout
###### Usage
```vue
<template>
<UserProfile widget-id="user-profile-widget" @logout="onLogout" />
</template>
<script setup>
import { UserProfile } from '@descope/vue-sdk';
const onLogout = () => (window.location.href = '/login');
</script>
```
Example:
[User Profile](./example/components/MyUserProfile.vue)
## Code Example

@@ -223,3 +411,3 @@

To run the examples, set your `Project ID` by setting the `DESCOPE_PROJECT_ID` env var or directly
To run the examples, set your `Project ID` by setting the `VUE_APP_DESCOPE_PROJECT_ID` env var or directly
in the sample code.

@@ -243,2 +431,4 @@ Find your Project ID in the [Descope console](https://app.descope.com/settings/project).

Open your browser and navigate to [http://localhost:3000](http://localhost:3000).
### Example Optional Env Variables

@@ -248,6 +438,7 @@

| 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 |
| 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 |
| VUE_APP_DESCOPE_BASE_STATIC_URL | Custom Descope base static URL | None |

@@ -263,4 +454,25 @@ Example for `.env.local` file template:

VUE_APP_DESCOPE_BASE_URL=""
# Descope base static URL
VUE_APP_DESCOPE_BASE_STATIC_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

@@ -267,0 +479,0 @@ 

dist/index.cjs

Sorry, the diff of this file is not supported yet

dist/index.d.ts

Sorry, the diff of this file is too big to display

dist/index.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc