New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@descope/react-sdk
Advanced tools
@descope/react-sdk - npm Package Compare versions
Comparing version 0.0.0-next-03f31055-20231129 to 0.0.0-next-041dc1ba-20250201
262
package.json
| { | ||
| "name": "@descope/react-sdk", | ||
| "version": "0.0.0-next-03f31055-20231129", | ||
| "description": "Descope React SDK", | ||
| "author": "Descope Team <info@descope.com>", | ||
| "homepage": "https://github.com/descope/react-sdk", | ||
| "bugs": { | ||
| "url": "https://github.com/descope/react-sdk/issues", | ||
| "email": "help@descope.com" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/descope/react-sdk.git" | ||
| }, | ||
| "license": "MIT", | ||
| "type": "module", | ||
| "exports": { | ||
| "require": { | ||
| "types": "./dist/index.d.ts", | ||
| "default": "./dist/cjs/index.cjs.js" | ||
| }, | ||
| "import": { | ||
| "types": "./dist/index.d.ts", | ||
| "default": "./dist/index.esm.js" | ||
| } | ||
| }, | ||
| "main": "dist/cjs/index.cjs.js", | ||
| "module": "dist/index.esm.js", | ||
| "types": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "format": "prettier . -w --ignore-path .gitignore", | ||
| "format-check": "prettier . --check --ignore-path .gitignore", | ||
| "format-lint": "pretty-quick --staged --ignore-path .gitignore && lint-staged", | ||
| "leaks": "bash ./scripts/gitleaks/gitleaks.sh", | ||
| "lint": "eslint '+(src|test|examples|testUtils)/**/*.+(ts|tsx)' --fix", | ||
| "prepare": "husky install", | ||
| "prepublishOnly": "npm run build", | ||
| "start": "npm run build && rollup -c rollup.config.app.js -w", | ||
| "test": "jest" | ||
| }, | ||
| "lint-staged": { | ||
| "+(src|test|examples)/**/*.{js,ts,jsx,tsx}": [ | ||
| "npm run lint" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
| "@descope/web-component": "3.1.3" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "7.23.0", | ||
| "@babel/preset-env": "7.22.20", | ||
| "@babel/preset-react": "7.22.15", | ||
| "@babel/preset-typescript": "7.23.0", | ||
| "@open-wc/rollup-plugin-html": "^1.2.5", | ||
| "@rollup/plugin-commonjs": "^25.0.0", | ||
| "@rollup/plugin-node-resolve": "^15.0.0", | ||
| "@rollup/plugin-replace": "^5.0.0", | ||
| "@rollup/plugin-typescript": "^8.3.0", | ||
| "@testing-library/jest-dom": "5.17.0", | ||
| "@testing-library/react": "12.1.5", | ||
| "@testing-library/react-hooks": "8.0.1", | ||
| "@testing-library/user-event": "14.5.1", | ||
| "@types/jest": "^27.0.2", | ||
| "@types/react": "17.0.60", | ||
| "@types/react-dom": "18.2.12", | ||
| "@types/react-router-dom": "^5.3.3", | ||
| "babel-jest": "27.5.1", | ||
| "eslint": "8.51.0", | ||
| "eslint-config-airbnb": "19.0.4", | ||
| "eslint-config-airbnb-typescript": "17.1.0", | ||
| "eslint-config-prettier": "8.10.0", | ||
| "eslint-config-standard": "17.1.0", | ||
| "eslint-import-resolver-typescript": "2.7.1", | ||
| "eslint-plugin-import": "2.28.1", | ||
| "eslint-plugin-jest": "27.4.2", | ||
| "eslint-plugin-jest-dom": "4.0.3", | ||
| "eslint-plugin-jest-formatting": "3.1.0", | ||
| "eslint-plugin-jsx-a11y": "6.7.1", | ||
| "eslint-plugin-n": "15.7.0", | ||
| "eslint-plugin-no-only-tests": "3.1.0", | ||
| "eslint-plugin-prefer-arrow": "1.2.3", | ||
| "eslint-plugin-prettier": "4.2.1", | ||
| "eslint-plugin-promise": "6.1.1", | ||
| "eslint-plugin-react": "7.33.2", | ||
| "eslint-plugin-react-hooks": "4.6.0", | ||
| "eslint-plugin-testing-library": "5.11.1", | ||
| "husky": "^8.0.1", | ||
| "jest": "^27.3.1", | ||
| "jest-extended": "^3.2.2", | ||
| "lint-staged": "^13.0.3", | ||
| "pretty-quick": "^3.1.3", | ||
| "react": "17.0.2", | ||
| "react-dom": "17.0.2", | ||
| "react-router-dom": "6.16.0", | ||
| "rollup": "^2.62.0", | ||
| "rollup-plugin-auto-external": "^2.0.0", | ||
| "rollup-plugin-browsersync": "^1.3.3", | ||
| "rollup-plugin-define": "^1.0.1", | ||
| "rollup-plugin-delete": "^2.0.0", | ||
| "rollup-plugin-dotenv": "^0.5.0", | ||
| "rollup-plugin-dts": "^4.2.2", | ||
| "rollup-plugin-livereload": "^2.0.5", | ||
| "rollup-plugin-serve": "^2.0.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "ts-jest": "^27.0.7", | ||
| "ts-node": "10.9.1", | ||
| "typescript": "^4.5.3" | ||
| }, | ||
| "peerDependencies": { | ||
| "@types/react": ">=17", | ||
| "react": ">=17" | ||
| }, | ||
| "optionalDependencies": { | ||
| "@descope/web-js-sdk": ">=1" | ||
| } | ||
| } | ||
| "name": "@descope/react-sdk", | ||
| "version": "0.0.0-next-041dc1ba-20250201", | ||
| "description": "Descope React SDK", | ||
| "author": "Descope Team <info@descope.com>", | ||
| "homepage": "https://github.com/descope/descope-js", | ||
| "bugs": { | ||
| "url": "https://github.com/descope/descope-js/issues", | ||
| "email": "help@descope.com" | ||
| }, | ||
| "repository": { | ||
| "type": "git", | ||
| "url": "https://github.com/descope/descope-js.git" | ||
| }, | ||
| "license": "MIT", | ||
| "type": "module", | ||
| "sideEffects": false, | ||
| "exports": { | ||
| ".": { | ||
| "require": { | ||
| "types": "./dist/index.d.ts", | ||
| "default": "./dist/cjs/index.js" | ||
| }, | ||
| "import": { | ||
| "types": "./dist/index.d.ts", | ||
| "default": "./dist/esm/index.js" | ||
| } | ||
| }, | ||
| "./flows": { | ||
| "import": { | ||
| "types": "./dist/types/flows.d.ts", | ||
| "default": "./dist/esm/flows.js" | ||
| }, | ||
| "require": { | ||
| "types": "./dist/types/flows.d.ts", | ||
| "default": "./dist/cjs/index.js" | ||
| } | ||
| } | ||
| }, | ||
| "main": "dist/cjs/index.js", | ||
| "module": "dist/esm/index.js", | ||
| "types": "dist/index.d.ts", | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "lint-staged": { | ||
| "+(src|examples)/**/*.{js,ts,jsx,tsx}": [ | ||
| "npm run lint" | ||
| ] | ||
| }, | ||
| "dependencies": { | ||
| "@descope/sdk-helpers": "0.1.63", | ||
| "@descope/access-key-management-widget": "0.3.13", | ||
| "@descope/role-management-widget": "0.2.17", | ||
| "@descope/user-management-widget": "0.6.12", | ||
| "@descope/user-profile-widget": "0.2.13", | ||
| "@descope/audit-management-widget": "0.2.17", | ||
| "@descope/applications-portal-widget": "0.2.16", | ||
| "@descope/web-component": "3.32.7", | ||
| "@descope/core-js-sdk": "2.33.2", | ||
| "@descope/web-js-sdk": "1.23.5" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "7.24.7", | ||
| "@babel/preset-env": "7.24.7", | ||
| "@babel/preset-react": "7.24.7", | ||
| "@babel/preset-typescript": "7.24.7", | ||
| "@open-wc/rollup-plugin-html": "^1.2.5", | ||
| "@rollup/plugin-commonjs": "^25.0.0", | ||
| "@rollup/plugin-node-resolve": "^15.0.0", | ||
| "@rollup/plugin-replace": "^5.0.0", | ||
| "@rollup/plugin-typescript": "^11.0.0", | ||
| "@testing-library/jest-dom": "5.17.0", | ||
| "@testing-library/react": "16.0.0", | ||
| "@testing-library/react-hooks": "8.0.1", | ||
| "@testing-library/user-event": "14.5.2", | ||
| "@types/jest": "^29.0.0", | ||
| "@types/react": "18.3.3", | ||
| "@types/node": "^20.0.0", | ||
| "@types/react-dom": "18.3.0", | ||
| "@types/react-router-dom": "^5.3.3", | ||
| "babel-jest": "29.7.0", | ||
| "eslint": "8.57.1", | ||
| "eslint-config-airbnb": "19.0.4", | ||
| "eslint-config-airbnb-typescript": "17.1.0", | ||
| "eslint-config-prettier": "8.10.0", | ||
| "eslint-config-standard": "17.1.0", | ||
| "eslint-import-resolver-typescript": "3.6.1", | ||
| "eslint-plugin-import": "2.31.0", | ||
| "eslint-plugin-jest": "27.4.2", | ||
| "eslint-plugin-jest-dom": "4.0.3", | ||
| "eslint-plugin-jest-formatting": "3.1.0", | ||
| "eslint-plugin-jsx-a11y": "6.10.2", | ||
| "eslint-plugin-n": "15.7.0", | ||
| "eslint-plugin-no-only-tests": "3.1.0", | ||
| "eslint-plugin-prefer-arrow": "1.2.3", | ||
| "eslint-plugin-prettier": "4.2.1", | ||
| "eslint-plugin-promise": "6.1.1", | ||
| "eslint-plugin-react": "7.34.3", | ||
| "eslint-plugin-react-hooks": "4.6.2", | ||
| "eslint-plugin-testing-library": "6.2.2", | ||
| "jest": "^29.0.0", | ||
| "jest-extended": "^4.0.0", | ||
| "lint-staged": "^13.0.3", | ||
| "pretty-quick": "^3.1.3", | ||
| "react": "18.3.1", | ||
| "react-router": "6.24.0", | ||
| "react-dom": "18.3.1", | ||
| "react-router-dom": "6.24.0", | ||
| "rollup": "^2.62.0", | ||
| "rollup-plugin-auto-external": "^2.0.0", | ||
| "rollup-plugin-browsersync": "^1.3.3", | ||
| "rollup-plugin-define": "^1.0.1", | ||
| "rollup-plugin-delete": "^2.0.0", | ||
| "rollup-plugin-dotenv": "^0.5.0", | ||
| "rollup-plugin-dts": "^4.2.2", | ||
| "rollup-plugin-livereload": "^2.0.5", | ||
| "rollup-plugin-serve": "^3.0.0", | ||
| "rollup-plugin-terser": "^7.0.2", | ||
| "ts-jest": "^29.0.0", | ||
| "ts-node": "10.9.1", | ||
| "typescript": "^5.0.2", | ||
| "object-assign": "^4.1.1", | ||
| "scheduler": "^0.23.0", | ||
| "@remix-run/router": "1.17.0", | ||
| "jest-environment-jsdom": "^29.0.0", | ||
| "core-js": "3.19.3", | ||
| "rollup-plugin-no-emit": "1.2.1" | ||
| }, | ||
| "peerDependencies": { | ||
| "@types/react": ">=17", | ||
| "react": ">=17" | ||
| }, | ||
| "scripts": { | ||
| "build": "rollup -c", | ||
| "format": "prettier . -w --ignore-path .gitignore", | ||
| "format-check": "prettier . --check --ignore-path .gitignore", | ||
| "format-lint": "pretty-quick --staged --ignore-path .gitignore && lint-staged", | ||
| "leaks": "bash ./scripts/gitleaks/gitleaks.sh", | ||
| "lint": "eslint '+(src|examples)/**/*.+(ts|tsx)' --fix", | ||
| "start": "npx nx run react-sdk:build && rollup -c rollup.config.app.mjs -w", | ||
| "test": "jest" | ||
| } | ||
| } |
369
README.md
@@ -26,13 +26,13 @@ # Descope SDK for React | ||
| const AppRoot = () => { | ||
| return ( | ||
| <AuthProvider | ||
| 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 /> | ||
| </AuthProvider> | ||
| ); | ||
| return ( | ||
| <AuthProvider | ||
| 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 /> | ||
| </AuthProvider> | ||
| ); | ||
| }; | ||
@@ -76,2 +76,8 @@ ``` | ||
| onError={(e) => console.log('Could not logged in')} | ||
| // onReady={() => { | ||
| // This event is triggered when the flow is ready to be displayed | ||
| // Its useful for showing a loading indication before the page ready | ||
| // console.log('Flow is ready'); | ||
| // }} | ||
| // theme can be "light", "dark" or "os", which auto select a theme based on the OS theme. Default is "light" | ||
@@ -98,2 +104,6 @@ // theme="dark" | ||
| // validateOnBlur: set it to true will show input validation errors on blur, in addition to on submit | ||
| // 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 | ||
| // errorTransformer is a function that receives an error object and returns a string. The returned string will be displayed to the user. | ||
@@ -116,2 +126,21 @@ // NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is. | ||
| // form is an object the initial form context that is used in screens inputs in the flow execution. | ||
| // Used to inject predefined input values on flow start such as custom inputs, custom attributes 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. | ||
| // Example: | ||
| // ... | ||
| // form={{ email: "predefinedname@domain.com", firstName: "test", "customAttribute.test": "aaaa", "myCustomInput": 12 }} | ||
| // ... | ||
| // 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. | ||
| // Example: | ||
| // ... | ||
| // client={{ version: "1.2.0" }} | ||
| // ... | ||
| // logger is an object describing how to log info, warn and errors. | ||
@@ -134,2 +163,7 @@ // NOTE: logger is not required. If not provided, the logs will be printed to the console. | ||
| // ... | ||
| // Use a custom style name or keep empty to use the default style. | ||
| // styleId="my-awesome-style" | ||
| /> | ||
@@ -153,26 +187,30 @@ ) | ||
| const App = () => { | ||
| // NOTE - `useDescope`, `useSession`, `useUser` should be used inside `AuthProvider` context, | ||
| // and will throw an exception if this requirement is not met | ||
| const { isAuthenticated, isSessionLoading } = useSession(); | ||
| const { user, isUserLoading } = useUser(); | ||
| const { logout } = useDescope(); | ||
| // NOTE - `useDescope`, `useSession`, `useUser` should be used inside `AuthProvider` context, | ||
| // and will throw an exception if this requirement is not met | ||
| // useSession retrieves authentication state, session loading status, and session token | ||
| const { isAuthenticated, isSessionLoading, sessionToken } = useSession(); | ||
| // useUser retrieves the logged in user information | ||
| const { user, isUserLoading } = useUser(); | ||
| // useDescope retrieves Descope SDK for further operations related to authentication | ||
| // such as logout | ||
| const sdk = useDescope(); | ||
| if (isSessionLoading || isUserLoading) { | ||
| return <p>Loading...</p>; | ||
| } | ||
| if (isSessionLoading || isUserLoading) { | ||
| return <p>Loading...</p>; | ||
| } | ||
| const handleLogout = useCallback(() => { | ||
| logout(); | ||
| }, [logout]); | ||
| const handleLogout = useCallback(() => { | ||
| sdk.logout(); | ||
| }, [sdk]); | ||
| if (isAuthenticated) { | ||
| return ( | ||
| <> | ||
| <p>Hello {user.name}</p> | ||
| <button onClick={handleLogout}>Logout</button> | ||
| </> | ||
| ); | ||
| } | ||
| if (isAuthenticated) { | ||
| return ( | ||
| <> | ||
| <p>Hello {user.name}</p> | ||
| <button onClick={handleLogout}>Logout</button> | ||
| </> | ||
| ); | ||
| } | ||
| return <p>You are not logged in</p>; | ||
| return <p>You are not logged in</p>; | ||
| }; | ||
@@ -186,3 +224,3 @@ ``` | ||
| useEffect(() => { | ||
| refresh(); | ||
| refresh(); | ||
| }, [refresh]); | ||
@@ -216,9 +254,9 @@ ``` | ||
| export const fetchData = async () => { | ||
| const sessionToken = getSessionToken(); | ||
| const res = await fetch('/path/to/server/api', { | ||
| headers: { | ||
| Authorization: `Bearer ${sessionToken}` | ||
| } | ||
| }); | ||
| // ... use res | ||
| const sessionToken = getSessionToken(); | ||
| const res = await fetch('/path/to/server/api', { | ||
| headers: { | ||
| Authorization: `Bearer ${sessionToken}`, | ||
| }, | ||
| }); | ||
| // ... use res | ||
| }; | ||
@@ -260,7 +298,7 @@ ``` | ||
| const AppRoot = () => { | ||
| return ( | ||
| <AuthProvider projectId="my-project-id" sessionTokenViaCookie> | ||
| <App /> | ||
| </AuthProvider> | ||
| ); | ||
| return ( | ||
| <AuthProvider projectId="my-project-id" sessionTokenViaCookie> | ||
| <App /> | ||
| </AuthProvider> | ||
| ); | ||
| }; | ||
@@ -282,2 +320,4 @@ ``` | ||
| `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 (see [token persistence](#token-persistence)). | ||
| `isRefreshTokenExpired(token = getRefreshToken())` - Check whether the current refresh token is expired. Provide a refresh token if is not persisted (see [token persistence](#token-persistence)). | ||
| `getJwtRoles(token = getSessionToken(), tenant = '')` - Get current roles from an existing session token. Provide tenant id for specific tenant roles. | ||
@@ -291,4 +331,188 @@ `getJwtPermissions(token = getSessionToken(), tenant = '')` - Fet current permissions from an existing session token. Provide tenant id for specific tenant permissions. | ||
| 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` prop in the `AuthProvider` component. See the above [`AuthProvider` usage](https://github.com/descope/react-sdk#wrap-your-app-with-auth-provider) for usage example. | ||
| you must also configure a custom domain, and set it as the `baseUrl` prop in the `AuthProvider` component. See the above [`AuthProvider` usage](#wrap-your-app-with-auth-provider) for usage example. | ||
| ### 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 `AuthProvider` component. | ||
| However, for security reasons, you may choose not to store tokens in the browser. In this case, you can pass `persistTokens={false}` to the `AuthProvider` component. 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 `AuthProvider` component. Please note that some features related to the last authenticated user may not function as expected if this behavior is disabled. Local storage is being cleared when the user logs out, if you want the avoid clearing the local storage, you can pass `keepLastAuthenticatedUserAfterLogout={true}` to the `AuthProvider` component. | ||
| ### 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 | ||
| ```js | ||
| import { UserManagement } from '@descope/react-sdk'; | ||
| ... | ||
| <UserManagement | ||
| widgetId="user-management-widget" | ||
| tenant="tenant-id" | ||
| /> | ||
| ``` | ||
| Example: | ||
| [Manage Users](./examples/app/ManageUsers.tsx) | ||
| #### 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 | ||
| ```js | ||
| import { RoleManagement } from '@descope/react-sdk'; | ||
| ... | ||
| <RoleManagement | ||
| widgetId="role-management-widget" | ||
| tenant="tenant-id" | ||
| /> | ||
| ``` | ||
| Example: | ||
| [Manage Roles](./examples/app/ManageRoles.tsx) | ||
| #### 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 | ||
| ```js | ||
| import { AccessKeyManagement } from '@descope/react-sdk'; | ||
| ... | ||
| { | ||
| /* admin view: manage all tenant users' access keys */ | ||
| } | ||
| <AccessKeyManagement | ||
| widgetId="access-key-management-widget" | ||
| tenant="tenant-id" | ||
| /> | ||
| { | ||
| /* user view: mange access key for the logged-in tenant's user */ | ||
| } | ||
| <AccessKeyManagement | ||
| widgetId="user-access-key-management-widget" | ||
| tenant="tenant-id" | ||
| /> | ||
| ``` | ||
| Example: | ||
| [Manage Access Keys](./examples/app/ManageAccessKeys.tsx) | ||
| #### Audit Management | ||
| The `AuditManagement` widget lets you embed an audit table in your site. | ||
| ###### Usage | ||
| ```js | ||
| import { AuditManagement } from '@descope/react-sdk'; | ||
| ... | ||
| <AuditManagement | ||
| widgetId="audit-management-widget" | ||
| tenant="tenant-id" | ||
| /> | ||
| ``` | ||
| Example: | ||
| [Manage Audit](./examples/app/ManageAudit.tsx) | ||
| #### 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 | ||
| ```js | ||
| import { UserProfile } from '@descope/react-sdk'; | ||
| ... | ||
| <UserProfile | ||
| widgetId="user-profile-widget" | ||
| onLogout={() => { | ||
| // add here you own logout callback | ||
| window.location.href = '/login'; | ||
| }} | ||
| /> | ||
| ``` | ||
| Example: | ||
| [User Profile](./examples/app/MyUserProfile.tsx) | ||
| #### Applications Portal | ||
| 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. | ||
| ###### Usage | ||
| ```js | ||
| import { ApplicationsPortal } from '@descope/react-sdk'; | ||
| ... | ||
| <ApplicationsPortal | ||
| widgetId="applications-portal-widget" | ||
| /> | ||
| ``` | ||
| Example: | ||
| [Applications Portal](./examples/app/MyApplicationsPortal.tsx) | ||
| ## Code Example | ||
@@ -313,2 +537,4 @@ | ||
| Note: Due to an issue with react-sdk tsconfig, you need to remove `"examples"` from the `exclude` field in the `tsconfig.json` file in the root of the project before running the example. | ||
| Run the following command in the root of the project to build and run the example: | ||
@@ -324,14 +550,15 @@ | ||
| | Env Variable | Description | Default value | | ||
| | ----------------------- | ------------------------------------------------------------------------------------------------------------- | ----------------- | | ||
| | DESCOPE_FLOW_ID | Which flow ID to use in the login page | **sign-up-or-in** | | ||
| | DESCOPE_BASE_URL | Custom Descope base URL | None | | ||
| | DESCOPE_THEME | Flow theme | None | | ||
| | DESCOPE_LOCALE | Flow locale | Browser's locale | | ||
| | DESCOPE_REDIRECT_URL | Flow redirect URL for OAuth/SSO/Magic Link/Enchanted Link | None | | ||
| | DESCOPE_TENANT_ID | Flow tenant ID for SSO/SAML | None | | ||
| | DESCOPE_DEBUG_MODE | **"true"** - Enable debugger</br>**"false"** - Disable flow debugger | None | | ||
| | DESCOPE_STEP_UP_FLOW_ID | Step up flow ID to show to logged in user (via button). e.g. "step-up". Button will be hidden if not provided | None | | ||
| | DESCOPE_TELEMETRY_KEY | **String** - Telemetry public key provided by Descope Inc | None | | ||
| | | | | | ||
| | Env Variable | Description | Default value | | ||
| | ----------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------- | | ||
| | DESCOPE_FLOW_ID | Which flow ID to use in the login page | **sign-up-or-in** | | ||
| | DESCOPE_BASE_URL | Custom Descope base URL | None | | ||
| | DESCOPE_BASE_STATIC_URL | Allows to override the base URL that is used to fetch static files | https://static.descope.com/pages | | ||
| | DESCOPE_THEME | Flow theme | None | | ||
| | DESCOPE_LOCALE | Flow locale | Browser's locale | | ||
| | DESCOPE_REDIRECT_URL | Flow redirect URL for OAuth/SSO/Magic Link/Enchanted Link | None | | ||
| | DESCOPE_TENANT_ID | Flow tenant ID for SSO/SAML | None | | ||
| | DESCOPE_DEBUG_MODE | **"true"** - Enable debugger</br>**"false"** - Disable flow debugger | None | | ||
| | DESCOPE_STEP_UP_FLOW_ID | Step up flow ID to show to logged in user (via button). e.g. "step-up". Button will be hidden if not provided | None | | ||
| | DESCOPE_TELEMETRY_KEY | **String** - Telemetry public key provided by Descope Inc | None | | ||
| | | | | | ||
@@ -347,2 +574,4 @@ Example for `.env` file template: | ||
| DESCOPE_BASE_URL="" | ||
| # Descope base static URL | ||
| DESCOPE_BASE_STATIC_URL="" | ||
| # Set flow theme to dark | ||
@@ -364,2 +593,28 @@ DESCOPE_THEME=dark | ||
| ## Performance / Bundle Size | ||
| To improve modularity and reduce bundle size, all flow-related utilities are available also under `@descope/react-sdk/flows` subpath. Example: | ||
| ``` | ||
| import { Descope, useSession, ... } from '@descope/react-sdk/flows'; | ||
| ``` | ||
| ## FAQ | ||
| ### I updated the user in my backend, but the user / session token are not updated in the frontend | ||
| 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 = useCallback(() => { | ||
| myBackendUpdateUser().then(() => { | ||
| sdk.me(); | ||
| // or | ||
| sdk.refresh(); | ||
| }); | ||
| }, [sdk]); | ||
| ``` | ||
| ## Learn More | ||
@@ -366,0 +621,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 5 instances in 1 package
Fixed alerts
Uses eval
Supply chain riskPackage uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by394.15%
2070156
- Number of package files
- increased by605.88%
120
- Lines of code
- increased by482.28%
7296
- Number of lines in readme file
- increased by70.64%
616
Worsened metrics
- Dependency count
- increased by200%
12
- Dev dependency count
- increased by12.07%
65
- Number of low quality alerts
- increased by533.33%
19
- Number of low supply chain risk alerts
- increased byInfinity%
73
- Number of medium supply chain risk alerts
- increased by33.33%
4
Dependency changes
+ Added@descope/core-js-sdk@2.33.2
+ Added@descope/sdk-helpers@0.1.63
+ Added@descope/web-js-sdk@1.23.5
+ Added@descope/access-key-management-widget@0.3.13(transitive)
+ Added@descope/applications-portal-widget@0.2.16(transitive)
+ Added@descope/audit-management-widget@0.2.17(transitive)
+ Added@descope/core-js-sdk@2.33.2(transitive)
+ Added@descope/escape-markdown@0.1.3(transitive)
+ Added@descope/role-management-widget@0.2.17(transitive)
+ Added@descope/sdk-component-drivers@0.2.46(transitive)
+ Added@descope/sdk-helpers@0.1.63(transitive)
+ Added@descope/sdk-mixins@0.6.4(transitive)
+ Added@descope/user-management-widget@0.6.12(transitive)
+ Added@descope/user-profile-widget@0.2.13(transitive)
+ Added@descope/web-component@3.32.7(transitive)
+ Added@descope/web-js-sdk@1.23.5(transitive)
+ Added@reduxjs/toolkit@2.5.1(transitive)
+ Addedimmer@10.1.1(transitive)
+ Addedlibphonenumber-js@1.11.17(transitive)
+ Addedredux@5.0.1(transitive)
+ Addedredux-thunk@3.1.0(transitive)
+ Addedreselect@5.1.1(transitive)
- Removed@descope/core-js-sdk@2.1.02.35.0(transitive)
- Removed@descope/web-component@3.1.3(transitive)
- Removed@descope/web-js-sdk@1.24.11.7.0(transitive)
- Removed@fingerprintjs/fingerprintjs-pro@3.8.5(transitive)
- Removedjwt-decode@3.1.2(transitive)
- Removedlodash.get@4.4.2(transitive)
- Removedtslib@2.6.2(transitive)