fix: Create a client config function that is retrieved when app is loading (#496)

* fix: Create a client config function that is retrieved when app is loaded

* update index.tsx

* fixed linter issues

front/src/generated/graphql.tsx

@@ -1798,6 +1798,15 @@ export type GetUsersQueryVariables = Exact<{ [key: string]: never; }>;
 
 export type GetUsersQuery = { __typename?: 'Query', findManyUser: Array<{ __typename?: 'User', id: string, email: string, displayName: string, firstName: string, lastName: string }> };
 
+export type GetClientConfigQuery = {
+  __typename?: 'Query';
+  clientConfig: {
+    __typename?: 'ClientConfig';
+    display_google_login: boolean;
+    prefill_login_with_seed: boolean;
+  };
+};
+export type GetClientConfigQueryVariables = {};
 
 export const CreateEventDocument = gql`
     mutation CreateEvent($type: String!, $data: JSON!) {
@@ -3080,4 +3089,39 @@ export function useGetUsersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<G
         }
 export type GetUsersQueryHookResult = ReturnType<typeof useGetUsersQuery>;
 export type GetUsersLazyQueryHookResult = ReturnType<typeof useGetUsersLazyQuery>;
-export type GetUsersQueryResult = Apollo.QueryResult<GetUsersQuery, GetUsersQueryVariables>;
+export type GetUsersQueryResult = Apollo.QueryResult<GetUsersQuery, GetUsersQueryVariables>;
+
+export const GET_CLIENT_CONFIG = gql`
+  query GetClientConfig {
+    clientConfig {
+      display_google_login
+      prefill_login_with_seed
+    }
+  }
+`;
+
+export function useGetClientConfigQuery(
+  baseOptions?: Apollo.QueryHookOptions<
+    GetClientConfigQuery,
+    GetClientConfigQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useQuery<GetClientConfigQuery, GetClientConfigQueryVariables>(
+    GET_CLIENT_CONFIG,
+    options,
+  );
+}
+
+export function useGetClientConfigLazyQuery(
+  baseOptions?: Apollo.LazyQueryHookOptions<
+    GetClientConfigQuery,
+    GetClientConfigQueryVariables
+  >,
+) {
+  const options = { ...defaultOptions, ...baseOptions };
+  return Apollo.useLazyQuery<
+    GetClientConfigQuery,
+    GetClientConfigQueryVariables
+  >(GET_CLIENT_CONFIG, options);
+}

front/src/index.tsx

@@ -8,6 +8,7 @@ import { ThemeType } from '@/ui/themes/themes';
 import '@emotion/react';
 
 import { ApolloProvider } from './providers/apollo/ApolloProvider';
+import { ClientConfigProvider } from './providers/clientConfig/ClientConfigProvider';
 import { AppThemeProvider } from './providers/theme/AppThemeProvider';
 import { UserProvider } from './providers/user/UserProvider';
 import { App } from './App';
@@ -25,7 +26,9 @@ root.render(
         <AppThemeProvider>
           <StrictMode>
             <UserProvider>
-              <App />
+              <ClientConfigProvider>
+                <App />
+              </ClientConfigProvider>
             </UserProvider>
           </StrictMode>
         </AppThemeProvider>

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

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

front/src/modules/auth/states/displayGoogleLogin.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const displayGoogleLogin = atom<boolean>({
+  key: 'displayGoogleLogin',
+  default: true,
+});

front/src/modules/auth/states/prefillLoginWithSeed.ts

@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const prefillLoginWithSeed = atom<boolean>({
+  key: 'prefillLoginWithSeed',
+  default: true,
+});

front/src/providers/clientConfig/ClientConfigProvider.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+
+import { useFetchClientConfig } from '@/auth/hooks/useFetchClientConfig';
+import { displayGoogleLogin } from '@/auth/states/displayGoogleLogin';
+import { prefillLoginWithSeed } from '@/auth/states/prefillLoginWithSeed';
+
+export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  const [, setDisplayGoogleLogin] = useRecoilState(displayGoogleLogin);
+  const [, setPrefillLoginWithSeed] = useRecoilState(prefillLoginWithSeed);
+  const clientConfig = useFetchClientConfig();
+
+  useEffect(() => {
+    setDisplayGoogleLogin(clientConfig?.display_google_login ?? true);
+    setPrefillLoginWithSeed(clientConfig?.prefill_login_with_seed ?? true);
+  }, [setDisplayGoogleLogin, setPrefillLoginWithSeed, clientConfig]);
+
+  return <>{children}</>;
+};

server/package.json

@@ -9,7 +9,7 @@
     "prebuild": "rimraf dist",
     "build": "nest build",
     "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
-    "start": "nest start",
+    "start": "set NODE_ENV=development&& nest start",
     "start:dev": "nest start --watch",
     "start:debug": "nest start --debug --watch",
     "start:prod": "node dist/main",

server/src/core/auth/auth.resolver.ts

@@ -1,5 +1,5 @@
-import { Args, Mutation, Resolver } from '@nestjs/graphql';
-import { AuthTokens } from './dto/token.entity';
+import { Args, Mutation, Resolver, Query} from '@nestjs/graphql';
+import { AuthTokens, ClientConfig} from './dto/token.entity';
 import { TokenService } from './services/token.service';
 import { RefreshTokenInput } from './dto/refresh-token.input';
 import { BadRequestException } from '@nestjs/common';
@@ -61,4 +61,17 @@ export class AuthResolver {
 
     return { tokens: tokens };
   }
-}
+
+  @Query(() => ClientConfig)
+  async clientConfig(): Promise<ClientConfig> {
+    const displayGoogleLogin = process.env.AUTH_GOOGLE_CLIENT_ID !== undefined;
+    const prefillLoginWithSeed = process.env.NODE_ENV === 'development';
+
+    const clientConfig: ClientConfig = {
+      display_google_login: displayGoogleLogin,
+      prefill_login_with_seed: prefillLoginWithSeed,
+    };
+
+    return Promise.resolve(clientConfig);
+  }
+}

server/src/core/auth/dto/token.entity.ts

@@ -23,3 +23,12 @@ export class AuthTokens {
   @Field(() => AuthTokenPair)
   tokens: AuthTokenPair;
 }
+
+@ObjectType()
+export class ClientConfig {
+  @Field(() => Boolean)
+  display_google_login: boolean;
+
+  @Field(() => Boolean)
+  prefill_login_with_seed: boolean;
+}