update user info from login

Author: Fr4nc3

src/frontend_react/src/api/config.tsx

@@ -1,17 +1,19 @@
 // src/config.js
 
-import { UserInfo } from "@/models";
+import { UserInfo, claim } from "@/models";
+
 
 declare global {
     interface Window {
         appConfig?: Record<string, any>;
         activeUserId?: string;
-        userInfo?: UserInfo[];
+        userInfo?: UserInfo;
     }
 }
 
 export let API_URL: string | null = null;
 export let USER_ID: string | null = null;
+export let USER_INFO: UserInfo | null = null;
 
 export let config = {
     API_URL: "http://localhost:8000/api",
@@ -23,7 +25,12 @@ export function setApiUrl(url: string | null) {
         API_URL = url.includes('/api') ? url : `${url}/api`;
     }
 }
-
+export function setUserInfoGlobal(userInfo: UserInfo | null) {
+    if (userInfo) {
+        USER_ID = userInfo.user_id || null;
+        USER_INFO = userInfo;
+    }
+}
 export function setEnvData(configData: Record<string, any>) {
     if (configData) {
         config.API_URL = configData.API_URL || "";
@@ -41,7 +48,7 @@ export function getConfigData() {
 
     return { ...config };
 }
-export async function getUserInfo(): Promise<UserInfo[]> {
+export async function getUserInfo(): Promise<UserInfo> {
     try {
         const response = await fetch("/.auth/me");
         console.log("Fetching user info from: ", "/.auth/me");
@@ -50,12 +57,25 @@ export async function getUserInfo(): Promise<UserInfo[]> {
             console.log(
                 "No identity provider found. Access to chat will be blocked."
             );
-            return [];
+            return {} as UserInfo;
         }
         const payload = await response.json();
-        return payload;
+        console.log("User info payload: ", payload[0]);
+        const userInfo: UserInfo = {
+            access_token: payload[0].access_token || "",
+            expires_on: payload[0].expires_on || "",
+            id_token: payload[0].id_token || "",
+            provider_name: payload[0].provider_name || "",
+            user_claims: payload[0].user_claims || [],
+            user_email: payload[0].user_id || "",
+            user_first_last_name: payload[0].user_claims?.find((claim: claim) => claim.typ === 'name')?.val || "",
+            user_id: payload[0].user_claims?.find((claim: claim) => claim.typ === 'http://schemas.microsoft.com/identity/claims/objectidentifier')?.val || '',
+        };
+        console.log("User info: ", userInfo);
+        return userInfo;
     } catch (e) {
-        return [];
+        console.error("Error fetching user info: ", e);
+        return {} as UserInfo;
     }
 }
 export function getApiUrl() {
@@ -73,9 +93,27 @@ export function getApiUrl() {
 
     return API_URL;
 }
+export function getUserInfoGlobal() {
+    if (!USER_INFO) {
+        // Check if window.userInfo exists
+        if (window.userInfo) {
+            setUserInfoGlobal(window.userInfo);
+        }
+    }
+
+    if (!USER_INFO) {
+        console.info('User info not yet configured');
+        return null;
+    }
+
+    return USER_INFO;
+}
 
 export function getUserId(): string {
-    // USER_ID = window.userInfo && window.userInfo[0] && window.userInfo[0].user_id ? window.userInfo[0].user_id : null;
+    // USER_ID = getUserInfoGlobal()?.user_id || null;
+    if (!USER_ID) {
+        USER_ID = getUserInfoGlobal()?.user_id || null;
+    }
     const userId = USER_ID ?? "00000000-0000-0000-0000-000000000000";
     return userId;
 }

src/frontend_react/src/auth/index.ts

@@ -16,14 +16,15 @@ import {
 import TaskList from "./TaskList";
 import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import { PlanPanelLefProps, PlanWithSteps, Task } from "@/models";
+import { PlanPanelLefProps, PlanWithSteps, Task, UserInfo } from "@/models";
 import { apiService } from "@/api";
 import { TaskService } from "@/services";
 import MsftColor from "@/coral/imports/MsftColor";
 import ContosoLogo from "../../coral/imports/ContosoLogo";
 import "../../styles/PlanPanelLeft.css";
 import PanelFooter from "@/coral/components/Panels/PanelFooter";
 import PanelUserCard from "../../coral/components/Panels/UserCard";
+import { getUserInfoGlobal } from "@/api/config";
 
 const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
   const { dispatchToast } = useToastController("toast");
@@ -35,7 +36,7 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
   const [plans, setPlans] = useState<PlanWithSteps[] | null>(null);
   const [plansLoading, setPlansLoading] = useState<boolean>(false);
   const [plansError, setPlansError] = useState<Error | null>(null);
-
+  const [userInfo, setUserInfo] = useState<UserInfo | null>(getUserInfoGlobal());
   // Fetch plans
   const loadPlansData = useCallback(async (forceRefresh = false) => {
     try {
@@ -123,15 +124,13 @@ const PlanPanelLeft: React.FC<PlanPanelLefProps> = ({ onNewTaskButton }) => {
         />
 
         <PanelFooter>
-          <PanelUserCard
-            name="Pepper Hayuki"
-            alias="[email protected]"
-            // image={{ src: "https://fabricweb.azureedge.net/fabric-website/assets/images/avatar/KatriAthokas.jpg" }}
-            // shape="square"
-            // badge={{ status: 'available' }}
-            // color="colorful"
-            size={32} // Default=32
-          />
+          {userInfo && (
+            <PanelUserCard
+              name={userInfo.user_first_last_name || ""}
+              alias={userInfo.user_email || ""}
+              size={32} // Default=32
+            />
+          )}
         </PanelFooter>
       </PanelLeft>
     </div>

src/frontend_react/src/components/content/PlanPanelLeft.tsx

@@ -4,15 +4,14 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { FluentProvider, teamsLightTheme, teamsDarkTheme } from "@fluentui/react-components";
-import { setEnvData, setApiUrl, config as defaultConfig, toBoolean, getUserInfo } from './api/config';
+import { setEnvData, setApiUrl, config as defaultConfig, toBoolean, getUserInfo, setUserInfoGlobal } from './api/config';
 import { UserInfo } from './models';
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
 
 const AppWrapper = () => {
   // State to store the current theme
   const [isConfigLoaded, setIsConfigLoaded] = useState(false);
   const [isUserInfoLoaded, setIsUserInfoLoaded] = useState(false);
-  const [userInfo, setUserInfo] = useState<UserInfo[] | null>(null);
   const [isDarkMode, setIsDarkMode] = useState(
     window.matchMedia("(prefers-color-scheme: dark)").matches
   );
@@ -36,9 +35,9 @@ const AppWrapper = () => {
         setEnvData(config);
         setApiUrl(config.API_URL);
         setConfig(config);
-        let defaultUserInfo = config.ENABLE_AUTH ? await getUserInfo() : [] as UserInfo[];
+        let defaultUserInfo = config.ENABLE_AUTH ? await getUserInfo() : ({} as UserInfo);
         window.userInfo = defaultUserInfo;
-        setUserInfo(defaultUserInfo);
+        setUserInfoGlobal(defaultUserInfo);
 
       } catch (error) {
         console.info("frontend config did not load from python", error);

src/frontend_react/src/index.tsx

@@ -4,5 +4,12 @@ export type UserInfo = {
     id_token: string;
     provider_name: string;
     user_claims: any[];
+    user_email: string;
+    user_first_last_name: string;
     user_id: string;
+};
+
+export type claim = {
+    typ: string;
+    val: string;
 };