feat(auth): Show Last used label on SSO sign-in method

packages/twenty-front/src/modules/auth/hooks/useAuth.ts

@@ -26,12 +26,14 @@ import {
   type AuthTokenPair,
 } from '~/generated-metadata/graphql';
 
-import { isDeveloperDefaultSignInPrefilledState } from '@/client-config/states/isDeveloperDefaultSignInPrefilledState';
 import { tokenPairState } from '@/auth/states/tokenPairState';
+import { isDeveloperDefaultSignInPrefilledState } from '@/client-config/states/isDeveloperDefaultSignInPrefilledState';
 
 import { isAppEffectRedirectEnabledState } from '@/app/states/isAppEffectRedirectEnabledState';
 import { useSignUpInNewWorkspace } from '@/auth/sign-in-up/hooks/useSignUpInNewWorkspace';
 import { isCurrentUserLoadedState } from '@/auth/states/isCurrentUserLoadedState';
+import { LAST_AUTHENTICATED_METHOD_STORAGE_KEY } from '@/auth/states/lastAuthenticatedMethodState';
+import { loginTokenState } from '@/auth/states/loginTokenState';
 import {
   SignInUpStep,
   signInUpStepState,
@@ -66,7 +68,6 @@ import { iconsState } from 'twenty-ui/display';
 import { type AuthToken } from '~/generated/graphql';
 import { cookieStorage } from '~/utils/cookie-storage';
 import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
-import { loginTokenState } from '@/auth/states/loginTokenState';
 
 export const useAuth = () => {
   const setTokenPair = useSetRecoilState(tokenPairState);
@@ -176,10 +177,34 @@ export const useAuth = () => {
 
         goToRecoilSnapshot(initialSnapshot);
 
-        sessionStorage.clear();
-        localStorage.clear();
+        let lastAuthenticatedMethod: string | null = null;
+        try {
+          lastAuthenticatedMethod = localStorage.getItem(
+            LAST_AUTHENTICATED_METHOD_STORAGE_KEY,
+          );
+        } catch {
+          // Ignore storage errors - last auth method is non-critical
+        }
+
+        try {
+          sessionStorage.clear();
+          localStorage.clear();
+        } catch {
+          // Ignore storage errors during sign-out
+        }
+
+        if (lastAuthenticatedMethod !== null) {
+          try {
+            localStorage.setItem(
+              LAST_AUTHENTICATED_METHOD_STORAGE_KEY,
+              lastAuthenticatedMethod,
+            );
+          } catch {
+            // Ignore failures preserving last auth method - it's non-critical
+          }
+        }
+
         await client.clearStore();
-        // We need to explicitly clear the state to trigger the cookie deletion which include the parent domain
         setLastAuthenticateWorkspaceDomain(null);
         await loadMockedObjectMetadataItems();
         navigate(AppPath.SignInUp);

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpSSOButtonStyles.ts

@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+import { Pill } from 'twenty-ui/components';
+
+export const StyledSSOButtonContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+
+export const StyledLastUsedPill = styled(Pill)`
+  background: ${({ theme }) => theme.color.blue3};
+  border: 1px solid ${({ theme }) => theme.color.blue5};
+  border-radius: ${({ theme }) => theme.border.radius.pill};
+  color: ${({ theme }) => theme.color.blue9};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  position: absolute;
+  right: -${({ theme }) => theme.spacing(5)};
+  top: -${({ theme }) => theme.spacing(2)};
+`;

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithGoogle.tsx

@@ -1,15 +1,20 @@
+import { useLastAuthenticatedMethod } from '@/auth/sign-in-up/hooks/useLastAuthenticatedMethod';
 import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
+import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { memo } from 'react';
 import { useRecoilValue } from 'recoil';
 import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display';
 import { MainButton } from 'twenty-ui/input';
-import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
+import {
+  StyledLastUsedPill,
+  StyledSSOButtonContainer,
+} from './SignInUpSSOButtonStyles';
 
 const GoogleIcon = memo(() => {
   const theme = useTheme();
@@ -23,16 +28,29 @@ export const SignInUpWithGoogle = ({
 }) => {
   const { t } = useLingui();
   const signInUpStep = useRecoilValue(signInUpStepState);
+  const { lastAuthenticatedMethod, setLastAuthenticatedMethod } =
+    useLastAuthenticatedMethod();
   const { signInWithGoogle } = useSignInWithGoogle();
+
+  const handleClick = () => {
+    setLastAuthenticatedMethod('google');
+    signInWithGoogle({ action });
+  };
+
+  const isLastUsed = lastAuthenticatedMethod === 'google';
+
   return (
     <>
-      <MainButton
-        Icon={GoogleIcon}
-        title={t`Continue with Google`}
-        onClick={() => signInWithGoogle({ action })}
-        variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
-        fullWidth
-      />
+      <StyledSSOButtonContainer>
+        <MainButton
+          Icon={GoogleIcon}
+          title={t`Continue with Google`}
+          onClick={handleClick}
+          variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
+          fullWidth
+        />
+        {isLastUsed && <StyledLastUsedPill label={t`Last`} />}
+      </StyledSSOButtonContainer>
       <HorizontalSeparator visible={false} />
     </>
   );

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithMicrosoft.tsx

@@ -1,14 +1,19 @@
+import { useLastAuthenticatedMethod } from '@/auth/sign-in-up/hooks/useLastAuthenticatedMethod';
 import { useSignInWithMicrosoft } from '@/auth/sign-in-up/hooks/useSignInWithMicrosoft';
 import {
   SignInUpStep,
   signInUpStepState,
 } from '@/auth/states/signInUpStepState';
+import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
 import { useTheme } from '@emotion/react';
 import { useLingui } from '@lingui/react/macro';
 import { useRecoilValue } from 'recoil';
 import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display';
 import { MainButton } from 'twenty-ui/input';
-import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
+import {
+  StyledLastUsedPill,
+  StyledSSOButtonContainer,
+} from './SignInUpSSOButtonStyles';
 
 export const SignInUpWithMicrosoft = ({
   action,
@@ -19,17 +24,29 @@ export const SignInUpWithMicrosoft = ({
   const { t } = useLingui();
 
   const signInUpStep = useRecoilValue(signInUpStepState);
+  const { lastAuthenticatedMethod, setLastAuthenticatedMethod } =
+    useLastAuthenticatedMethod();
   const { signInWithMicrosoft } = useSignInWithMicrosoft();
 
+  const handleClick = () => {
+    setLastAuthenticatedMethod('microsoft');
+    signInWithMicrosoft({ action });
+  };
+
+  const isLastUsed = lastAuthenticatedMethod === 'microsoft';
+
   return (
     <>
-      <MainButton
-        Icon={() => <IconMicrosoft size={theme.icon.size.md} />}
-        title={t`Continue with Microsoft`}
-        onClick={() => signInWithMicrosoft({ action })}
-        variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
-        fullWidth
-      />
+      <StyledSSOButtonContainer>
+        <MainButton
+          Icon={() => <IconMicrosoft size={theme.icon.size.md} />}
+          title={t`Continue with Microsoft`}
+          onClick={handleClick}
+          variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
+          fullWidth
+        />
+        {isLastUsed && <StyledLastUsedPill label={t`Last`} />}
+      </StyledSSOButtonContainer>
       <HorizontalSeparator visible={false} />
     </>
   );

packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithSSO.tsx

@@ -1,3 +1,4 @@
+import { useLastAuthenticatedMethod } from '@/auth/sign-in-up/hooks/useLastAuthenticatedMethod';
 import { useSSO } from '@/auth/sign-in-up/hooks/useSSO';
 import {
   SignInUpStep,
@@ -10,18 +11,24 @@ import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { isDefined } from 'twenty-shared/utils';
 import { HorizontalSeparator, IconLock } from 'twenty-ui/display';
 import { MainButton } from 'twenty-ui/input';
+import {
+  StyledLastUsedPill,
+  StyledSSOButtonContainer,
+} from './SignInUpSSOButtonStyles';
 
 export const SignInUpWithSSO = () => {
   const theme = useTheme();
   const { t } = useLingui();
   const setSignInUpStep = useSetRecoilState(signInUpStepState);
   const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
-
   const signInUpStep = useRecoilValue(signInUpStepState);
+  const { lastAuthenticatedMethod, setLastAuthenticatedMethod } =
+    useLastAuthenticatedMethod();
 
   const { redirectToSSOLoginPage } = useSSO();
 
   const signInWithSSO = () => {
+    setLastAuthenticatedMethod('sso');
     if (
       isDefined(workspaceAuthProviders) &&
       workspaceAuthProviders.sso.length === 1
@@ -32,15 +39,20 @@ export const SignInUpWithSSO = () => {
     setSignInUpStep(SignInUpStep.SSOIdentityProviderSelection);
   };
 
+  const isLastUsed = lastAuthenticatedMethod === 'sso';
+
   return (
     <>
-      <MainButton
-        Icon={() => <IconLock size={theme.icon.size.md} />}
-        title={t`Single sign-on (SSO)`}
-        onClick={signInWithSSO}
-        variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
-        fullWidth
-      />
+      <StyledSSOButtonContainer>
+        <MainButton
+          Icon={() => <IconLock size={theme.icon.size.md} />}
+          title={t`Single sign-on (SSO)`}
+          onClick={signInWithSSO}
+          variant={signInUpStep === SignInUpStep.Init ? undefined : 'secondary'}
+          fullWidth
+        />
+        {isLastUsed && <StyledLastUsedPill label={t`Last`} />}
+      </StyledSSOButtonContainer>
       <HorizontalSeparator visible={false} />
     </>
   );

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useLastAuthenticatedMethod.ts

@@ -0,0 +1,22 @@
+import { useRecoilValue } from 'recoil';
+
+import {
+  LAST_AUTHENTICATED_METHOD_STORAGE_KEY,
+  lastAuthenticatedMethodState,
+  type LastAuthenticatedMethod,
+} from '@/auth/states/lastAuthenticatedMethodState';
+
+export const useLastAuthenticatedMethod = () => {
+  const lastAuthenticatedMethod = useRecoilValue(lastAuthenticatedMethodState);
+  const setLastAuthenticatedMethod = (method: LastAuthenticatedMethod) => {
+    localStorage.setItem(
+      LAST_AUTHENTICATED_METHOD_STORAGE_KEY,
+      JSON.stringify(method),
+    );
+  };
+
+  return {
+    lastAuthenticatedMethod,
+    setLastAuthenticatedMethod,
+  };
+};

packages/twenty-front/src/modules/auth/states/lastAuthenticatedMethodState.ts

@@ -0,0 +1,13 @@
+import { atom } from 'recoil';
+import { localStorageEffect } from '~/utils/recoil/localStorageEffect';
+
+export type LastAuthenticatedMethod = 'google' | 'microsoft' | 'sso' | null;
+
+export const LAST_AUTHENTICATED_METHOD_STORAGE_KEY =
+  'lastAuthenticatedMethodState';
+
+export const lastAuthenticatedMethodState = atom<LastAuthenticatedMethod>({
+  key: LAST_AUTHENTICATED_METHOD_STORAGE_KEY,
+  default: null,
+  effects: [localStorageEffect()],
+});

packages/twenty-ui/src/theme/constants/FontDark.ts

@@ -11,6 +11,7 @@ export const FONT_DARK = {
     extraLight: GRAY_SCALE_DARK.gray7,
     inverted: GRAY_SCALE_DARK.gray1,
     danger: COLOR_DARK.red,
+    indigo: COLOR_DARK.blue9,
   },
   ...FONT_COMMON,
 };

packages/twenty-ui/src/theme/constants/FontLight.ts

@@ -11,6 +11,7 @@ export const FONT_LIGHT = {
     extraLight: GRAY_SCALE_LIGHT.gray7,
     inverted: GRAY_SCALE_LIGHT.gray1,
     danger: COLOR_LIGHT.red,
+    indigo: COLOR_LIGHT.blue9,
   },
   ...FONT_COMMON,
 };