@descope/react-sdk - npm Package Compare versions

Comparing version 0.0.0-next-e3848d72-20230209 to 0.0.0-next-e3df9b66-20250205

package.json

 {
-	"name": "@descope/react-sdk",
-	"version": "0.0.0-next-e3848d72-20230209",
-	"description": "Descope React SDK",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/descope/react-sdk.git"
-	},
-	"license": "ISC",
-	"type": "module",
-	"exports": {
-		"require": "./dist/cjs/index.cjs.js",
-		"import": "./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",
-		"lint": "eslint '+(src|test|testUtils)/**/*.ts' --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": "0.1.0-alpha.42",
-		"react-router-dom": "6.7.0"
-	},
-	"devDependencies": {
-		"@babel/core": "7.20.12",
-		"@babel/preset-env": "7.20.2",
-		"@babel/preset-react": "7.18.6",
-		"@babel/preset-typescript": "7.18.6",
-		"@open-wc/rollup-plugin-html": "^1.2.5",
-		"@rollup/plugin-commonjs": "^24.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.16.5",
-		"@testing-library/react": "13.4.0",
-		"@testing-library/user-event": "14.4.3",
-		"@types/jest": "^27.0.2",
-		"@types/react": "18.0.27",
-		"@types/react-dom": "18.0.10",
-		"@types/react-router-dom": "^5.3.3",
-		"babel-jest": "27.5.1",
-		"eslint": "8.32.0",
-		"eslint-config-airbnb": "19.0.4",
-		"eslint-config-airbnb-typescript": "17.0.0",
-		"eslint-config-prettier": "8.6.0",
-		"eslint-config-standard": "17.0.0",
-		"eslint-import-resolver-typescript": "2.7.1",
-		"eslint-plugin-import": "2.27.5",
-		"eslint-plugin-jest": "27.2.1",
-		"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.6.1",
-		"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.32.1",
-		"eslint-plugin-react-hooks": "4.6.0",
-		"eslint-plugin-testing-library": "5.10.0",
-		"husky": "^8.0.1",
-		"jest": "^27.3.1",
-		"jest-extended": "^3.2.2",
-		"lint-staged": "^13.0.3",
-		"pretty-quick": "^3.1.3",
-		"react": "18.2.0",
-		"react-dom": "18.2.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.4.1",
-		"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": {
-		"@descope/web-js-sdk": "0.1.0-alpha.29",
-		"@types/react": ">=16",
-		"react": ">=16"
-	}
-}
+  "name": "@descope/react-sdk",
+  "version": "0.0.0-next-e3df9b66-20250205",
+  "description": "Descope React SDK",
+  "author": "Descope Team <[e-mail]>",
+  "homepage": "https://github.com/descope/descope-js",
+  "bugs": {
+    "url": "https://github.com/descope/descope-js/issues",
+    "email": "[e-mail]"
+  },
+  "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.67",
+    "@descope/audit-management-widget": "0.2.21",
+    "@descope/role-management-widget": "0.2.21",
+    "@descope/user-management-widget": "0.6.16",
+    "@descope/access-key-management-widget": "0.3.17",
+    "@descope/user-profile-widget": "0.2.17",
+    "@descope/applications-portal-widget": "0.2.20",
+    "@descope/web-component": "3.32.11",
+    "@descope/web-js-sdk": "1.23.9",
+    "@descope/core-js-sdk": "2.33.6"
+  },
+  "devDependencies": {
+    "@babel/core": "7.26.0",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.26.3",
+    "@babel/preset-typescript": "7.26.0",
+    "@open-wc/rollup-plugin-html": "^1.2.5",
+    "@rollup/plugin-commonjs": "^27.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.18",
+    "@types/node": "^20.0.0",
+    "@types/react-dom": "18.3.5",
+    "@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": "28.10.0",
+    "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.3.0",
+    "eslint-plugin-prefer-arrow": "1.2.3",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-promise": "6.6.0",
+    "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.25.0",
+    "@remix-run/router": "1.17.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "core-js": "3.40.0",
+    "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"
+  }
+}

README.md

@@ -1,17 +0,21 @@
-# @descope/react-sdk
+# Descope SDK for React
 
