From f62fdc1219876a4b6548a23f30c027fb4cf274cd Mon Sep 17 00:00:00 2001
From: Charles Bochet <charlesBochet@users.noreply.github.com>
Date: Fri, 7 Jul 2023 14:10:04 -0700
Subject: [PATCH] Fix authentication with debug mode (#532)

Fix authent with debug mode
---
 .../modules/apollo/hooks/useApolloFactory.ts  | 11 ++----
 .../modules/apollo/services/apollo.factory.ts |  4 +++
 .../auth/hooks/useFetchClientConfig.ts        |  7 ----
 .../client-config/ClientConfigProvider.tsx    | 34 +++++++++++++------
 4 files changed, 30 insertions(+), 26 deletions(-)
 delete mode 100644 front/src/modules/auth/hooks/useFetchClientConfig.ts

diff --git a/front/src/modules/apollo/hooks/useApolloFactory.ts b/front/src/modules/apollo/hooks/useApolloFactory.ts
index 840f70cb3..d3dac6a13 100644
--- a/front/src/modules/apollo/hooks/useApolloFactory.ts
+++ b/front/src/modules/apollo/hooks/useApolloFactory.ts
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
 import {
   ApolloLink,
   InMemoryCache,
@@ -67,16 +67,11 @@ export function useApolloFactory() {
       },
       extraLinks: isMockMode ? [mockLink] : [],
       isDebugMode,
+      tokenPair,
     });
 
     return apolloRef.current.getClient();
-  }, [isMockMode, setTokenPair, isDebugMode]);
-
-  useEffect(() => {
-    if (apolloRef.current) {
-      apolloRef.current.updateTokenPair(tokenPair);
-    }
-  }, [tokenPair]);
+  }, [isMockMode, setTokenPair, isDebugMode, tokenPair]);
 
   return apolloClient;
 }
diff --git a/front/src/modules/apollo/services/apollo.factory.ts b/front/src/modules/apollo/services/apollo.factory.ts
index 34553e8e8..b1ef6c0ef 100644
--- a/front/src/modules/apollo/services/apollo.factory.ts
+++ b/front/src/modules/apollo/services/apollo.factory.ts
@@ -30,6 +30,7 @@ export interface Options<TCacheShape> extends ApolloClientOptions<TCacheShape> {
   onUnauthenticatedError?: () => void;
   extraLinks?: ApolloLink[];
   isDebugMode?: boolean;
+  tokenPair: AuthTokenPair | null;
 }
 
 export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
@@ -45,9 +46,12 @@ export class ApolloFactory<TCacheShape> implements ApolloManager<TCacheShape> {
       onUnauthenticatedError,
       extraLinks,
       isDebugMode,
+      tokenPair,
       ...options
     } = opts;
 
+    this.tokenPair = tokenPair;
+
     const buildApolloLink = (): ApolloLink => {
       const httpLink = createHttpLink({
         uri,
diff --git a/front/src/modules/auth/hooks/useFetchClientConfig.ts b/front/src/modules/auth/hooks/useFetchClientConfig.ts
deleted file mode 100644
index 3d6305186..000000000
--- a/front/src/modules/auth/hooks/useFetchClientConfig.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { useGetClientConfigQuery } from '~/generated/graphql';
-
-export function useFetchClientConfig() {
-  const { data } = useGetClientConfigQuery();
-
-  return data?.clientConfig;
-}
diff --git a/front/src/providers/client-config/ClientConfigProvider.tsx b/front/src/providers/client-config/ClientConfigProvider.tsx
index 3bb063a74..ca29bfe89 100644
--- a/front/src/providers/client-config/ClientConfigProvider.tsx
+++ b/front/src/providers/client-config/ClientConfigProvider.tsx
@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
-import { useFetchClientConfig } from '@/auth/hooks/useFetchClientConfig';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { telemetryState } from '@/client-config/states/telemetryState';
+import { useGetClientConfigQuery } from '~/generated/graphql';
 
 export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
   children,
@@ -14,21 +14,33 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
   const [, setDebugMode] = useRecoilState(isDebugModeState);
   const [, setDemoMode] = useRecoilState(isDemoModeState);
   const [, setTelemetry] = useRecoilState(telemetryState);
+  const [isLoading, setIsLoading] = useState(true);
 
-  const clientConfig = useFetchClientConfig();
+  const { data, loading } = useGetClientConfigQuery();
 
   useEffect(() => {
-    if (clientConfig) {
+    if (!loading) {
+      setIsLoading(false);
+    }
+    if (data?.clientConfig) {
       setAuthProviders({
-        google: clientConfig.authProviders.google,
-        password: clientConfig.authProviders.password,
+        google: data?.clientConfig.authProviders.google,
+        password: data?.clientConfig.authProviders.password,
         magicLink: false,
       });
-      setDebugMode(clientConfig.debugMode);
-      setDemoMode(clientConfig.demoMode);
-      setTelemetry(clientConfig.telemetry);
+      setDebugMode(data?.clientConfig.debugMode);
+      setDemoMode(data?.clientConfig.demoMode);
+      setTelemetry(data?.clientConfig.telemetry);
     }
-  }, [clientConfig, setAuthProviders, setDebugMode, setDemoMode, setTelemetry]);
+  }, [
+    data,
+    setAuthProviders,
+    setDebugMode,
+    setDemoMode,
+    setTelemetry,
+    setIsLoading,
+    loading,
+  ]);
 
-  return <>{children}</>;
+  return isLoading ? <></> : <>{children}</>;
 };