Merge pull request #21 from microsoft/u/bsap/demo/showUserName

Demo App: store and use user name to lookup consents

Author: joutka01

packages/demo/src/components/GetStarted.tsx

@@ -243,7 +243,7 @@ export default function GetStarted(): JSX.Element {
             .trim()
             .toLowerCase()
             .replace(/\s+/g, '.');
-          await login(subjectId);
+          await login({ id: subjectId, name: formData.name });
         } catch (err) {
           console.error('Login failed:', err);
           alert('Unable to login. Please contact support.');

packages/demo/src/components/Home.tsx

@@ -163,7 +163,7 @@ export default function Home(): JSX.Element {
               size="large"
               onClick={() => {
                 if (currentUser) {
-                  void navigate(`/profile/${currentUser.id}`);
+                  void navigate(`/profile/${currentUser.name}`);
                 } else {
                   void navigate('/get-started');
                 }

packages/demo/src/utils/AuthContext.tsx

@@ -9,6 +9,7 @@ import {
   type ReactNode,
 } from 'react';
 import type { ProfileData } from '@open-source-consent/ui';
+import type { BasicUserInfo } from './userManagement.js';
 import {
   getCurrentUserId,
   login as storeLogin,
@@ -19,7 +20,7 @@ import {
 interface AuthContextType {
   currentUser: ProfileData | null;
   isLoading: boolean;
-  login(subjectId: string): Promise<void>;
+  login(userInfo: BasicUserInfo): Promise<void>;
   logout(): void;
 }
 
@@ -81,10 +82,10 @@ export default function AuthProvider({
   }, [loadProfile]);
 
   const login = useCallback(
-    async (subjectId: string) => {
+    async (userInfo: BasicUserInfo) => {
       setIsLoading(true);
-      storeLogin(subjectId);
-      await loadProfile(subjectId);
+      storeLogin(userInfo);
+      await loadProfile(userInfo.id);
     },
     [loadProfile],
   );

packages/demo/src/utils/userManagement.ts

@@ -8,26 +8,38 @@ import type { ProfileData } from '@open-source-consent/ui';
  * This framework does not provide auth or user management.
  */
 
+export type BasicUserInfo = {
+  id: string;
+  name: string;
+};
+
 const USER_ID_STORAGE_KEY = 'currentUserId';
+const USER_NAME_STORAGE_KEY = 'currentUserName';
+
+function getCurrentUserName(): string | null {
+  return localStorage.getItem(USER_NAME_STORAGE_KEY);
+}
 
 export function getCurrentUserId(): string | null {
   return localStorage.getItem(USER_ID_STORAGE_KEY);
 }
 
-export function login(userId: string): void {
-  localStorage.setItem(USER_ID_STORAGE_KEY, userId);
+export function login(user: BasicUserInfo): void {
+  localStorage.setItem(USER_ID_STORAGE_KEY, user.id);
+  localStorage.setItem(USER_NAME_STORAGE_KEY, user.name);
 }
 
 export function logout(): void {
   localStorage.removeItem(USER_ID_STORAGE_KEY);
+  localStorage.removeItem(USER_NAME_STORAGE_KEY);
 }
 
 export async function fetchUserProfile(
   userId: string,
 ): Promise<ProfileData | null> {
   return {
     id: userId,
-    name: `${userId}`,
+    name: getCurrentUserName() || `${userId}`,
     email: `${userId.replace(/[^a-zA-Z0-9]/g, '-')}@example.com`,
     role: { id: 'self', label: 'Myself' },
     consents: [], // These are fetched from the API