WIP ugly WIP

frontend/src/pages/AuthCallback.tsx

@@ -11,6 +11,8 @@ export default function AuthCallback() {
   const navigate = useNavigate();
 
   useEffect(() => {
+    console.log('AuthCallbackEffect');
+
     if (!cookieAuth) {
       // Legacy auth token from request query parameter
       const token = query.get('access_token');

libs/react-client/src/api/hooks/auth/index.ts

@@ -7,6 +7,7 @@ import { useUser } from 'src/auth/user';
 import { accessTokenState } from 'src/state';
 
 export const useAuth = (): IUseAuth => {
+  console.log('useAuth');
   const { authConfig, isLoading, cookieAuth } = useAuthConfig();
   const { logout } = useSessionManagement();
   const { user, setUserFromAPI } = useUser();

libs/react-client/src/auth/token.ts

@@ -41,6 +41,8 @@ export function ensureTokenPrefix(token: string): string {
 }
 
 export const useTokenManagement = () => {
+  console.log('useTokenManagement');
+
   const [, setUser] = useRecoilState(userState);
   const [, setAccessToken] = useRecoilState(accessTokenState);
 

libs/react-client/src/auth/user.ts

@@ -1,54 +1,54 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useRecoilState } from 'recoil';
-import { ChainlitContext } from 'src/context';
 import { userState } from 'src/state';
 
+import { IUser, useApi } from '..';
 import { useAuthConfig } from './config';
 import { getToken, useTokenManagement } from './token';
 
 export const useUser = () => {
-  const apiClient = useContext(ChainlitContext);
+  console.log('useUser');
+
   const [user, setUser] = useRecoilState(userState);
   const { cookieAuth } = useAuthConfig();
   const { handleSetAccessToken } = useTokenManagement();
 
-  // Legacy token auth; initialize the token from local storage
-  const setUserFromLocalStore = () => {
-    {
-      const storedAccessToken = getToken();
-      if (storedAccessToken) handleSetAccessToken(storedAccessToken);
-    }
-  };
-
-  // Cookie-based auth; use API to set user.
-  const setUserFromAPI = async () => {
-    // Get user from cookie, return true when successful
-    try {
-      const apiUser = await apiClient.getUser();
-      if (apiUser) {
-        setUser(apiUser);
+  const { data: userData, mutate: mutateUserData } = useApi<IUser>('/user', {
+    revalidateOnMount: false
+  });
+
+  // Attempt to get user when cookieAuth are available.
+  useEffect(() => {
+    if (!user) {
+      if (cookieAuth) {
+        console.log('cookieAuth', user, cookieAuth);
+        mutateUserData();
+        return;
       }
-    } catch (_) {
-      return;
-    }
-  };
 
-  const initUser = () => {
-    // Already logged in
-    if (user) return;
+      // Not using cookie auth, callback to header tokens
+      console.log('tokenAuth', user, cookieAuth);
+      const token = getToken();
+      if (token) handleSetAccessToken(token);
+    }
+  }, [user, cookieAuth]);
 
-    // Legacy fallback
-    if (!cookieAuth) return setUserFromLocalStore();
+  // When user data is available, set the user object.
+  useEffect(() => {
+    console.log('userData effect');
 
-    // Request user from API
-    setUserFromAPI();
-  };
+    if (userData) {
+      console.log('setUser', userData);
+      setUser(userData);
+    }
+  }, [userData]);
 
-  // Attempt to initialize user on app start.
-  useEffect(initUser, [cookieAuth]);
+  useEffect(() => {
+    console.log('useUser effect');
+  });
 
   return {
     user,
-    setUserFromAPI
+    setUserFromAPI: mutateUserData
   };
 };

libs/react-client/src/useConfig.ts

@@ -6,6 +6,8 @@ import { configState } from './state';
 import { IChainlitConfig } from './types';
 
 const useConfig = (accessToken?: string) => {
+  console.log('useConfig');
+
   const [config, setConfig] = useRecoilState(configState);
   const { isAuthenticated } = useAuth();
   const language = navigator.language || 'en-US';
@@ -19,6 +21,7 @@ const useConfig = (accessToken?: string) => {
 
   useEffect(() => {
     if (!data) return;
+    console.log('setConfig');
     setConfig(data);
   }, [data, setConfig]);