fix(clerk-js): Handle Last Used SAML strategies (#7135)

Author: tmilewski

.changeset/eleven-phones-say.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+fix: Appropriately handle last-used SAML strategies

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

@@ -74,6 +74,28 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes] })(
       await expect(socialButtonContainers.first().locator('.cl-button')).toHaveCount(3);
     });
 
+    test('should show "Last used" badge when lastAuthenticationStrategy is saml_google', async ({ page, context }) => {
+      const u = createTestUtils({ app, page, context });
+      await mockLastAuthenticationStrategyResponse(page, 'saml_google');
+
+      await u.po.signIn.goTo();
+      await u.po.signIn.waitForMounted();
+
+      // Ensure "Last used" badge is present.
+      const lastUsedBadge = page.locator('.cl-lastAuthenticationStrategyBadge');
+      await expect(lastUsedBadge).toBeVisible();
+      await expect(lastUsedBadge).toHaveCount(1);
+
+      const btn = page.getByRole('button', { name: 'Last used Sign in with Google' });
+      await expect(btn).toBeVisible();
+
+      // Ensure the last used social button has been pulled to the first row.
+      const socialButtonContainers = u.page.locator('.cl-socialButtons');
+      await expect(socialButtonContainers).toHaveCount(2);
+      await expect(socialButtonContainers.first().locator('.cl-button__google')).toHaveCount(1);
+      await expect(socialButtonContainers.last().locator('.cl-button')).toHaveCount(2);
+    });
+
     test('should show "Last used" badge when lastAuthenticationStrategy is oauth_google', async ({ page, context }) => {
       const u = createTestUtils({ app, page, context });
       await mockLastAuthenticationStrategyResponse(page, 'oauth_google');

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

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

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

@@ -87,7 +87,13 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
     return strategies.includes(strategy as TStrategy);
   };
 
-  const lastAuthenticationStrategy = clientLastAuth && isValidStrategy(clientLastAuth) ? clientLastAuth : null;
+  // Convert SAML strategies to OAuth strategies for consistency when matching last used strategy.
+  const convertedClientLastAuth = clientLastAuth?.startsWith('saml_')
+    ? clientLastAuth.replace('saml_', 'oauth_')
+    : clientLastAuth;
+
+  const lastAuthenticationStrategy =
+    convertedClientLastAuth && isValidStrategy(convertedClientLastAuth) ? convertedClientLastAuth : null;
 
   const { strategyRows, lastAuthenticationStrategyPresent } = distributeStrategiesIntoRows<TStrategy>(
     [...strategies],