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

[tmilewski]

Description

Handles the case where last used SAML strategies aren't matched with their appropriate social button counterpart.

This is related to a backend change, but can be safely released whenever necessary.

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• Bug Fixes

  • Improved handling of SAML-based "last used" authentication strategies so they are recognized and displayed correctly as expected (fixes issues with the "Last used" badge and button highlighting).

• Tests

  • Added UI test coverage verifying the "Last used" badge behavior for Google sign-in, including correct badge visibility and social button arrangement.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9d45d86

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/clerk-js	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-expo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Comment	Nov 3, 2025 11:35pm

[coderabbitai]

Walkthrough

Adds a test for UI behavior when the last authentication strategy is SAML (Google) and normalizes SAML-prefixed strategy identifiers to their OAuth equivalents before validating and rendering the "Last used" badge.

Changes

Cohort / File(s)	Summary
Tests integration/tests/last-authentication-strategy.test.ts	Adds a test that mocks lastAuthenticationStrategy as saml_google, asserts a visible "Last used" badge, a "Last used Sign in with Google" button label, and the expected social button container layout.
UI component usage packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx	Replaces explicit prop showLastAuthenticationStrategy={true} with JSX shorthand showLastAuthenticationStrategy. No behavioral change.
Strategy normalization packages/clerk-js/src/ui/elements/SocialButtons.tsx	Adds normalization converting saml_ strategy identifiers to oauth_ equivalents before validating lastAuthenticationStrategy, falling back to null if invalid.
Release metadata .changeset/eleven-phones-say.md	Adds a changeset noting a patch release and a fix for handling last-used SAML strategies.

Sequence Diagram

sequenceDiagram
    participant UI as SignIn UI
    participant Social as SocialButtons

    UI->>Social: provide clientLastAuth = "saml_google"
    activate Social
    rect rgba(200,230,201,0.4)
      Note right of Social: Normalization step
      Social->>Social: converted = replacePrefix("saml_", "oauth_")
    end
    rect rgba(187,222,251,0.35)
      Note right of Social: Validation
      Social->>Social: isValidStrategy(converted) ? use converted : null
    end
    Social->>UI: render "Last used" badge and social buttons (using validated strategy)
    deactivate Social

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Review SocialButtons.tsx normalization to ensure edge cases (non-saml strings, unexpected prefixes) are handled safely.
• Verify the new test mirrors existing testing patterns and correctly asserts layout and labels.
• Confirm the prop shorthand change in SignInSocialButtons.tsx didn't remove intended explicitness in any JSX consumers.

Poem

🐰 I hopped through code with a curious twitch,
SAML became OAuth with a clever switch,
A "Last used" badge now proudly beams,
Two social rows and testing dreams,
Hooray — a tiny fix, a carrot-sized delight!

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title accurately summarizes the main change: fixing the handling of last-used SAML strategies in the clerk-js package, which matches the core objective and file modifications.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch tom/user-3864-last-used-isnt-showing-for-saml-accounts

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 5ef872c and 9d45d86.

📒 Files selected for processing (3)

• .changeset/eleven-phones-say.md (1 hunks)
• integration/tests/last-authentication-strategy.test.ts (1 hunks)
• packages/clerk-js/src/ui/elements/SocialButtons.tsx (1 hunks)

✅ Files skipped from review due to trivial changes (1)

• .changeset/eleven-phones-say.md

🚧 Files skipped from review as they are similar to previous changes (2)

• integration/tests/last-authentication-strategy.test.ts
• packages/clerk-js/src/ui/elements/SocialButtons.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)

• GitHub Check: Formatting | Dedupe | Changeset
• GitHub Check: Build Packages
• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: semgrep-cloud-platform/scan
• GitHub Check: semgrep-cloud-platform/scan

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7135

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7135

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7135

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7135

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7135

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7135

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7135

@clerk/clerk-expo

npm i https://pkg.pr.new/@clerk/clerk-expo@7135

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7135

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7135

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7135

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7135

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7135

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7135

@clerk/clerk-react

npm i https://pkg.pr.new/@clerk/clerk-react@7135

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7135

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7135

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7135

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7135

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7135

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7135

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7135

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7135

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7135

commit: 9d45d86