Fix invalid token after credentials change (#4717)

- If sync fails we set authFailedAt - This information is displayed in the frontend in accounts with a `Sync Failed` pill - The user can reconnect his account in the dropdown menu - A new OAuth flow is triggered - The account is synced
2024-04-02 11:32:27 +02:00
parent a3a15957f4
commit ffb1733f39
18 changed files with 318 additions and 123 deletions
--- a/packages/twenty-front/src/modules/accounts/types/ConnectedAccount.ts
+++ b/packages/twenty-front/src/modules/accounts/types/ConnectedAccount.ts
@ -11,5 +11,6 @@ export type ConnectedAccount = {
  refreshToken: string;
  accountOwnerId: string;
  lastSyncHistoryId: string;
+  authFailedAt: Date | null;
  messageChannels: MessageChannelConnection;
 };
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx
@ -9,7 +9,10 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
+import {
+  SettingsAccountsSynchronizationStatus,
+  SettingsAccountsSynchronizationStatusProps,
+} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
@ -35,7 +38,11 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
    });

  const { records: calendarChannels, loading: calendarChannelsLoading } =
-    useFindManyRecords<CalendarChannel>({
+    useFindManyRecords<
+      CalendarChannel & {
+        connectedAccount: ConnectedAccount;
+      }
+    >({
      objectNameSingular: CoreObjectNameSingular.CalendarChannel,
      skip: !accounts.length,
      filter: {
@ -49,9 +56,22 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
    return <SettingsAccountsListEmptyStateCard />;
  }

+  const calendarChannelsWithSyncStatus: (CalendarChannel & {
+    connectedAccount: ConnectedAccount;
+  } & SettingsAccountsSynchronizationStatusProps)[] = calendarChannels.map(
+    (calendarChannel) => ({
+      ...calendarChannel,
+      syncStatus: calendarChannel.connectedAccount?.authFailedAt
+        ? 'failed'
+        : calendarChannel.isSyncEnabled
+          ? 'synced'
+          : 'notSynced',
+    }),
+  );
+
  return (
    <SettingsListCard
-      items={calendarChannels}
+      items={calendarChannelsWithSyncStatus}
      getItemLabel={(calendarChannel) => calendarChannel.handle}
      isLoading={accountsLoading || calendarChannelsLoading}
      onRowClick={(calendarChannel) =>
@ -61,7 +81,7 @@ export const SettingsAccountsCalendarChannelsListCard = () => {
      RowRightComponent={({ item: calendarChannel }) => (
        <StyledRowRightContainer>
          <SettingsAccountsSynchronizationStatus
-            synced={!!calendarChannel.isSyncEnabled}
+            syncStatus={calendarChannel.syncStatus}
          />
          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
        </StyledRowRightContainer>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx
@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import styled from '@emotion/styled';

 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
@ -6,9 +7,16 @@ import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/
 import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
 import { SettingsPath } from '@/types/SettingsPath';
 import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
+import { Status } from '@/ui/display/status/components/Status';

 import { SettingsListCard } from '../../components/SettingsListCard';

+const StyledRowRightContainer = styled.div`
+  align-items: center;
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;
+
 export const SettingsAccountsConnectedAccountsListCard = ({
  accounts,
  loading,
@ -29,7 +37,12 @@ export const SettingsAccountsConnectedAccountsListCard = ({
      isLoading={loading}
      RowIcon={IconGoogle}
      RowRightComponent={({ item: account }) => (
-        <SettingsAccountsRowDropdownMenu item={account} />
+        <StyledRowRightContainer>
+          {account.authFailedAt && (
+            <Status color="red" text="Sync failed" weight="medium" />
+          )}
+          <SettingsAccountsRowDropdownMenu account={account} />
+        </StyledRowRightContainer>
      )}
      hasFooter
      footerButtonLabel="Add account"
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx
@ -1,13 +1,11 @@
-import { useCallback } from 'react';
 import styled from '@emotion/styled';

+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
 import { IconGoogle } from '@/ui/display/icon/components/IconGoogle';
 import { Button } from '@/ui/input/button/components/Button';
 import { Card } from '@/ui/layout/card/components/Card';
 import { CardContent } from '@/ui/layout/card/components/CardContent';
 import { CardHeader } from '@/ui/layout/card/components/CardHeader';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { useGenerateTransientTokenMutation } from '~/generated/graphql';

 const StyledHeader = styled(CardHeader)`
  align-items: center;
@ -27,18 +25,7 @@ type SettingsAccountsListEmptyStateCardProps = {
 export const SettingsAccountsListEmptyStateCard = ({
  label,
 }: SettingsAccountsListEmptyStateCardProps) => {
-  const [generateTransientToken] = useGenerateTransientTokenMutation();
-
-  const handleGmailLogin = useCallback(async () => {
-    const authServerUrl = REACT_APP_SERVER_BASE_URL;
-
-    const transientToken = await generateTransientToken();
-
-    const token =
-      transientToken.data?.generateTransientToken.transientToken.token;
-
-    window.location.href = `${authServerUrl}/auth/google-gmail?transientToken=${token}`;
-  }, [generateTransientToken]);
+  const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();

  return (
    <Card>
@ -48,7 +35,7 @@ export const SettingsAccountsListEmptyStateCard = ({
          Icon={IconGoogle}
          title="Connect with Google"
          variant="secondary"
-          onClick={handleGmailLogin}
+          onClick={triggerGoogleApisOAuth}
        />
      </StyledBody>
    </Card>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
@ -10,7 +10,10 @@ import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMembe
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard';
-import { SettingsAccountsSynchronizationStatus } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
+import {
+  SettingsAccountsSynchronizationStatus,
+  SettingsAccountsSynchronizationStatusProps,
+} from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus';
 import { SettingsListCard } from '@/settings/components/SettingsListCard';
 import { IconGmail } from '@/ui/display/icon/components/IconGmail';

@ -35,7 +38,11 @@ export const SettingsAccountsMessageChannelsListCard = () => {
    });

  const { records: messageChannels, loading: messageChannelsLoading } =
-    useFindManyRecords<MessageChannel>({
+    useFindManyRecords<
+      MessageChannel & {
+        connectedAccount: ConnectedAccount;
+      }
+    >({
      objectNameSingular: CoreObjectNameSingular.MessageChannel,
      filter: {
        connectedAccountId: {
@ -44,10 +51,14 @@ export const SettingsAccountsMessageChannelsListCard = () => {
      },
    });

-  const messageChannelsWithSyncedEmails = messageChannels.map(
+  const messageChannelsWithSyncedEmails: (MessageChannel & {
+    connectedAccount: ConnectedAccount;
+  } & SettingsAccountsSynchronizationStatusProps)[] = messageChannels.map(
    (messageChannel) => ({
      ...messageChannel,
-      isSynced: true,
+      syncStatus: messageChannel.connectedAccount?.authFailedAt
+        ? 'failed'
+        : 'synced',
    }),
  );

@ -67,7 +78,7 @@ export const SettingsAccountsMessageChannelsListCard = () => {
      RowRightComponent={({ item: messageChannel }) => (
        <StyledRowRightContainer>
          <SettingsAccountsSynchronizationStatus
-            synced={messageChannel.isSynced}
+            syncStatus={messageChannel.syncStatus}
          />
          <LightIconButton Icon={IconChevronRight} accent="tertiary" />
        </StyledRowRightContainer>
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsRowDropdownMenu.tsx
@ -1,9 +1,10 @@
 import { useNavigate } from 'react-router-dom';
-import { IconDotsVertical, IconMail, IconTrash } from 'twenty-ui';
+import { IconDotsVertical, IconMail, IconRefresh, IconTrash } from 'twenty-ui';

 import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
+import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth';
 import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
@ -12,12 +13,12 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';

 type SettingsAccountsRowDropdownMenuProps = {
-  item: Pick<ConnectedAccount, 'id' | 'messageChannels'>;
+  account: ConnectedAccount;
  className?: string;
 };

 export const SettingsAccountsRowDropdownMenu = ({
-  item: account,
+  account,
  className,
 }: SettingsAccountsRowDropdownMenuProps) => {
  const dropdownId = `settings-account-row-${account.id}`;
@ -29,6 +30,8 @@ export const SettingsAccountsRowDropdownMenu = ({
    objectNameSingular: CoreObjectNameSingular.ConnectedAccount,
  });

+  const { triggerGoogleApisOAuth } = useTriggerGoogleApisOAuth();
+
  return (
    <Dropdown
      dropdownId={dropdownId}
@ -51,6 +54,16 @@ export const SettingsAccountsRowDropdownMenu = ({
                closeDropdown();
              }}
            />
+            {account.authFailedAt && (
+              <MenuItem
+                LeftIcon={IconRefresh}
+                text="Reconnect"
+                onClick={() => {
+                  triggerGoogleApisOAuth();
+                  closeDropdown();
+                }}
+              />
+            )}
            <MenuItem
              accent="danger"
              LeftIcon={IconTrash}
--- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
+++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsSynchronizationStatus.tsx
@ -1,15 +1,27 @@
 import { Status } from '@/ui/display/status/components/Status';

-type SettingsAccountsSynchronizationStatusProps = {
-  synced: boolean;
+export type SettingsAccountsSynchronizationStatusProps = {
+  syncStatus: 'synced' | 'failed' | 'notSynced';
 };

 export const SettingsAccountsSynchronizationStatus = ({
-  synced,
+  syncStatus,
 }: SettingsAccountsSynchronizationStatusProps) => (
  <Status
-    color={synced ? 'green' : 'gray'}
-    text={synced ? 'Synced' : 'Not Synced'}
+    color={
+      syncStatus === 'synced'
+        ? 'green'
+        : syncStatus === 'failed'
+          ? 'red'
+          : 'gray'
+    }
+    text={
+      syncStatus === 'synced'
+        ? 'Synced'
+        : syncStatus === 'failed'
+          ? 'Sync failed'
+          : 'Not synced'
+    }
    weight="medium"
  />
 );
--- a/packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerGoogleApisOAuth.ts
+++ b/packages/twenty-front/src/modules/settings/accounts/hooks/useTriggerGoogleApisOAuth.ts
@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { useGenerateTransientTokenMutation } from '~/generated/graphql';
+
+export const useTriggerGoogleApisOAuth = () => {
+  const [generateTransientToken] = useGenerateTransientTokenMutation();
+
+  const triggerGoogleApisOAuth = useCallback(async () => {
+    const authServerUrl = REACT_APP_SERVER_BASE_URL;
+
+    const transientToken = await generateTransientToken();
+
+    const token =
+      transientToken.data?.generateTransientToken.transientToken.token;
+
+    window.location.href = `${authServerUrl}/auth/google-gmail?transientToken=${token}`;
+  }, [generateTransientToken]);
+
+  return { triggerGoogleApisOAuth };
+};