diff --git a/.changeset/heavy-badgers-beam.md b/.changeset/heavy-badgers-beam.md new file mode 100644 index 00000000000..338593d3a9e --- /dev/null +++ b/.changeset/heavy-badgers-beam.md @@ -0,0 +1,5 @@ +--- +'@clerk/clerk-js': patch +--- + +Remove last used badge from rendering on sign-up. diff --git a/integration/tests/last-authentication-strategy.test.ts b/integration/tests/last-authentication-strategy.test.ts index e9d18230380..f4456f3e8bf 100644 --- a/integration/tests/last-authentication-strategy.test.ts +++ b/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); + }); }, ); diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx index a8be1ee3f55..ad745d83eba 100644 --- a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx +++ b/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx @@ -33,6 +33,7 @@ export const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps) return ( { if (shouldUsePopup) { diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx index a5f092f9a6e..7b0dd4b20d3 100644 --- a/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx +++ b/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx @@ -32,6 +32,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps) return ( { if (shouldUsePopup) { diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx index dd242540af3..940a5210a01 100644 --- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx +++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx @@ -41,6 +41,7 @@ type SocialButtonsRootProps = SocialButtonsProps & { web3Callback: (strategy: Web3Strategy) => Promise; 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( [...strategies], MAX_STRATEGIES_PER_ROW,