Frontend integration. Next: copilot.

frontend/src/pages/AuthCallback.tsx

@@ -7,18 +7,19 @@ import { useQuery } from 'hooks/query';
 
 export default function AuthCallback() {
   const query = useQuery();
-  const { authConfig, user, setAccessToken } = useAuth();
+  const { user, cookieAuth, setAccessToken, setUserFromAPI } = useAuth();
   const navigate = useNavigate();
 
   useEffect(() => {
-    if (authConfig && !authConfig.cookieAuth) {
-      // Legacy token auth
+    if (!cookieAuth) {
+      // Legacy auth token from request query parameter
       const token = query.get('access_token');
-      setAccessToken(token);
-    } else {
-      // TODO: Do stuff to ensure user object.
+      return setAccessToken(token);
     }
-  }, [query]);
+
+    // Assuming we're authenticated (because redirected here), use cookie to get and set user.
+    setUserFromAPI();
+  }, [query, cookieAuth]);
 
   useEffect(() => {
     if (user) {

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

@@ -7,9 +7,9 @@ import { useUser } from 'src/auth/user';
 import { accessTokenState } from 'src/state';
 
 export const useAuth = (): IUseAuth => {
-  const { authConfig, isLoading } = useAuthConfig();
+  const { authConfig, isLoading, cookieAuth } = useAuthConfig();
   const { logout } = useSessionManagement();
-  const { user } = useUser();
+  const { user, setUserFromAPI } = useUser();
   const [accessToken] = useRecoilState(accessTokenState);
 
   const { handleSetAccessToken } = useTokenManagement();
@@ -24,7 +24,9 @@ export const useAuth = (): IUseAuth => {
       isAuthenticated: true,
       accessToken: '',
       logout: () => Promise.resolve(),
-      setAccessToken: () => {}
+      setAccessToken: () => {},
+      setUserFromAPI: () => Promise.resolve(),
+      cookieAuth
     };
   }
 
@@ -35,7 +37,9 @@ export const useAuth = (): IUseAuth => {
     isAuthenticated: !!user,
     accessToken,
     logout,
-    setAccessToken: handleSetAccessToken
+    setAccessToken: handleSetAccessToken,
+    setUserFromAPI,
+    cookieAuth
   };
 };
 

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

@@ -10,11 +10,13 @@ export interface AuthState {
   isAuthenticated: boolean;
   isReady: boolean;
   accessToken: string | undefined;
+  cookieAuth: boolean;
 }
 
 export interface AuthActions {
   logout: (reload?: boolean) => Promise<void>;
   setAccessToken: (token: string | null | undefined) => void;
+  setUserFromAPI: () => Promise<void>;
 }
 
 export type IUseAuth = AuthState & AuthActions;

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

@@ -22,7 +22,7 @@ export const useUser = () => {
 
   // Cookie-based auth; use API to set user.
   const setUserFromAPI = async () => {
-    // Get user from cookie, return true when succesful
+    // Get user from cookie, return true when successful
     try {
       const apiUser = await apiClient.getUser();
       if (apiUser) {
@@ -44,7 +44,7 @@ export const useUser = () => {
     setUserFromAPI();
   };
 
-  // Attempt to initialise user on app start.
+  // Attempt to initialize user on app start.
   useEffect(initUser, [cookieAuth]);
 
   return {