Merge branch 'main' into vincent-and-the-doctor

Author: nikosdouvlis

.changeset/cold-bottles-watch.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/shared': patch
+---
+
+Propagate locale from ClerkProvider to PaymentElement

.changeset/heavy-badgers-beam.md

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

.changeset/modern-cars-fall.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Optimize Session.#hydrateCache to only cache token if it's new/different

.changeset/silly-jars-shave.md

@@ -0,0 +1,2 @@
+---
+---

.typedoc/custom-theme.mjs

@@ -44,6 +44,8 @@ class ClerkMarkdownThemeContext extends MarkdownThemeContext {
 
     const superPartials = this.partials;
 
+    this._insideFunctionSignature = false;
+
     this.partials = {
       ...superPartials,
       /**
@@ -153,10 +155,17 @@ class ClerkMarkdownThemeContext extends MarkdownThemeContext {
           );
         }
 
+        const prevInsideParams = this._insideFunctionSignature;
+        this._insideFunctionSignature = true;
         md.push(this.partials.signatureParameters(model.parameters || []));
+        this._insideFunctionSignature = prevInsideParams;
 
         if (model.type) {
-          md.push(`: ${this.partials.someType(model.type)}`);
+          const prevInsideType = this._insideFunctionSignature;
+          this._insideFunctionSignature = true;
+          const typeOutput = this.partials.someType(model.type);
+          this._insideFunctionSignature = prevInsideType;
+          md.push(`: ${typeOutput}`);
         }
 
         const result = md.join('');
@@ -353,6 +362,11 @@ class ClerkMarkdownThemeContext extends MarkdownThemeContext {
           .replace(/<code>/g, '')
           .replace(/<\/code>/g, '');
 
+        // Only wrap in <code> if NOT inside a function signature
+        if (this._insideFunctionSignature) {
+          return output;
+        }
+
         return `<code>${output}</code>`;
       },
       /**
@@ -371,6 +385,11 @@ class ClerkMarkdownThemeContext extends MarkdownThemeContext {
           .replace(/<code>/g, '')
           .replace(/<\/code>/g, '');
 
+        // Only wrap in <code> if NOT inside a function signature
+        if (this._insideFunctionSignature) {
+          return output;
+        }
+
         return `<code>${output}</code>`;
       },
       /**
@@ -394,6 +413,11 @@ class ClerkMarkdownThemeContext extends MarkdownThemeContext {
           )
           .join(delimiter);
 
+        // Only wrap in <code> if NOT inside a function signature
+        if (this._insideFunctionSignature) {
+          return output;
+        }
+
         return `<code>${output}</code>`;
       },
       /**
@@ -492,6 +516,32 @@ ${tabs}
           .replace(/<code>/g, '')
           .replace(/<\/code>/g, '');
 
+        // Only wrap in <code> if NOT inside a function signature
+        if (this._insideFunctionSignature) {
+          return output;
+        }
+
+        return `<code>${output}</code>`;
+      },
+      /**
+       * Ensures that reflection types (like Simplify wrapped types) are wrapped in a single codeblock
+       * @param {import('typedoc').ReflectionType} model
+       */
+      reflectionType: model => {
+        const defaultOutput = superPartials.reflectionType(model);
+
+        const output = defaultOutput
+          // Remove any backticks
+          .replace(/`/g, '')
+          // Remove any `<code>` and `</code>` tags
+          .replace(/<code>/g, '')
+          .replace(/<\/code>/g, '');
+
+        // Only wrap in <code> if NOT inside a function signature
+        if (this._insideFunctionSignature) {
+          return output;
+        }
+
         return `<code>${output}</code>`;
       },
       /**

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/backend/src/tokens/verify.ts

@@ -39,22 +39,11 @@ export type VerifyTokenOptions = Simplify<
  * Verifies a Clerk-generated token signature. Networkless if the `jwtKey` is provided. Otherwise, performs a network call to retrieve the JWKS from the [Backend API](https://clerk.com/docs/reference/backend-api/tag/JWKS#operation/GetJWKS){{ target: '_blank' }}.
  *
  * @param token - The token to verify.
- * @param options - Options for verifying the token.
+ * @param options - Options for verifying the token. It is recommended to set these options as [environment variables](/docs/guides/development/clerk-environment-variables#api-and-sdk-configuration) where possible, and then pass them to the function. For example, you can set the `secretKey` option using the `CLERK_SECRET_KEY` environment variable, and then pass it to the function like this: `verifyToken(token, { secretKey: process.env.CLERK_SECRET_KEY })`.
  *
  * @displayFunctionSignature
  * @hideReturns
  *
- * @paramExtension
- *
- * ### `VerifyTokenOptions`
- *
- * It is recommended to set these options as [environment variables](/docs/guides/development/clerk-environment-variables#api-and-sdk-configuration) where possible, and then pass them to the function. For example, you can set the `secretKey` option using the `CLERK_SECRET_KEY` environment variable, and then pass it to the function like this: `createClerkClient({ secretKey: process.env.CLERK_SECRET_KEY })`.
- *
- * > [!WARNING]
- * You must provide either `jwtKey` or `secretKey`.
- *
- * <Typedoc src="backend/verify-token-options" />
- *
  * @example
  *
  * The following example demonstrates how to use the [JavaScript Backend SDK](https://clerk.com/docs/reference/backend/overview) to verify the token signature.

packages/clerk-js/src/core/__tests__/tokenCache.test.ts

@@ -277,6 +277,41 @@ describe('SessionTokenCache', () => {
       // Critical: postMessage should NOT be called when handling a broadcast
       expect(mockBroadcastChannel.postMessage).not.toHaveBeenCalled();
     });
+
+    it('always broadcasts regardless of cache state', async () => {
+      mockBroadcastChannel.postMessage.mockClear();
+
+      const tokenId = 'sess_2GbDB4enNdCa5vS1zpC3Xzg9tK9';
+      const tokenResolver = Promise.resolve(
+        new Token({
+          id: tokenId,
+          jwt: mockJwt,
+          object: 'token',
+        }) as TokenResource,
+      );
+
+      SessionTokenCache.set({ tokenId, tokenResolver });
+      await tokenResolver;
+
+      expect(mockBroadcastChannel.postMessage).toHaveBeenCalledTimes(1);
+      const firstCall = mockBroadcastChannel.postMessage.mock.calls[0][0];
+      expect(firstCall.tokenId).toBe(tokenId);
+
+      mockBroadcastChannel.postMessage.mockClear();
+
+      const tokenResolver2 = Promise.resolve(
+        new Token({
+          id: tokenId,
+          jwt: mockJwt,
+          object: 'token',
+        }) as TokenResource,
+      );
+
+      SessionTokenCache.set({ tokenId, tokenResolver: tokenResolver2 });
+      await tokenResolver2;
+
+      expect(mockBroadcastChannel.postMessage).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('token expiration with absolute time', () => {

packages/clerk-js/src/core/clerk.ts

@@ -2420,6 +2420,7 @@ export class Clerk implements ClerkInterface {
       ..._props,
       options: this.#initOptions({ ...this.#options, ..._props.options }),
     };
+
     return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
   };
 

packages/clerk-js/src/core/resources/Session.ts

@@ -131,9 +131,15 @@ export class Session extends BaseResource implements SessionResource {
   };
 
   #hydrateCache = (token: TokenResource | null) => {
-    if (token) {
+    if (!token) {
+      return;
+    }
+
+    const tokenId = this.#getCacheId();
+    const existing = SessionTokenCache.get({ tokenId });
+    if (!existing) {
       SessionTokenCache.set({
-        tokenId: this.#getCacheId(),
+        tokenId,
         tokenResolver: Promise.resolve(token),
       });
     }