From 608c596b6278e611d538b390f2e80d36b861f360 Mon Sep 17 00:00:00 2001 From: Nir Gur Arie Date: Sun, 28 Jan 2024 22:11:17 +0200 Subject: [PATCH 1/8] added user-management-widget --- examples/app/App.tsx | 28 ++++++- examples/app/Home.tsx | 104 +++++++++++------------ examples/app/Login.tsx | 1 + package-lock.json | 129 +++++++++++++++++++++++++++-- package.json | 3 +- src/components/UsersManagement.tsx | 58 +++++++++++++ src/index.ts | 1 + src/types.ts | 15 ++++ tsconfig.json | 4 +- 9 files changed, 274 insertions(+), 69 deletions(-) create mode 100644 src/components/UsersManagement.tsx diff --git a/examples/app/App.tsx b/examples/app/App.tsx index e1ee3d71..32122606 100644 --- a/examples/app/App.tsx +++ b/examples/app/App.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { Outlet, Route, Routes } from 'react-router-dom'; +import { Outlet, Route, Routes, Navigate } from 'react-router-dom'; import Home from './Home'; import Login from './Login'; import StepUp from './StepUp'; +import { useSession } from '../../src'; const Layout = () => (
@@ -12,7 +13,7 @@ const Layout = () => ( margin: 'auto', border: '1px solid lightgray', padding: 20, - maxWidth: '400px', + // maxWidth: '400px', boxShadow: '13px 13px 20px #cbced1, -13px -13px 20px #fff', background: '#ecf0f3', position: 'relative', @@ -25,10 +26,31 @@ const Layout = () => (
); +const ProtectedRoute = ({ children }: { children: JSX.Element }) => { + const { isAuthenticated, isSessionLoading } = useSession(); + + if (isSessionLoading) { + return
Loading...
; + } + + if (!isAuthenticated) { + return ; + } + + return children; +}; + const App = () => ( }> - } /> + + + + } + /> } /> } /> diff --git a/examples/app/Home.tsx b/examples/app/Home.tsx index e75f8653..3995b5fc 100644 --- a/examples/app/Home.tsx +++ b/examples/app/Home.tsx @@ -1,15 +1,14 @@ import type { UserResponse } from '@descope/web-js-sdk'; import React, { useCallback, useMemo } from 'react'; import { Link } from 'react-router-dom'; -import { getJwtRoles, useDescope, useSession, useUser } from '../../src'; -import { fetchData } from './api'; +import { getJwtRoles, useDescope, useSession, useUser , UserManagement } from '../../src'; const getUserDisplayName = (user?: UserResponse) => user?.name || user?.loginIds?.[0] || ''; const Home = () => { // useSession retrieves authentication state, session loading status, and session token - const { isAuthenticated, isSessionLoading, sessionToken } = useSession(); + const { sessionToken } = useSession(); // useUser retrieves the logged in user information const { user } = useUser(); // useDescope retrieves Descope SDK for further operations related to authentication @@ -20,65 +19,60 @@ const Home = () => { sdk.logout(); }, [sdk]); - const onFetch = useCallback(async () => { - const data = await fetchData(); - alert(data); // eslint-disable-line no-alert - }, []); const roles = useMemo( - () => sessionToken && JSON.stringify(getJwtRoles(sessionToken) || []), + () => sessionToken && (getJwtRoles(sessionToken) || []).join(', '), [sessionToken] ); - if (isSessionLoading) return
Loading...
; return ( <> +
+
+

+ User:{' '} + + {getUserDisplayName(user)} + +

+

+ {' '} + Roles:{' '} + {roles || 'No Roles'} +

+
+ +
+

+ +

+

+ {process.env.DESCOPE_STEP_UP_FLOW_ID && ( + + Step Up + + )} +

+
+

Home

- {!isAuthenticated && ( - - Login - - )} - {isAuthenticated && ( - <> -
Hello {getUserDisplayName(user)}!
-
Roles: {roles}
- - - {process.env.DESCOPE_STEP_UP_FLOW_ID && ( - - Step Up - - )} - - )} + ); }; diff --git a/examples/app/Login.tsx b/examples/app/Login.tsx index 46f16920..305bdc18 100644 --- a/examples/app/Login.tsx +++ b/examples/app/Login.tsx @@ -39,6 +39,7 @@ const Login = () => { } return ( <> +

Login

= 4" } }, + "node_modules/immer": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.3.tgz", + "integrity": "sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/immer" + } + }, "node_modules/immutable": { "version": "3.8.2", "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz", @@ -10687,7 +10734,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "devOptional": true }, "node_modules/js-yaml": { "version": "3.14.1", @@ -11492,7 +11539,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, + "devOptional": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -11799,7 +11846,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, + "devOptional": true, "engines": { "node": ">=0.10.0" } @@ -12586,7 +12633,7 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, + "devOptional": true, "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -12714,6 +12761,19 @@ "node": ">=8" } }, + "node_modules/redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + }, + "node_modules/redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "peerDependencies": { + "redux": "^5.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -12867,6 +12927,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "node_modules/reselect": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.0.1.tgz", + "integrity": "sha512-D72j2ubjgHpvuCiORWkOUxndHJrxDaSolheiz5CO+roz8ka97/4msh2E8F5qay4GawR5vzBt5MkbDHT+Rdy/Wg==" + }, "node_modules/resolve": { "version": "1.22.4", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz", @@ -16588,6 +16653,33 @@ "lodash.get": "4.4.2" } }, + "@descope/user-management-widget": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.1.tgz", + "integrity": "sha512-DPvg1sc5NTZZuR7E7f4SgBHzvDCWJh0thVlSR+U5PH1X/bv+G/LdGjjwRFuCMF8N7gETkX6dov00ZSKYwwk9VQ==", + "requires": { + "@descope/web-js-sdk": "1.9.2", + "@reduxjs/toolkit": "^2.0.1", + "immer": "^10.0.3", + "redux": "5.0.1", + "redux-thunk": "3.1.0", + "reselect": "5.0.1", + "tslib": "2.6.2" + }, + "dependencies": { + "@reduxjs/toolkit": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.1.0.tgz", + "integrity": "sha512-nfJ/b4ZhzUevQ1ZPKjlDL6CMYxO4o7ZL7OSsvSOxzT/EN11LsBDgTqP7aedHtBrFSVoK7oTP1SbMWUwGb30NLg==", + "requires": { + "immer": "^10.0.3", + "redux": "^5.0.1", + "redux-thunk": "^3.1.0", + "reselect": "^5.0.1" + } + } + } + }, "@descope/web-component": { "version": "3.7.3", "resolved": "https://registry.npmjs.org/@descope/web-component/-/web-component-3.7.3.tgz", @@ -21238,6 +21330,11 @@ "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", "dev": true }, + "immer": { + "version": "10.0.3", + "resolved": "https://registry.npmjs.org/immer/-/immer-10.0.3.tgz", + "integrity": "sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==" + }, "immutable": { "version": "3.8.2", "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz", @@ -23104,7 +23201,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "devOptional": true }, "js-yaml": { "version": "3.14.1", @@ -23711,7 +23808,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, + "devOptional": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -23960,7 +24057,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true + "devOptional": true }, "object-inspect": { "version": "1.12.3", @@ -24531,7 +24628,7 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, + "devOptional": true, "requires": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1" @@ -24623,6 +24720,17 @@ "strip-indent": "^3.0.0" } }, + "redux": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", + "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==" + }, + "redux-thunk": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz", + "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==", + "requires": {} + }, "reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -24739,6 +24847,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "reselect": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.0.1.tgz", + "integrity": "sha512-D72j2ubjgHpvuCiORWkOUxndHJrxDaSolheiz5CO+roz8ka97/4msh2E8F5qay4GawR5vzBt5MkbDHT+Rdy/Wg==" + }, "resolve": { "version": "1.22.4", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz", diff --git a/package.json b/package.json index 97a4e53c..5007e39e 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,8 @@ ] }, "dependencies": { - "@descope/web-component": "3.7.3" + "@descope/web-component": "3.7.3", + "@descope/user-management-widget": "0.0.1" }, "devDependencies": { "@babel/core": "7.23.0", diff --git a/src/components/UsersManagement.tsx b/src/components/UsersManagement.tsx new file mode 100644 index 00000000..2e984bb5 --- /dev/null +++ b/src/components/UsersManagement.tsx @@ -0,0 +1,58 @@ +import React, { + lazy, + Suspense, + useEffect, + useImperativeHandle, + useState +} from 'react'; +import Context from '../hooks/Context'; +import { UserManagementProps } from '../types'; + +// web-component code uses browser API, but can be used in SSR apps, hence the lazy loading +const UserManagementWC = lazy(async () => { + await import('@descope/user-management-widget'); + + return { + default: ({ projectId, baseUrl, innerRef, tenant, theme, debug }) => ( + + ) + }; +}); + +const UserManagement = React.forwardRef( + ({ logger, tenant, theme, debug }, ref) => { + const [innerRef, setInnerRef] = useState(null); + + useImperativeHandle(ref, () => innerRef); + + const { projectId, baseUrl } = React.useContext(Context); + + useEffect(() => { + if (innerRef && logger) { + innerRef.logger = logger; + } + }, [innerRef, logger]); + + return ( + + + + ); + } +); + +export default UserManagement; diff --git a/src/index.ts b/src/index.ts index 6670e5c6..5eb8a9c2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,6 +6,7 @@ export { SignUpOrInFlow } from './components/DefaultFlows'; export { default as Descope } from './components/Descope'; +export { default as UserManagement } from './components/UsersManagement'; export { default as useDescope } from './hooks/useDescope'; export { default as useSession } from './hooks/useSession'; export { default as useUser } from './hooks/useUser'; diff --git a/src/types.ts b/src/types.ts index 654c9e7b..ac642c8d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -4,6 +4,7 @@ import type { ThemeOptions } from '@descope/web-component'; import DescopeWc from '@descope/web-component'; +import UserManagementWidget from '@descope/user-management-widget'; import type { UserResponse } from '@descope/web-js-sdk'; import React, { DOMAttributes } from 'react'; import createSdk from './sdk'; @@ -12,6 +13,7 @@ declare global { namespace JSX { interface IntrinsicElements { ['descope-wc']: DescopeCustomElement; + ['descope-user-management-widget']: UserManagementCustomElement; } } } @@ -37,6 +39,10 @@ export type DescopeCustomElement = CustomElement< 'success' | 'error' >; +export type UserManagementCustomElement = CustomElement< + typeof UserManagementWidget & UserManagementProps +>; + export interface IContext { fetchUser: () => void; user: User; @@ -73,5 +79,14 @@ export type DescopeProps = { client?: Record; }; +export type UserManagementProps = { + logger?: ILogger; + tenant: string; + // If theme is not provided - the OS theme will be used + theme?: ThemeOptions; + // If locale is not provided - the browser's locale will be used + debug?: boolean; +}; + export type { ILogger }; export type DefaultFlowProps = Omit; diff --git a/tsconfig.json b/tsconfig.json index bc297d9d..ec08522f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,8 +1,8 @@ { "compilerOptions": { "rootDir": "./", - "target": "es2020", - "lib": ["dom", "dom.iterable", "esnext"], + "target": "ES2017", + "lib": ["dom", "dom.iterable"], "allowJs": false, "skipLibCheck": true, "strict": false, From 9f9db840d918f518198c73df0c5c4fbebe92f849 Mon Sep 17 00:00:00 2001 From: Nir Gur Arie Date: Sun, 28 Jan 2024 22:13:39 +0200 Subject: [PATCH 2/8] width --- examples/app/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/app/App.tsx b/examples/app/App.tsx index 32122606..f16c9403 100644 --- a/examples/app/App.tsx +++ b/examples/app/App.tsx @@ -13,7 +13,7 @@ const Layout = () => ( margin: 'auto', border: '1px solid lightgray', padding: 20, - // maxWidth: '400px', + maxWidth: '600px', boxShadow: '13px 13px 20px #cbced1, -13px -13px 20px #fff', background: '#ecf0f3', position: 'relative', From 190f833d774caec6a272f6fb629734e672fd1d6f Mon Sep 17 00:00:00 2001 From: Nir Gur Arie Date: Sun, 28 Jan 2024 22:15:02 +0200 Subject: [PATCH 3/8] format --- examples/app/Home.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/examples/app/Home.tsx b/examples/app/Home.tsx index 3995b5fc..8143a5b9 100644 --- a/examples/app/Home.tsx +++ b/examples/app/Home.tsx @@ -1,7 +1,13 @@ import type { UserResponse } from '@descope/web-js-sdk'; import React, { useCallback, useMemo } from 'react'; import { Link } from 'react-router-dom'; -import { getJwtRoles, useDescope, useSession, useUser , UserManagement } from '../../src'; +import { + getJwtRoles, + useDescope, + useSession, + useUser, + UserManagement +} from '../../src'; const getUserDisplayName = (user?: UserResponse) => user?.name || user?.loginIds?.[0] || ''; From 2c4ee0ada774c296c66d79d8c1ac257a935675e0 Mon Sep 17 00:00:00 2001 From: Nir Gur Arie Date: Sun, 28 Jan 2024 22:20:51 +0200 Subject: [PATCH 4/8] test --- test/components/App.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/test/components/App.test.tsx b/test/components/App.test.tsx index 8003aa0c..47baf0c9 100644 --- a/test/components/App.test.tsx +++ b/test/components/App.test.tsx @@ -14,6 +14,7 @@ Object.defineProperty(global, 'Response', { }); jest.mock('@descope/web-component', () => ({ default: {} })); +jest.mock('@descope/user-management-widget', () => ({ default: {} })); jest.mock('@descope/web-js-sdk', () => { const sdk = { From e0d0b5bcd13651ba233b07137d3b9809aa81c396 Mon Sep 17 00:00:00 2001 From: Nir Gur Arie Date: Mon, 29 Jan 2024 18:59:58 +0200 Subject: [PATCH 5/8] update UMW --- package-lock.json | 40 +++++++++++++++++++++++++++++++--------- package.json | 2 +- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6df1b6d3..f03a2b3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "2.0.5", "license": "MIT", "dependencies": { - "@descope/user-management-widget": "0.0.1", + "@descope/user-management-widget": "0.0.3", "@descope/web-component": "3.7.3" }, "devDependencies": { @@ -1968,11 +1968,11 @@ } }, "node_modules/@descope/user-management-widget": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.1.tgz", - "integrity": "sha512-DPvg1sc5NTZZuR7E7f4SgBHzvDCWJh0thVlSR+U5PH1X/bv+G/LdGjjwRFuCMF8N7gETkX6dov00ZSKYwwk9VQ==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.3.tgz", + "integrity": "sha512-2BsomRgIiKFYs+ZAGbeie/FMXbah+/lyXFK99DM9vHbzkb/39PJLPBh7pvvVuX3/kNHdc7s7cvJz33YgyLq6kQ==", "dependencies": { - "@descope/web-js-sdk": "1.9.2", + "@descope/web-js-sdk": "1.9.3", "@reduxjs/toolkit": "^2.0.1", "immer": "^10.0.3", "redux": "5.0.1", @@ -1981,6 +1981,17 @@ "tslib": "2.6.2" } }, + "node_modules/@descope/user-management-widget/node_modules/@descope/web-js-sdk": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@descope/web-js-sdk/-/web-js-sdk-1.9.3.tgz", + "integrity": "sha512-ST9kl7g4qCyqPWgwYnHjNIsyJ2psQ40bvGGvBZ/vdfzRYSmVKnNovEZE5QgN9v6KjJCR1ks5wOmGL+D/QFzuSQ==", + "dependencies": { + "@descope/core-js-sdk": "2.8.2", + "@fingerprintjs/fingerprintjs-pro": "3.8.5", + "js-cookie": "3.0.5", + "tslib": "2.6.2" + } + }, "node_modules/@descope/user-management-widget/node_modules/@reduxjs/toolkit": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.1.0.tgz", @@ -16654,11 +16665,11 @@ } }, "@descope/user-management-widget": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.1.tgz", - "integrity": "sha512-DPvg1sc5NTZZuR7E7f4SgBHzvDCWJh0thVlSR+U5PH1X/bv+G/LdGjjwRFuCMF8N7gETkX6dov00ZSKYwwk9VQ==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.3.tgz", + "integrity": "sha512-2BsomRgIiKFYs+ZAGbeie/FMXbah+/lyXFK99DM9vHbzkb/39PJLPBh7pvvVuX3/kNHdc7s7cvJz33YgyLq6kQ==", "requires": { - "@descope/web-js-sdk": "1.9.2", + "@descope/web-js-sdk": "1.9.3", "@reduxjs/toolkit": "^2.0.1", "immer": "^10.0.3", "redux": "5.0.1", @@ -16667,6 +16678,17 @@ "tslib": "2.6.2" }, "dependencies": { + "@descope/web-js-sdk": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/@descope/web-js-sdk/-/web-js-sdk-1.9.3.tgz", + "integrity": "sha512-ST9kl7g4qCyqPWgwYnHjNIsyJ2psQ40bvGGvBZ/vdfzRYSmVKnNovEZE5QgN9v6KjJCR1ks5wOmGL+D/QFzuSQ==", + "requires": { + "@descope/core-js-sdk": "2.8.2", + "@fingerprintjs/fingerprintjs-pro": "3.8.5", + "js-cookie": "3.0.5", + "tslib": "2.6.2" + } + }, "@reduxjs/toolkit": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.1.0.tgz", diff --git a/package.json b/package.json index 5007e39e..cda04c4d 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ }, "dependencies": { "@descope/web-component": "3.7.3", - "@descope/user-management-widget": "0.0.1" + "@descope/user-management-widget": "0.0.3" }, "devDependencies": { "@babel/core": "7.23.0", From 7f8e428a66f1be95666de652b441d72c2794d849 Mon Sep 17 00:00:00 2001 From: Nir Gur Arie Date: Mon, 29 Jan 2024 19:46:44 +0200 Subject: [PATCH 6/8] manage users on a different page --- examples/app/App.tsx | 9 +++++ examples/app/Home.tsx | 40 +++++++++------------ examples/app/ManageUsers.tsx | 68 ++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 23 deletions(-) create mode 100644 examples/app/ManageUsers.tsx diff --git a/examples/app/App.tsx b/examples/app/App.tsx index f16c9403..8550f5f7 100644 --- a/examples/app/App.tsx +++ b/examples/app/App.tsx @@ -4,6 +4,7 @@ import Home from './Home'; import Login from './Login'; import StepUp from './StepUp'; import { useSession } from '../../src'; +import ManageUsers from './ManageUsers'; const Layout = () => (
@@ -51,6 +52,14 @@ const App = () => ( } /> + + + + } + /> } /> } /> diff --git a/examples/app/Home.tsx b/examples/app/Home.tsx index 8143a5b9..0460ddeb 100644 --- a/examples/app/Home.tsx +++ b/examples/app/Home.tsx @@ -1,13 +1,7 @@ import type { UserResponse } from '@descope/web-js-sdk'; import React, { useCallback, useMemo } from 'react'; import { Link } from 'react-router-dom'; -import { - getJwtRoles, - useDescope, - useSession, - useUser, - UserManagement -} from '../../src'; +import { getJwtRoles, useDescope, useSession, useUser } from '../../src'; const getUserDisplayName = (user?: UserResponse) => user?.name || user?.loginIds?.[0] || ''; @@ -41,19 +35,24 @@ const Home = () => { >

- User:{' '} - - {getUserDisplayName(user)} - + Manage Users

- {' '} - Roles:{' '} - {roles || 'No Roles'} + {process.env.DESCOPE_STEP_UP_FLOW_ID && ( + + Step Up + + )}

+

+ User:{' '} + + {getUserDisplayName(user)} + +

-

- {process.env.DESCOPE_STEP_UP_FLOW_ID && ( - - Step Up - - )} -

Home

- +

+ Roles: {roles || 'No Roles'} +

); }; diff --git a/examples/app/ManageUsers.tsx b/examples/app/ManageUsers.tsx new file mode 100644 index 00000000..52c0d20f --- /dev/null +++ b/examples/app/ManageUsers.tsx @@ -0,0 +1,68 @@ +import type { UserResponse } from '@descope/web-js-sdk'; +import React, { useCallback } from 'react'; +import { Link } from 'react-router-dom'; +import { useDescope, useUser, UserManagement } from '../../src'; + +const getUserDisplayName = (user?: UserResponse) => + user?.name || user?.loginIds?.[0] || ''; + +const ManageUsers = () => { + // useUser retrieves the logged in user information + const { user } = useUser(); + // useDescope retrieves Descope SDK for further operations related to authentication + // such as logout + const sdk = useDescope(); + + const onLogout = useCallback(() => { + sdk.logout(); + }, [sdk]); + + return ( + <> +
+

+ Home +

+
+

+ User:{' '} + + {getUserDisplayName(user)} + +

+

+ +

+

+ {process.env.DESCOPE_STEP_UP_FLOW_ID && ( + + Step Up + + )} +

+
+
+

Home

+ + + ); +}; + +export default ManageUsers; From d85ac87c5019576309e7670af52e63509e05a8f9 Mon Sep 17 00:00:00 2001 From: Nir Gur Arie Date: Mon, 29 Jan 2024 20:21:33 +0200 Subject: [PATCH 7/8] bump --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index f03a2b3d..348dea65 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "2.0.5", "license": "MIT", "dependencies": { - "@descope/user-management-widget": "0.0.3", + "@descope/user-management-widget": "0.0.4", "@descope/web-component": "3.7.3" }, "devDependencies": { @@ -1968,9 +1968,9 @@ } }, "node_modules/@descope/user-management-widget": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.3.tgz", - "integrity": "sha512-2BsomRgIiKFYs+ZAGbeie/FMXbah+/lyXFK99DM9vHbzkb/39PJLPBh7pvvVuX3/kNHdc7s7cvJz33YgyLq6kQ==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.4.tgz", + "integrity": "sha512-SlPskKNtIlGY9y7O5qiyictBzSdupG4Hm6MYRqWxmKX4s6wULtm90g8yoPeOI8eujxnJTTX3Vp5xrVtw2DX4kA==", "dependencies": { "@descope/web-js-sdk": "1.9.3", "@reduxjs/toolkit": "^2.0.1", @@ -16665,9 +16665,9 @@ } }, "@descope/user-management-widget": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.3.tgz", - "integrity": "sha512-2BsomRgIiKFYs+ZAGbeie/FMXbah+/lyXFK99DM9vHbzkb/39PJLPBh7pvvVuX3/kNHdc7s7cvJz33YgyLq6kQ==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.4.tgz", + "integrity": "sha512-SlPskKNtIlGY9y7O5qiyictBzSdupG4Hm6MYRqWxmKX4s6wULtm90g8yoPeOI8eujxnJTTX3Vp5xrVtw2DX4kA==", "requires": { "@descope/web-js-sdk": "1.9.3", "@reduxjs/toolkit": "^2.0.1", diff --git a/package.json b/package.json index cda04c4d..7c4f673b 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ }, "dependencies": { "@descope/web-component": "3.7.3", - "@descope/user-management-widget": "0.0.3" + "@descope/user-management-widget": "0.0.4" }, "devDependencies": { "@babel/core": "7.23.0", From 7a4173f00ee7adb1d8d2996ff4dd08ee8098b361 Mon Sep 17 00:00:00 2001 From: Nir Gur Arie Date: Wed, 31 Jan 2024 14:01:13 +0200 Subject: [PATCH 8/8] bump --- package-lock.json | 52 +++++++++++++++++++++++++++++++---------------- package.json | 2 +- 2 files changed, 36 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index 348dea65..25039cce 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,7 @@ "version": "2.0.5", "license": "MIT", "dependencies": { - "@descope/user-management-widget": "0.0.4", + "@descope/user-management-widget": "0.0.6", "@descope/web-component": "3.7.3" }, "devDependencies": { @@ -1968,11 +1968,11 @@ } }, "node_modules/@descope/user-management-widget": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.4.tgz", - "integrity": "sha512-SlPskKNtIlGY9y7O5qiyictBzSdupG4Hm6MYRqWxmKX4s6wULtm90g8yoPeOI8eujxnJTTX3Vp5xrVtw2DX4kA==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.6.tgz", + "integrity": "sha512-+1HBI2tTz7HKubjNLwNIqbNylLjJ9dWLl8YipHeREoptN3/7zegCN1KGKD3+Q3PCHadPpsVOmXNqc366Ojluzg==", "dependencies": { - "@descope/web-js-sdk": "1.9.3", + "@descope/web-js-sdk": "1.9.4", "@reduxjs/toolkit": "^2.0.1", "immer": "^10.0.3", "redux": "5.0.1", @@ -1981,12 +1981,21 @@ "tslib": "2.6.2" } }, + "node_modules/@descope/user-management-widget/node_modules/@descope/core-js-sdk": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@descope/core-js-sdk/-/core-js-sdk-2.9.0.tgz", + "integrity": "sha512-yZZIKRRyvLl/hpdDg1LPgZghfj4klkUyILTERWlBZh9vt8bIBzOqFrqkNcfDfVhxts15dYwlPMykQG8ssQ/Unw==", + "dependencies": { + "jwt-decode": "3.1.2", + "lodash.get": "4.4.2" + } + }, "node_modules/@descope/user-management-widget/node_modules/@descope/web-js-sdk": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/@descope/web-js-sdk/-/web-js-sdk-1.9.3.tgz", - "integrity": "sha512-ST9kl7g4qCyqPWgwYnHjNIsyJ2psQ40bvGGvBZ/vdfzRYSmVKnNovEZE5QgN9v6KjJCR1ks5wOmGL+D/QFzuSQ==", + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/@descope/web-js-sdk/-/web-js-sdk-1.9.4.tgz", + "integrity": "sha512-woYrRJM6thoP0ZwiH6JCmchuo7kuSCCh/dLQVcKmM05hvvg7sVAqv1RM8HnFeLC2Mmyk8+vz92maVZ6WECVFOg==", "dependencies": { - "@descope/core-js-sdk": "2.8.2", + "@descope/core-js-sdk": "2.9.0", "@fingerprintjs/fingerprintjs-pro": "3.8.5", "js-cookie": "3.0.5", "tslib": "2.6.2" @@ -16665,11 +16674,11 @@ } }, "@descope/user-management-widget": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.4.tgz", - "integrity": "sha512-SlPskKNtIlGY9y7O5qiyictBzSdupG4Hm6MYRqWxmKX4s6wULtm90g8yoPeOI8eujxnJTTX3Vp5xrVtw2DX4kA==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@descope/user-management-widget/-/user-management-widget-0.0.6.tgz", + "integrity": "sha512-+1HBI2tTz7HKubjNLwNIqbNylLjJ9dWLl8YipHeREoptN3/7zegCN1KGKD3+Q3PCHadPpsVOmXNqc366Ojluzg==", "requires": { - "@descope/web-js-sdk": "1.9.3", + "@descope/web-js-sdk": "1.9.4", "@reduxjs/toolkit": "^2.0.1", "immer": "^10.0.3", "redux": "5.0.1", @@ -16678,12 +16687,21 @@ "tslib": "2.6.2" }, "dependencies": { + "@descope/core-js-sdk": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/@descope/core-js-sdk/-/core-js-sdk-2.9.0.tgz", + "integrity": "sha512-yZZIKRRyvLl/hpdDg1LPgZghfj4klkUyILTERWlBZh9vt8bIBzOqFrqkNcfDfVhxts15dYwlPMykQG8ssQ/Unw==", + "requires": { + "jwt-decode": "3.1.2", + "lodash.get": "4.4.2" + } + }, "@descope/web-js-sdk": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/@descope/web-js-sdk/-/web-js-sdk-1.9.3.tgz", - "integrity": "sha512-ST9kl7g4qCyqPWgwYnHjNIsyJ2psQ40bvGGvBZ/vdfzRYSmVKnNovEZE5QgN9v6KjJCR1ks5wOmGL+D/QFzuSQ==", + "version": "1.9.4", + "resolved": "https://registry.npmjs.org/@descope/web-js-sdk/-/web-js-sdk-1.9.4.tgz", + "integrity": "sha512-woYrRJM6thoP0ZwiH6JCmchuo7kuSCCh/dLQVcKmM05hvvg7sVAqv1RM8HnFeLC2Mmyk8+vz92maVZ6WECVFOg==", "requires": { - "@descope/core-js-sdk": "2.8.2", + "@descope/core-js-sdk": "2.9.0", "@fingerprintjs/fingerprintjs-pro": "3.8.5", "js-cookie": "3.0.5", "tslib": "2.6.2" diff --git a/package.json b/package.json index 7c4f673b..d62c8eeb 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ }, "dependencies": { "@descope/web-component": "3.7.3", - "@descope/user-management-widget": "0.0.4" + "@descope/user-management-widget": "0.0.6" }, "devDependencies": { "@babel/core": "7.23.0",