-This library lets you consume your login pages created by Descope console-app in your application
-Under the hood, it uses [web-js-sdk](https://github.com/descope/web-js-sdk)
+The Descope SDK for React provides convenient access to the Descope for an application written on top of React. You can read more on the [Descope Website](https://descope.com).
 
-## Usage
+## Requirements
 
-### Install the package
+- The SDK supports React version 16 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 install @descope/react-sdk
+npm i --save @descope/react-sdk
 ```
 
-### Render it in your application
+## Usage
 
-#### Wrap your app with Auth Provider
+### Wrap your app with Auth Provider
 
@@ -22,15 +26,21 @@ ```js
 const AppRoot = () => {
-	return (
-		<AuthProvider projectId="my-project-id">
-			<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>
+  );
 };
 ```
 
-#### Use Descope to render specific flow
+### Use Descope to render specific flow
 
 You can use **default flows** or **provide flow id** directly to the Descope component
 
-##### 1. Default flows
+#### 1. Default flows
 
@@ -54,3 +64,3 @@ ```js
 
-##### 2. Provide flow id
+#### 2. Provide flow id
 
@@ -67,7 +77,91 @@ ```js
             onError={(e) => console.log('Could not logged in')}
-            // theme can be "light" or "dark". If empty, Descope will use the OS theme
-            // theme="light"
+            // 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"
+            // theme="dark"
+
+            // 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.
+            // locale="en"
+
             // debug can be set to true to enable debug mode
             // debug={true}
+
+            // tenant ID for SSO (SAML) login. If not provided, Descope will use the domain of available email to choose the tenant
+            // tenant=<tenantId>
+
+            // 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)
+            // redirectUrl=<redirectUrl>
+
+            // 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
+            // autoFocus="skipFirstScreen"
+
+            // 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.
+            // NOTE: errorTransformer is not required. If not provided, the error object will be displayed as is.
+            // Example:
+            // const errorTransformer = useCallback(
+            // 	(error: { text: string; type: string }) => {
+            // 		const translationMap = {
+            // 			SAMLStartFailed: 'Failed to start SAML flow'
+            // 		};
+            // 		return translationMap[error.type] || error.text;
+            // 	},
+            // 	[]
+            // );
+            // ...
+            // errorTransformer={errorTransformer}
+            // ...
+
+
+            // 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: "[e-mail]",  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.
+            // NOTE: logger is not required. If not provided, the logs will be printed to the console.
+            // Example:
+            // const logger = {
+            // 	info: (title: string, description: string, state: any) => {
+            //      console.log(title, description, JSON.stringify(state));
+            //  },
+            // 	warn: (title: string, description: string) => {
+            //      console.warn(title);
+            //  },
+            // 	error: (title: string, description: string) => {
+            //      console.error('OH NOO');
+            //  },
+            // }
+            // ...
+            // logger={logger}
+            // ...
+
+
+            // Use a custom style name or keep empty to use the default style.
+            // styleId="my-awesome-style"
+
         />
@@ -78,3 +172,3 @@ )
 
-#### Use the `useDescope`, `useSession` and `useUser` hooks in your components in order to get authentication state, user details and utilities
+### Use the `useDescope`, `useSession` and `useUser` hooks in your components in order to get authentication state, user details and utilities
 
@@ -88,28 +182,50 @@ This can be helpful to implement application-specific logic. Examples:
 ```js
-import { useDescope, useSession, useUser } from '@descope/react-sdk'
+import { useDescope, useSession, useUser } from '@descope/react-sdk';
+import { useCallback } from 'react';
 
 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>;
+  }
 
-     if(isAuthenticated){
-        return (
-            <p>Hello ${user.name}</p>
-            <button onClick={logout}>Logout</div>
-        )
-    }
+  const handleLogout = useCallback(() => {
+    sdk.logout();
+  }, [sdk]);
 
-    return <p>You are not logged in</p>
-}
+  if (isAuthenticated) {
+    return (
+      <>
+        <p>Hello {user.name}</p>
+        <button onClick={handleLogout}>Logout</button>
+      </>
+    );
+  }
+
+  return <p>You are not logged in</p>;
+};
 ```
 
-#### Session token server validation (pass session token to server API)
+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. Example:
 
+```js
+const { refresh } = useDescope();
+useEffect(() => {
+  refresh();
+}, [refresh]);
+```
+
+**For more SDK usage examples refer to [docs](https://docs.descope.com/build/guides/client_sdks/)**
+
+### Session token server validation (pass session token to server API)
+
 When developing a full-stack application, it is common to have private server API which requires a valid session token:
@@ -119,3 +235,3 @@
 
-Note: 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/guides/gettingstarted/#session-validation) in Descope documentation.
+Note: 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.
 
@@ -127,3 +243,3 @@ There are 2 ways to achieve that:
 
-##### 1. Using `getSessionToken` to get the token
+#### 1. Using `getSessionToken` to get the token
 
@@ -138,9 +254,9 @@ An example for api function, and passing the token on the `Authorization` header:
 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
 };
@@ -164,3 +280,3 @@ ```
             // button that triggers an API that may use session token
