[FRONT COMPONENT] Add Front component token generation (#17855)

closes https://github.com/twentyhq/core-team-issues/issues/2180


https://github.com/user-attachments/assets/a898455d-eb1c-4d22-b585-785e98fc38a7

packages/twenty-front/src/modules/front-components/components/FrontComponentRenderer.tsx

@@ -1,12 +1,13 @@
 import { REST_API_BASE_URL } from '@/apollo/constant/rest-api-base-url';
-import { getTokenPair } from '@/apollo/utils/getTokenPair';
 import { useFrontComponentExecutionContext } from '@/front-components/hooks/useFrontComponentExecutionContext';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
-import { useState } from 'react';
+import { useCallback } from 'react';
 import { FrontComponentRenderer as SharedFrontComponentRenderer } from 'twenty-sdk/front-component';
 import { isDefined } from 'twenty-shared/utils';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { useFindOneFrontComponentQuery } from '~/generated-metadata/graphql';
 
 type FrontComponentRendererProps = {
   frontComponentId: string;
@@ -16,28 +17,37 @@ export const FrontComponentRenderer = ({
   frontComponentId,
 }: FrontComponentRendererProps) => {
   const theme = useTheme();
-  const [hasError, setHasError] = useState(false);
-
   const { enqueueErrorSnackBar } = useSnackBar();
   const { executionContext, frontComponentHostCommunicationApi } =
     useFrontComponentExecutionContext();
 
   const componentUrl = `${REST_API_BASE_URL}/front-components/${frontComponentId}`;
-  const authToken = getTokenPair()?.accessOrWorkspaceAgnosticToken?.token;
 
-  const handleError = (error?: Error) => {
-    if (isDefined(error)) {
+  const handleError = useCallback(
+    (error?: Error) => {
+      if (!isDefined(error)) {
+        return;
+      }
+
       const errorMessage = error.message;
 
       enqueueErrorSnackBar({
         message: t`Failed to load front component: ${errorMessage}`,
       });
-    }
-    setHasError(true);
-  };
+    },
+    [enqueueErrorSnackBar],
+  );
 
-  if (hasError || !isDefined(authToken)) {
-    // TODO: Add an error display component here
+  const { data, loading } = useFindOneFrontComponentQuery({
+    variables: { id: frontComponentId },
+    onError: handleError,
+  });
+
+  if (
+    loading ||
+    !isDefined(data?.frontComponent) ||
+    !isDefined(data.frontComponent.applicationTokenPair)
+  ) {
     return null;
   }
 
@@ -45,7 +55,10 @@ export const FrontComponentRenderer = ({
     <SharedFrontComponentRenderer
       theme={theme}
       componentUrl={componentUrl}
-      authToken={authToken}
+      applicationAccessToken={
+        data.frontComponent.applicationTokenPair.applicationAccessToken.token
+      }
+      apiUrl={REACT_APP_SERVER_BASE_URL}
       executionContext={executionContext}
       frontComponentHostCommunicationApi={frontComponentHostCommunicationApi}
       onError={handleError}