Fix authentication with debug mode (#532)

Fix authent with debug mode

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]);
+  }, [isMockMode, setTokenPair, isDebugMode, tokenPair]);
-
-  useEffect(() => {
-    if (apolloRef.current) {
-      apolloRef.current.updateTokenPair(tokenPair);
-    }
-  }, [tokenPair]);
 
   return apolloClient;
 }

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,

front/src/modules/auth/hooks/useFetchClientConfig.ts

@@ -1,7 +0,0 @@
-import { useGetClientConfigQuery } from '~/generated/graphql';
-
-export function useFetchClientConfig() {
-  const { data } = useGetClientConfigQuery();
-
-  return data?.clientConfig;
-}

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,
+        google: data?.clientConfig.authProviders.google,
-        password: clientConfig.authProviders.password,
+        password: data?.clientConfig.authProviders.password,
         magicLink: false,
       });
-      setDebugMode(clientConfig.debugMode);
+      setDebugMode(data?.clientConfig.debugMode);
-      setDemoMode(clientConfig.demoMode);
+      setDemoMode(data?.clientConfig.demoMode);
-      setTelemetry(clientConfig.telemetry);
+      setTelemetry(data?.clientConfig.telemetry);
     }
-  }, [clientConfig, setAuthProviders, setDebugMode, setDemoMode, setTelemetry]);
+  }, [
+    data,
+    setAuthProviders,
+    setDebugMode,
+    setDemoMode,
+    setTelemetry,
+    setIsLoading,
+    loading,
+  ]);
 
-  return <>{children}</>;
+  return isLoading ? <></> : <>{children}</>;
 };