-            <button onClick={onClick}>Click Me</div>
+            <button onClick={onClick}>Click Me</button>
         }
@@ -171,3 +287,3 @@ )
 
-##### 2. Passing `sessionTokenViaCookie` boolean prop to the `AuthProvider`
+#### 2. Passing `sessionTokenViaCookie` boolean prop to the `AuthProvider`
 
@@ -184,7 +300,7 @@ Passing `sessionTokenViaCookie` prop to `AuthProvider` component. Descope SDK will automatically store session token on the `DS` cookie.
 const AppRoot = () => {
-	return (
-		<AuthProvider projectId="my-project-id" sessionTokenViaCookie>
-			<App />
-		</AuthProvider>
-	);
+  return (
+    <AuthProvider projectId="my-project-id" sessionTokenViaCookie>
+      <App />
+    </AuthProvider>
+  );
 };
@@ -195,37 +311,317 @@ ```
 
-## Run a local example
+Note:
+The session token cookie is set as a [`Secure`](https://datatracker.ietf.org/doc/html/rfc6265#section-5.2.5) cookie. It will be sent only over HTTPS connections.
+In addition, some browsers (e.g. Safari) may not store `Secure` cookie if the hosted page is running on an HTTP protocol.
 
-There is a simple app that uses Descope React SDK, with two routes
+### Helper Functions
 
-- Home
-- Login
+You can also use the following functions to assist with various actions managing your JWT.
 
-In order to run this app locally, do the following steps:
+`getSessionToken()` - Get current session token.
+`getRefreshToken()` - Get current refresh token.
+`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.
+`getJwtPermissions(token = getSessionToken(), tenant = '')` - Fet current permissions from an existing session token. Provide tenant id for specific tenant permissions.
 
-- Clone this repository
-- Navigate to repository directory
-- Run `npm i`
-- Create a `.env` file with the following variables (or alternatively export them manually):
+### Refresh token lifecycle
 
-```env
-// .env
-# Your project id
-DESCOPE_PROJECT_ID=<project-id>
-# Flow id to run, e.g. sign-up-or-in
-DESCOPE_FLOW_ID=<flow-id>
-# Optional - Descope base url, e.g. http://localhost:8000
-DESCOPE_BASE_URL=<base-url>
-# Optional - Debug mode
-DESCOPE_DEBUG_MODE=<debug-mode>
-# Optional - Theme, can be "light", "dark" or "os" (Auto select based on the OS theme settings). Default is "light"
-DESCOPE_THEME=<theme>
-# Optional - Telemetry key provided by Descope Inc
-DESCOPE_TELEMETRY_KEY=<telemetry-key>
-# Optional - Step-Up flow id. If exists, The home page of a logged-in user will show a step-up button
+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` 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
+
+You can find an example react app in the [examples folder](./examples).
+
+### 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 DESCOPE_PROJECT_ID=<Project-ID>
+```
+
+Alternatively, put the environment variable in `.env` file in the project root directory.
+See bellow for an `.env` file template with more information.
+
+### Run Example
+
+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:
+
+```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                    |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------------------- |
+| 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                             |
+|                         |                                                                                                               |                                  |
+
+Example for `.env` file template:
+
+```
+# Your project ID
+DESCOPE_PROJECT_ID="<Project-ID>"
+# Login flow ID
+DESCOPE_FLOW_ID=""
+# Descope base URL
+DESCOPE_BASE_URL=""
+# Descope base static URL
+DESCOPE_BASE_STATIC_URL=""
+# Set flow theme to dark
+DESCOPE_THEME=dark
+# Set flow locale, default is browser's locale
+DESCOPE_LOCALE=""
+# Flow Redirect URL
+DESCOPE_REDIRECT_URL=""
+# Tenant ID
+DESCOPE_TENANT_ID=""
+# Enable debugger
+DESCOPE_DEBUG_MODE=true
+# Show step-up flow for logged in user
 DESCOPE_STEP_UP_FLOW_ID=step-up
+# Telemetry key
+DESCOPE_TELEMETRY_KEY=""
 ```
 
