chore(clerk-js): Only render last used badge on sign-in (#7100)

Author: alexcarpenter

.changeset/heavy-badgers-beam.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Remove last used badge from rendering on sign-up.

integration/tests/last-authentication-strategy.test.ts

@@ -115,5 +115,18 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })(
       await expect(socialButtonContainers).toHaveCount(1);
       await expect(socialButtonContainers.first().locator('.cl-button')).toHaveCount(3);
     });
+
+    test('should not show "Last used" badge on sign-up even when lastAuthenticationStrategy is set', async ({
+      page,
+      context,
+    }) => {
+      const u = createTestUtils({ app, page, context });
+      await mockLastAuthenticationStrategyResponse(page, 'oauth_google');
+
+      await u.po.signUp.goTo();
+      await u.po.signUp.waitForMounted();
+
+      await expect(page.locator('.cl-lastAuthenticationStrategyBadge')).toHaveCount(0);
+    });
   },
 );

packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx

@@ -33,6 +33,7 @@ export const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps)
   return (
     <SocialButtons
       {...rest}
+      showLastAuthenticationStrategy={true}
       idleAfterDelay={!shouldUsePopup}
       oauthCallback={strategy => {
         if (shouldUsePopup) {

packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx

@@ -32,6 +32,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
   return (
     <SocialButtons
       {...rest}
+      showLastAuthenticationStrategy={false}
       idleAfterDelay={!shouldUsePopup}
       oauthCallback={(strategy: OAuthStrategy) => {
         if (shouldUsePopup) {

packages/clerk-js/src/ui/elements/SocialButtons.tsx

@@ -41,6 +41,7 @@ type SocialButtonsRootProps = SocialButtonsProps & {
   web3Callback: (strategy: Web3Strategy) => Promise<unknown>;
   alternativePhoneCodeCallback: (channel: PhoneCodeChannel) => void;
   idleAfterDelay?: boolean;
+  showLastAuthenticationStrategy?: boolean;
 };
 
 const isWeb3Strategy = (val: string): val is Web3Strategy => {
@@ -60,6 +61,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
     enableWeb3Providers = true,
     enableAlternativePhoneCodeProviders = true,
     idleAfterDelay = true,
+    showLastAuthenticationStrategy = false,
   } = props;
   const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData, alternativePhoneCodeChannels } =
     useEnabledThirdPartyProviders();
@@ -79,7 +81,14 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
     return null;
   }
 
-  const lastAuthenticationStrategy = clerk.client?.lastAuthenticationStrategy as TStrategy | null;
+  const clientLastAuth = showLastAuthenticationStrategy ? clerk.client?.lastAuthenticationStrategy : null;
+
+  const isValidStrategy = (strategy: unknown): strategy is TStrategy => {
+    return strategies.includes(strategy as TStrategy);
+  };
+
+  const lastAuthenticationStrategy = clientLastAuth && isValidStrategy(clientLastAuth) ? clientLastAuth : null;
+
   const { strategyRows, lastAuthenticationStrategyPresent } = distributeStrategiesIntoRows<TStrategy>(
     [...strategies],
     MAX_STRATEGIES_PER_ROW,