user login workflow

Author: Fr4nc3

src/frontend_react/src/api/config.tsx

@@ -1,9 +1,12 @@
 // src/config.js
 
+import { UserInfo } from "@/models";
+
 declare global {
     interface Window {
         appConfig?: Record<string, any>;
         activeUserId?: string;
+        userInfo?: UserInfo[];
     }
 }
 
@@ -38,7 +41,21 @@ export function getConfigData() {
 
     return { ...config };
 }
-
+export async function getUserInfo(): Promise<UserInfo[]> {
+    try {
+        const response = await fetch("/.auth/me");
+        if (!response.ok) {
+            console.log(
+                "No identity provider found. Access to chat will be blocked."
+            );
+            return [];
+        }
+        const payload = await response.json();
+        return payload;
+    } catch (e) {
+        return [];
+    }
+}
 export function getApiUrl() {
     if (!API_URL) {
         // Check if window.appConfig exists
@@ -56,7 +73,7 @@ export function getApiUrl() {
 }
 
 export function getUserId(): string {
-    USER_ID = window.activeUserId ?? null;
+    USER_ID = window.userInfo ? window.userInfo[0].user_id : null;
     const userId = USER_ID ?? "00000000-0000-0000-0000-000000000000";
     return userId;
 }

src/frontend_react/src/index.tsx

@@ -4,12 +4,15 @@ 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 } from './api/config';
+import { setEnvData, setApiUrl, config as defaultConfig, toBoolean, getUserInfo } 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
   );
@@ -33,11 +36,15 @@ const AppWrapper = () => {
         setEnvData(config);
         setApiUrl(config.API_URL);
         setConfig(config);
+        let defaultUserInfo = config.ENABLE_AUTH ? await getUserInfo() : [] as UserInfo[];
+        window.userInfo = defaultUserInfo;
+        setUserInfo(defaultUserInfo);
 
       } catch (error) {
         console.info("frontend config did not load from python", error);
       } finally {
         setIsConfigLoaded(true);
+        setIsUserInfoLoaded(true);
       }
     };
 
@@ -58,7 +65,7 @@ const AppWrapper = () => {
     mediaQuery.addEventListener("change", handleThemeChange);
     return () => mediaQuery.removeEventListener("change", handleThemeChange);
   }, []);
-  if (!isConfigLoaded) return <div>Loading...</div>;
+  if (!isConfigLoaded || !isUserInfoLoaded) return <div>Loading...</div>;
   return (
     <StrictMode>
       <FluentProvider theme={isDarkMode ? teamsDarkTheme : teamsLightTheme} style={{ height: "100vh" }}>

src/frontend_react/src/models/auth.tsx

@@ -0,0 +1,8 @@
+export type UserInfo = {
+    access_token: string;
+    expires_on: string;
+    id_token: string;
+    provider_name: string;
+    user_claims: any[];
+    user_id: string;
+};

src/frontend_react/src/models/index.tsx

@@ -14,5 +14,6 @@ export * from './taskDetails';
 export * from './taskList';
 export * from './planPanelLeft';
 export * from './homeInput';
+export * from './auth'
 
 // Add other model exports as needed