added user-management-widget

examples/app/App.tsx

@@ -1,8 +1,10 @@
 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';
+import ManageUsers from './ManageUsers';
 
 const Layout = () => (
 	<div style={{ height: '100vh', position: 'relative' }}>
@@ -12,7 +14,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',
@@ -25,10 +27,39 @@ const Layout = () => (
 	</div>
 );
 
+const ProtectedRoute = ({ children }: { children: JSX.Element }) => {
+	const { isAuthenticated, isSessionLoading } = useSession();
+
+	if (isSessionLoading) {
+		return <div>Loading...</div>;
+	}
+
+	if (!isAuthenticated) {
+		return <Navigate to="/login" replace />;
+	}
+
+	return children;
+};
+
 const App = () => (
 	<Routes>
 		<Route element={<Layout />}>
-			<Route index element={<Home />} />
+			<Route
+				index
+				element={
+					<ProtectedRoute>
+						<Home />
+					</ProtectedRoute>
+				}
+			/>
+			<Route
+				path="/user-management"
+				element={
+					<ProtectedRoute>
+						<ManageUsers />
+					</ProtectedRoute>
+				}
+			/>
 			<Route path="/login" element={<Login />} />
 			<Route path="/step-up" element={<StepUp />} />
 		</Route>

examples/app/Home.tsx

@@ -2,14 +2,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 } from '../../src';
-import { fetchData } from './api';
 
 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 <div>Loading...</div>;
 	return (
 		<>
+			<header
+				style={{
+					borderBottom: '1px solid gray',
+					display: 'flex',
+					justifyContent: 'space-between'
+				}}
+			>
+				<div>
+					<p>
+						<a href="/user-management">Manage Users</a>
+					</p>
+					<p>
+						{process.env.DESCOPE_STEP_UP_FLOW_ID && (
+							<Link id="step-up-button" to="/step-up">
+								Step Up
+							</Link>
+						)}
+					</p>
+				</div>
+
+				<div>
+					<p>
+						User:{' '}
+						<span style={{ fontWeight: 'bold' }}>
+							{getUserDisplayName(user)}
+						</span>
+					</p>
+					<p>
+						<button
+							type="button"
+							id="logout-button"
+							onClick={onLogout}
+							style={{
+								display: 'block',
+								marginLeft: 'auto',
+								padding: 5
+							}}
+						>
+							Logout
+						</button>
+					</p>
+				</div>
+			</header>
 			<h2>Home</h2>
-			{!isAuthenticated && (
-				<Link id="login-button" to="/login">
-					Login
-				</Link>
-			)}
-			{isAuthenticated && (
-				<>
-					<div className="username"> Hello {getUserDisplayName(user)}!</div>
-					<div className="username"> Roles: {roles}</div>
-					<button
-						type="button"
-						id="logout-button"
-						onClick={onLogout}
-						style={{
-							display: 'block',
-							margin: 'auto',
-							background: 'none',
-							border: 'none',
-							color: 'blue',
-							padding: 5
-						}}
-					>
-						Logout
-					</button>
-					<button
-						type="button"
-						id="fetch-button"
-						onClick={onFetch}
-						style={{
-							display: 'block',
-							margin: 'auto',
-							background: 'none',
-							border: 'none',
-							color: 'blue',
-							padding: 5
-						}}
-					>
-						Fetch Fact
-					</button>
-					{process.env.DESCOPE_STEP_UP_FLOW_ID && (
-						<Link id="step-up-button" to="/step-up">
-							Step Up
-						</Link>
-					)}
-				</>
-			)}
+			<p>
+				Roles: <span style={{ fontWeight: 'bold' }}>{roles || 'No Roles'}</span>
+			</p>
 		</>
 	);
 };

examples/app/Login.tsx

@@ -39,6 +39,7 @@ const Login = () => {
 	}
 	return (
 		<>
+			<h2>Login</h2>
 			<Descope
 				flowId={process.env.DESCOPE_FLOW_ID || 'sign-up-or-in'}
 				onSuccess={onSuccess}

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 (
+		<>
+			<header
+				style={{
+					borderBottom: '1px solid gray',
+					display: 'flex',
+					justifyContent: 'space-between'
+				}}
+			>
+				<p>
+					<a href="/">Home</a>
+				</p>
+				<div>
+					<p>
+						User:{' '}
+						<span style={{ fontWeight: 'bold' }}>
+							{getUserDisplayName(user)}
+						</span>
+					</p>
+					<p>
+						<button
+							type="button"
+							id="logout-button"
+							onClick={onLogout}
+							style={{
+								display: 'block',
+								marginLeft: 'auto',
+								padding: 5
+							}}
+						>
+							Logout
+						</button>
+					</p>
+					<p>
+						{process.env.DESCOPE_STEP_UP_FLOW_ID && (
+							<Link id="step-up-button" to="/step-up">
+								Step Up
+							</Link>
+						)}
+					</p>
+				</div>
+			</header>
+			<h2>Home</h2>
+			<UserManagement tenant={process.env.DESCOPE_TENANT} />
+		</>
+	);
+};
+
+export default ManageUsers;