feat(chrome-extension): Add env constants

packages/chrome-extension/src/internal/clerk.ts

@@ -4,7 +4,7 @@ import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
 
 import { SCOPE, type Scope } from '../types';
-import { CLIENT_JWT_KEY, DEFAULT_LOCAL_HOST_PERMISSION } from './constants';
+import { CLIENT_JWT_KEY, DEFAULT_LOCAL_HOST_PERMISSION, PUBLISHABLE_KEY, SYNC_HOST } from './constants';
 import { assertPublishableKey } from './utils/errors';
 import { JWTHandler } from './utils/jwt-handler';
 import { validateManifest } from './utils/manifest';
@@ -20,17 +20,17 @@ Clerk.sdkMetadata = {
 };
 
 export type CreateClerkClientOptions = {
-  publishableKey: string;
+  publishableKey?: string;
   scope?: Scope;
   storageCache?: StorageCache;
   syncHost?: string;
 };
 
 export async function createClerkClient({
-  publishableKey,
+  publishableKey = PUBLISHABLE_KEY,
   scope,
   storageCache = BrowserStorageCache,
-  syncHost = process.env.CLERK_SYNC_HOST,
+  syncHost = SYNC_HOST,
 }: CreateClerkClientOptions): Promise<Clerk> {
   if (clerk) {
     return clerk;

packages/chrome-extension/src/internal/constants.ts

@@ -1,6 +1,37 @@
+// export const AUTH_HEADER = 'Authorization';
+// export const AUTH_HEADER_DEV = '__clerk_db_jwt';
+
+export const AUTH_HEADER = {
+  PRODUCTION: 'Authorization',
+  DEVELOPMENT: '__clerk_db_jwt',
+};
+
 export const CLIENT_JWT_KEY = '__client';
-export const STORAGE_KEY_CLIENT_JWT = '__clerk_client_jwt';
 export const DEFAULT_LOCAL_HOST_PERMISSION = 'http://localhost';
-export const AUTH_HEADER = 'Authorization';
-export const AUTH_HEADER_DEV = '__clerk_db_jwt';
-export const SESSION_ID_HEADER_DEV = '_clerk_session_id';
+export const STORAGE_KEY_CLIENT_JWT = '__clerk_client_jwt';
+
+// Environment Variables
+
+function getViteEnvVariable(name: string): string | undefined {
+  const viteEnvName = `VITE_${name}`;
+
+  // @ts-expect-error - Vite specific
+  if (typeof import.meta !== 'undefined' && import.meta.env && typeof import.meta.env[viteEnvName] === 'string') {
+    // @ts-expect-error - Vite specific
+    return import.meta.env[viteEnvName];
+  }
+
+  return undefined;
+}
+
+export const PUBLISHABLE_KEY =
+  process.env.PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY ||
+  getViteEnvVariable('CLERK_PUBLISHABLE_KEY') ||
+  process.env.CLERK_PUBLISHABLE_KEY ||
+  '';
+
+export const SYNC_HOST =
+  process.env.PLASMO_PUBLIC_CLERK_SYNC_HOST ||
+  getViteEnvVariable('CLERK_SYNC_HOST') ||
+  process.env.CLERK_SYNC_HOST ||
+  undefined;

packages/chrome-extension/src/internal/utils/response-handler.ts

@@ -1,6 +1,6 @@
 import type { Clerk } from '@clerk/clerk-js';
 
-import { AUTH_HEADER, AUTH_HEADER_DEV } from '../constants';
+import { AUTH_HEADER } from '../constants';
 import type { JWTHandler } from './jwt-handler';
 
 type Handler = Parameters<Clerk['__unstable__onAfterResponse']>[0];
@@ -20,7 +20,7 @@ export function responseHandler(jwtHandler: JWTHandler, { isProd }: { isProd: bo
 
 /** Retrieve the JWT to the FAPI response, per development instances */
 async function devHandler(response: Res, jwtHandler: JWTHandler) {
-  const header = response?.headers.get(AUTH_HEADER_DEV);
+  const header = response?.headers.get(AUTH_HEADER.DEVELOPMENT);
 
   if (header) {
     await jwtHandler.set(header);
@@ -31,7 +31,7 @@ async function devHandler(response: Res, jwtHandler: JWTHandler) {
 
 /** Retrieve the JWT to the FAPI response, per production instances */
 async function prodHandler(response: Res, jwtHandler: JWTHandler) {
-  const header = response?.headers.get(AUTH_HEADER);
+  const header = response?.headers.get(AUTH_HEADER.PRODUCTION);
 
   if (header?.startsWith('Bearer')) {
     const jwt = header.split(' ')[1] || undefined;

turbo.json

@@ -16,6 +16,7 @@
   "globalEnv": [
     "CLERK_*",
     "NEXT_PUBLIC_CLERK_*",
+    "PLASMO_PUBLIC_CLERK_*",
     "PUBLIC_CLERK_*",
     "NODE_ENV",
     "NODE_VERSION",