Repository: twentyhq/twenty
File: packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithSSO.tsx (TypeScript)

Code before:
`;

const StyledLastUsedPill = styled(Pill)`
  position: absolute;
  right: -${({ theme }) => theme.spacing(2)};
  top: -${({ theme }) => theme.spacing(2)};
  background: ${({ theme }) => theme.color.blue};
  color: ${({ theme }) => theme.font.color.inverted};
`;

export const SignInUpWithSSO = () => {
  const theme = useTheme();
  const { t } = useLingui();
  const setSignInUpStep = useSetRecoilState(signInUpStepState);
  const workspaceAuthProviders = useRecoilValue(workspaceAuthProvidersState);
  const signInUpStep = useRecoilValue(signInUpStepState);
  const lastAuthenticatedMethod = useRecoilValue(lastAuthenticatedMethodState);

  const { redirectToSSOLoginPage } = useSSO();

  const signInWithSSO = () => {
    // Save to localStorage synchronously before redirect to ensure it persists
    localStorage.setItem(
      LAST_AUTHENTICATED_METHOD_STORAGE_KEY,
      JSON.stringify('sso' as LastAuthenticatedMethod),
    );
    if (
      isDefined(workspaceAuthProviders) &&
      workspaceAuthProviders.sso.length === 1
    ) {
      return redirectToSSOLoginPage(workspaceAuthProviders.sso[0].id);
    }

    setSignInUpStep(SignInUpStep.SSOIdentityProviderSelection);
  };

  const isLastUsed = lastAuthenticatedMethod === 'sso';

  return (
    <>
      <StyledButtonContainer>
        <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`} />}
      </StyledButtonContainer>
      <HorizontalSeparator visible={false} />

Review comment (security):
The logic for saving the last authenticated method to localStorage is duplicated across all three sign-in components (SSO, Microsoft, and Google). This manual localStorage manipulation bypasses the Recoil atom's effects. Consider using `useSetRecoilState` to set the `lastAuthenticatedMethodState` value instead, which would automatically handle persistence through the `localStorageEffect` and eliminate code duplication.

Code after:
  const signInUpStep = useRecoilValue(signInUpStepState);
  const [lastAuthenticatedMethod, setLastAuthenticatedMethod] = useRecoilState(
    lastAuthenticatedMethodState,
  );
  const hasMultipleAuthMethods = useHasMultipleAuthMethods();

  const { redirectToSSOLoginPage } = useSSO();

  const signInWithSSO = () => {
    setLastAuthenticatedMethod(AuthenticatedMethod.SSO);
    if (
      isDefined(workspaceAuthProviders) &&
      workspaceAuthProviders.sso.length === 1
    ) {
      return redirectToSSOLoginPage(workspaceAuthProviders.sso[0].id);
    }

    setSignInUpStep(SignInUpStep.SSOIdentityProviderSelection);
  };

  const isLastUsed = lastAuthenticatedMethod === AuthenticatedMethod.SSO;

  return (
    <>
      <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 && hasMultipleAuthMethods && <LastUsedPill />}
      </StyledSSOButtonContainer>
      <HorizontalSeparator visible={false} />
    </>
  );
};