added user-management-widget

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 = () => (
 	<div style={{ height: '100vh', position: 'relative' }}>
@@ -12,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',
@@ -25,10 +26,31 @@ 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="/login" element={<Login />} />
 			<Route path="/step-up" element={<StepUp />} />
 		</Route>

examples/app/Home.tsx

@@ -1,15 +1,20 @@
 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 +25,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>
+						User:{' '}
+						<span style={{ fontWeight: 'bold' }}>
+							{getUserDisplayName(user)}
+						</span>
+					</p>
+					<p>
+						{' '}
+						Roles:{' '}
+						<span style={{ fontWeight: 'bold' }}>{roles || 'No Roles'}</span>
+					</p>
+				</div>
+
+				<div>
+					<p>
+						<button
+							type="button"
+							id="logout-button"
+							onClick={onLogout}
+							style={{
+								display: 'block',
+								margin: '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>
-			{!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>
-					)}
-				</>
-			)}
+			<UserManagement tenant={process.env.DESCOPE_TENANT} />
 		</>
 	);
 };

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}