fix(shared): Generate publishable keys with unpadded Base64 encoding to match backend output (#8400)

Author: thiskevinwang

.changeset/neat-keys-shine.md

@@ -0,0 +1,5 @@
+---
+'@clerk/shared': patch
+---
+
+Generate publishable keys with unpadded Base64 encoding to match backend output.

packages/shared/src/__tests__/keys.spec.ts

@@ -15,9 +15,9 @@ import {
 
 describe('buildPublishableKey(frontendApi)', () => {
   const cases = [
-    ['fake-clerk-test.clerk.accounts.dev', 'pk_live_ZmFrZS1jbGVyay10ZXN0LmNsZXJrLmFjY291bnRzLmRldiQ='],
+    ['fake-clerk-test.clerk.accounts.dev', 'pk_live_ZmFrZS1jbGVyay10ZXN0LmNsZXJrLmFjY291bnRzLmRldiQ'],
     ['foo-bar-13.clerk.accounts.dev', 'pk_test_Zm9vLWJhci0xMy5jbGVyay5hY2NvdW50cy5kZXYk'],
-    ['clerk.boring.sawfly-91.lcl.dev', 'pk_test_Y2xlcmsuYm9yaW5nLnNhd2ZseS05MS5sY2wuZGV2JA=='],
+    ['clerk.boring.sawfly-91.lcl.dev', 'pk_test_Y2xlcmsuYm9yaW5nLnNhd2ZseS05MS5sY2wuZGV2JA'],
     ['clerk.boring.sawfly-91.lclclerk.com', 'pk_test_Y2xlcmsuYm9yaW5nLnNhd2ZseS05MS5sY2xjbGVyay5jb20k'],
   ];
 
@@ -37,7 +37,7 @@ describe('parsePublishableKey(key)', () => {
     ['', null],
     ['whatever', null],
     [
-      'pk_live_ZmFrZS1jbGVyay10ZXN0LmNsZXJrLmFjY291bnRzLmRldiQ=',
+      'pk_live_ZmFrZS1jbGVyay10ZXN0LmNsZXJrLmFjY291bnRzLmRldiQ',
       { instanceType: 'production', frontendApi: 'fake-clerk-test.clerk.accounts.dev' },
     ],
     [

packages/shared/src/keys.ts

@@ -30,17 +30,17 @@ const PUBLISHABLE_KEY_TEST_PREFIX = 'pk_test_';
 const PUBLISHABLE_FRONTEND_API_DEV_REGEX = /^(([a-z]+)-){2}([0-9]{1,2})\.clerk\.accounts([a-z.]*)(dev|com)$/i;
 
 /**
- * Converts a frontend API URL into a base64-encoded publishable key.
+ * Converts a frontend API URL into an unpadded base64-encoded publishable key.
  *
  * @param frontendApi - The frontend API URL (e.g., 'clerk.example.com').
- * @returns A base64-encoded publishable key with appropriate prefix (pk_live_ or pk_test_).
+ * @returns An unpadded base64-encoded publishable key with appropriate prefix (pk_live_ or pk_test_).
  */
 export function buildPublishableKey(frontendApi: string): string {
   const isDevKey =
     PUBLISHABLE_FRONTEND_API_DEV_REGEX.test(frontendApi) ||
     (frontendApi.startsWith('clerk.') && LEGACY_DEV_INSTANCE_SUFFIXES.some(s => frontendApi.endsWith(s)));
   const keyPrefix = isDevKey ? PUBLISHABLE_KEY_TEST_PREFIX : PUBLISHABLE_KEY_LIVE_PREFIX;
-  return `${keyPrefix}${isomorphicBtoa(`${frontendApi}$`)}`;
+  return `${keyPrefix}${isomorphicBtoa(`${frontendApi}$`).replace(/=+$/, '')}`;
 }
 
 /**