-- Run `npm run start`
-- Go to `http://localhost:3000/` and press the "Start Flow" button
+## Performance / Bundle Size
 
-Note: if you change env file (for example, change DESCOPE_PROJECT_ID), you need to rerun `npm run start`
+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
+
+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:[e-mail])
+
+## License
+
+The Descope SDK for React is licensed for use under the terms and conditions of the [MIT license Agreement](./LICENSE).

New alerts

Major refactor

Supply chain risk

Package 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

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This 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

Minified code

Quality

This 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

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2075004

increased by2239.69%

Number of package files

120

increased by1233.33%

Number of low license alerts

0

decreased by-100%

Lines of code

7299

increased by991.03%

Number of low maintenance alerts

0

decreased by-100%

Number of lines in readme file

616

increased by180%

Worsened metrics

Dependency count

12

increased by140%

Dev dependency count

65

increased by16.07%

Number of low quality alerts

19

increased by533.33%

Number of low supply chain risk alerts

73

increased byInfinity%

Number of medium supply chain risk alerts

4

increased byInfinity%

Dependency changes

• + Added@descope/access-key-management-widget@0.3.17

• + Added@descope/applications-portal-widget@0.2.20

• + Added@descope/audit-management-widget@0.2.21

• + Added@descope/core-js-sdk@2.33.6

• + Added@descope/role-management-widget@0.2.21

• + Added@descope/sdk-helpers@0.1.67

• + Added@descope/user-management-widget@0.6.16

• + Added@descope/user-profile-widget@0.2.17

• + Added@descope/web-js-sdk@1.23.9

• + Added@descope/access-key-management-widget@0.3.17(transitive)

• + Added@descope/applications-portal-widget@0.2.20(transitive)

• + Added@descope/audit-management-widget@0.2.21(transitive)

• + Added@descope/core-js-sdk@2.33.6(transitive)

• + Added@descope/escape-markdown@0.1.5(transitive)

• + Added@descope/role-management-widget@0.2.21(transitive)

• + Added@descope/sdk-component-drivers@0.2.50(transitive)

• + Added@descope/sdk-helpers@0.1.67(transitive)

• + Added@descope/sdk-mixins@0.6.8(transitive)

• + Added@descope/user-management-widget@0.6.16(transitive)

• + Added@descope/user-profile-widget@0.2.17(transitive)

• + Added@descope/web-component@3.32.11(transitive)

• + Added@descope/web-js-sdk@1.23.9(transitive)

• + Added@fingerprintjs/fingerprintjs-pro@3.11.6(transitive)

• + Added@reduxjs/toolkit@2.5.1(transitive)

• + Addedimmer@10.1.1(transitive)

• + Addedjs-cookie@3.0.5(transitive)

• + Addedjwt-decode@4.0.0(transitive)

• + Addedlibphonenumber-js@1.11.17(transitive)

• + Addedredux@5.0.1(transitive)

• + Addedredux-thunk@3.1.0(transitive)

• + Addedreselect@5.1.1(transitive)

• - Removedreact-router-dom@6.7.0

• - Removed@descope/core-js-sdk@0.0.41-alpha.51(transitive)

• - Removed@descope/web-component@0.1.0-alpha.42(transitive)

• - Removed@descope/web-js-sdk@0.1.0-alpha.29(transitive)

• - Removed@fingerprintjs/fingerprintjs-pro@3.8.1(transitive)

• - Removed@remix-run/router@1.3.0(transitive)

• - Removedjs-cookie@3.0.1(transitive)

• - Removedjwt-decode@3.1.2(transitive)

• - Removedlodash.get@4.4.2(transitive)

• - Removedreact-dom@19.0.0(transitive)

• - Removedreact-router@6.7.0(transitive)

• - Removedreact-router-dom@6.7.0(transitive)

• - Removedscheduler@0.25.0(transitive)

• Updated@descope/web-component@3.32.11