✨(frontend) working oidc connection

Move from usequery to simple use effect, with hard coded response mode to query for our usage

Author: MarcWadai

src/frontend/apps/hub/src/features/auth/Auth.tsx

@@ -40,7 +40,7 @@ export const Auth = ({ children }: PropsWithChildren) => {
   const { config } = useConfig();
 
   // Fetch Matrix chat user credentials when regular user is authenticated
-  const { chatUser } = useMatrixChatUser(user);
+  const { chatUser, isProcessingCallback, isStartOidcFlow } = useMatrixChatUser(user);
 
   const init = async () => {
     try {
@@ -84,7 +84,7 @@ export const Auth = ({ children }: PropsWithChildren) => {
     }
   }, [user]);
 
-  if (user === undefined) {
+  if (user === undefined || isProcessingCallback || isStartOidcFlow) {
     return (
       <div className="hub-auth-loader">
         <Spinner size="xl" />

src/frontend/apps/hub/src/features/drivers/implementations/MatrixDriver.ts

@@ -0,0 +1,35 @@
+import { fetchAPI } from "@/features/api/fetchApi";
+
+import { Driver, UserFilters } from "../Driver";
+import { ApiConfig, User } from "../types";
+
+/**
+ * Driver wired to the real Django backend. Only methods that already have a
+ * matching endpoint are implemented here — chat-related methods are abstract
+ * and provided by `MockDriver` until the backend ships. Once it does, fold
+ * those implementations back into this class and delete `MockDriver`.
+ */
+export abstract class MatrixDriver extends Driver {
+  async getConfig(): Promise<ApiConfig> {
+    const response = await fetchAPI(`config/`);
+    const data = await response.json();
+    return data;
+  }
+
+  async getUsers(filters?: UserFilters): Promise<User[]> {
+    const response = await fetchAPI(`users/`, {
+      params: filters,
+    });
+    const data = await response.json();
+    return data;
+  }
+
+  async updateUser(payload: Partial<User> & { id: string }): Promise<User> {
+    const response = await fetchAPI(`users/${payload.id}/`, {
+      method: "PATCH",
+      body: JSON.stringify(payload),
+    });
+    const data = await response.json();
+    return data;
+  }
+}

src/frontend/apps/hub/src/features/matrix/hooks/useMatrixUser.tsx

@@ -1,8 +1,8 @@
 import { User } from "@/features/auth/types";
-import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { matrixUserStore } from "../stores/matrixUserStore";
+import { MatrixUserInterface } from "../types";
 import {
   completeOidcLogin,
   getOIDCAuthUrl,
@@ -11,77 +11,94 @@ import {
 import { fetchHomeserverForEmail } from "../utils/autodiscovery";
 
 const OIDC_HS = 'oidc_hs';
-const OIDC_RESPONSE_MODE = 'oidc_response_mode';
 
 export const useMatrixChatUser = (user: User | null | undefined) => {
   const router = useRouter();
+  const [chatUser, setChatUser] = useState<MatrixUserInterface | null>(null);
   const [isProcessingCallback, setIsProcessingCallback] = useState(false);
+  const [isStartOidcFlow, setisStartOidcFlow] = useState(false);
 
-  const { data: chatUser = null } = useQuery({
-    queryKey: ['useMatrixChatUser', user], // Refetch when chatUser changes
-    queryFn: async () => {
+  useEffect(() => {
+    if (!user) return;
+
+    const initializeUser = async () => {
       const currentUser = matrixUserStore.getUser();
+      let currentHomeserverSelected = sessionStorage.getItem(OIDC_HS);
+
       if (currentUser) {
         console.log('**** already has user');
         return currentUser;
       }
-      let currentHomeserverSelected = sessionStorage.get(OIDC_HS);
-      // Check if we're in OIDC callback
-      const { code, state } = router.query;
-      if (code && state) {
-        console.log('**** Processing OIDC callback');
-        setIsProcessingCallback(true);
-        const responseMode = sessionStorage.get(OIDC_RESPONSE_MODE) || 'fragment';
-        const oidcResult = await completeOidcLogin({ code, state }, responseMode);
-        const {
-          user_id: userId,
-          device_id: deviceId,
-          is_guest: isGuest,
-        } = await getUserIdFromAccessToken(oidcResult.accessToken, currentHomeserverSelected);
-
-        const matrixUser = {
+
+      console.log('**** No user found, fetching new user');
+      setisStartOidcFlow(true);
+      // Find correct homeserver url
+      // TODO Should use user?.email, for now only using hardcoded email
+      let email = user?.email || '';
+      if (process.env.NODE_ENV === 'development') {
+        email = 'marc3@tchap.beta.gouv.fr';
+      }
+      if (!currentHomeserverSelected) {
+        const hs = await fetchHomeserverForEmail(email);
+        currentHomeserverSelected = hs!.base_url;
+        sessionStorage.setItem(OIDC_HS, hs!.base_url);
+      }
+      const authUrl = await getOIDCAuthUrl(currentHomeserverSelected, email);
+      setisStartOidcFlow(false);
+      // start oidc flow in tchap MAS
+      window.location.href = authUrl;
+    }
+
+    initializeUser();
+
+  }, [user]);
+
+  // Effect 1: Handle OIDC callback (independent of user prop)
+  useEffect(() => {
+    if (!router.isReady) return;
+    const { code, state } = router.query;
+    console.log("*** code, state", code, state);
+    if (!code || !state || typeof code !== 'string' || typeof state !== 'string') return;
+    console.log("*** processing callback oidc");
+
+    const processCallback = async () => {
+      setIsProcessingCallback(true);
+      try {
+        const currentHomeserverSelected = sessionStorage.getItem(OIDC_HS);
+        const oidcResult = await completeOidcLogin({ code, state });
+
+        if (!currentHomeserverSelected) {
+          throw new Error("No homeserver was set");
+        }
+
+        const { user_id: userId, device_id: deviceId, is_guest: isGuest } =
+          await getUserIdFromAccessToken(oidcResult.accessToken, currentHomeserverSelected);
+
+        const matrixUser: MatrixUserInterface = {
           homeserverUrl: currentHomeserverSelected,
           mxId: userId,
           deviceId: deviceId,
           accessToken: oidcResult.accessToken,
           refreshToken: oidcResult.refreshToken,
           guest: isGuest,
         };
+
         matrixUserStore.saveUser(matrixUser);
         matrixUserStore.persistOIDC(
           oidcResult.clientId,
           oidcResult.issuer,
           oidcResult.idToken,
         );
-        // Clean up URL params
+
+        setChatUser(matrixUser);
         router.replace(router.pathname, undefined, { shallow: true });
+      } finally {
         setIsProcessingCallback(false);
-        return matrixUser;
       }
+    };
 
-      console.log('**** No user found, fetching new user');
-      // Find correct homeserver url
-      // TODO Should use user?.email, for now only using hardcoded email
-      let email = user?.email || '';
-      if (process.env.NODE_ENV === 'development') {
-        email = 'marc3@tchap.beta.gouv.fr';
-      }
-      if (!currentHomeserverSelected) {
-        const hs = await fetchHomeserverForEmail(email);
-        currentHomeserverSelected = hs!.base_url;
-        sessionStorage.setItem(OIDC_HS, hs!.base_url);
-      }
-      const { authUrl, responseMode } = await getOIDCAuthUrl(currentHomeserverSelected, email);
-      sessionStorage.setItem(OIDC_RESPONSE_MODE, responseMode);
+    processCallback();
+  }, [router.isReady, router.query.code, router.query.state, router.pathname]);
 
-      // start oidc flow in tchap MAS
-      window.location.href = authUrl;
-      return null;
-    },
-    enabled: !!user, // Only run query when user exists
-    staleTime: Infinity, // Client doesn't stale
-    retry: 1,
-  });
-
-  return { chatUser, isProcessingCallback };
+  return { chatUser, isProcessingCallback, isStartOidcFlow };
 };

src/frontend/apps/hub/src/features/matrix/utils/auth.ts

@@ -11,6 +11,10 @@ import { secureRandomString } from "matrix-js-sdk/lib/randomstring";
 import { matrixConfig } from "../config";
 import { CompleteOidcLoginResponse, MatrixUserInterface } from "../types";
 
+
+// set OIDC response mode to query
+const RESPONSE_MODE = 'query';
+
 /**
  * Send a login request to the given server, and format the response
  * as a MatrixClientCreds
@@ -80,10 +84,7 @@ export async function sendLoginRequest(
 export const getOIDCAuthUrl = async (
   hs: string,
   email: string,
-): Promise<{
-  authUrl: string;
-  responseMode: 'fragment' | 'query';
-}> => {
+): Promise<string> => {
   const delegatedAuthConfig = await fetchDelegatedAuthMetadata(hs);
   console.log('*** delegatedAuthConfig', delegatedAuthConfig);
   if (!delegatedAuthConfig) {
@@ -93,6 +94,7 @@ export const getOIDCAuthUrl = async (
     window.location.origin + window.location.pathname,
   );
   const redirectUri = urlCallback.href;
+  console.log("*** redirectUri", redirectUri);
 
   const defaultOidcClientUri = window.location.origin;
 
@@ -108,11 +110,6 @@ export const getOIDCAuthUrl = async (
   });
 
   const nonce = secureRandomString(10);
-  const responseMode = delegatedAuthConfig!.response_modes_supported?.includes(
-    'fragment',
-  )
-    ? 'fragment'
-    : 'query';
 
   const authorizationUrl = await generateOidcAuthorizationUrl({
     metadata: delegatedAuthConfig!,
@@ -123,9 +120,10 @@ export const getOIDCAuthUrl = async (
     nonce,
     urlState: '',
     loginHint: email,
-    responseMode
+    responseMode: RESPONSE_MODE
   });
-  return { authUrl: authorizationUrl, responseMode };
+  console.log("*** authorizationUrl", authorizationUrl);
+  return authorizationUrl;
 };
 
 const fetchDelegatedAuthMetadata = async (preferredHomeserverUrl: string) => {
@@ -158,8 +156,7 @@ const fetchDelegatedAuthMetadata = async (preferredHomeserverUrl: string) => {
  * @throws When we failed to get a valid access token
  */
 export const completeOidcLogin = async (
-  params: { code: string; state: string },
-  responseMode: 'fragment' | 'query',
+  params: { code: string; state: string }
 ): Promise<CompleteOidcLoginResponse> => {
   const { code, state } = params;
   const {
@@ -168,7 +165,7 @@ export const completeOidcLogin = async (
     idTokenClaims,
     identityServerUrl,
     oidcClientSettings,
-  } = await completeAuthorizationCodeGrant(code, state, responseMode);
+  } = await completeAuthorizationCodeGrant(code, state, RESPONSE_MODE);
 
   return {
     homeserverUrl,
@@ -202,7 +199,7 @@ export const getUserIdFromAccessToken = async (
       idBaseUrl: identityServerUrl,
     });
 
-    return await client.whoami();
+    return client.whoami();
   } catch (error) {
     console.error('Failed to retrieve userId using accessToken', error);
     throw new Error('Failed to retrieve userId using accessToken');