fix(clerk-js,clerk-react,chrome-extension): Build and consume packages without remotely hosted code

.changeset/afraid-toes-sin.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+---
+
+Include **BUILD_DISABLE_RHC** to allow for builds which remove remotely hosted code as it is a requirement for browser extensions.

.changeset/tidy-garlics-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': major
+---
+
+Consume packages with remotely hosted code removed as required by Manifest v3.

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

@@ -1,15 +1,16 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 
 import {
  createClerkClient as _createClerkClient,
  type CreateClerkClientOptions as _CreateClerkClientOptions,
 } from '../internal';
 import { SCOPE } from '../types';
 
+Clerk.mountComponentRenderer = undefined;
+
 export type CreateClerkClientOptions = Omit<_CreateClerkClientOptions, 'scope'>;
 
 export async function createClerkClient(opts: CreateClerkClientOptions): Promise<Clerk> {
- Clerk.mountComponentRenderer = undefined;
  const clerk = await _createClerkClient({ ...opts, scope: SCOPE.BACKGROUND });
  await clerk.load({ standardBrowser: false });
  return clerk;

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

@@ -1,4 +1,4 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
@@ -32,6 +32,10 @@ export async function createClerkClient({
  storageCache = BrowserStorageCache,
  syncHost,
 }: CreateClerkClientOptions): Promise<Clerk> {
+ if (scope === SCOPE.BACKGROUND) {
+ Clerk.mountComponentRenderer = undefined;
+ }
+
  // Don't cache background scripts as it can result in out-of-sync client information.
  if (clerk && scope !== SCOPE.BACKGROUND) {
  return clerk;

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
 import React from 'react';

packages/chrome-extension/tsup.config.ts

@@ -2,24 +2,27 @@ import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
 import { runAfterLast } from '../../scripts/utils';
-// @ts-ignore
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
  const isWatch = !!overrideOptions.watch;
  const shouldPublish = !!overrideOptions.env?.publish;
 
  const common: Options = {
- entry: ['./src/index.ts', './src/background/index.ts', './src/internal/index.ts', './src/react/index.ts'],
+ entry: ['./src/index.ts', './src/background/index.ts', './src/react/index.ts'],
  bundle: true,
  clean: true,
  minify: false,
  sourcemap: true,
  legacyOutput: true,
+ treeshake: true,
+ noExternal: ['@clerk/clerk-react'],
+ external: ['use-sync-external-store'],
  define: {
  PACKAGE_NAME: `"${name}"`,
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${isWatch}`,
+ __BUILD_DISABLE_RHC__: 'true',
  },
  };
 

packages/clerk-js/no-rhc/index.d.ts

@@ -0,0 +1,3 @@
+export { Clerk } from '../dist/types/index';
+
+export * from '../dist/types/index';

packages/clerk-js/no-rhc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.no-rhc');

packages/clerk-js/package.json

@@ -27,7 +27,8 @@
  "types": "dist/types/index.d.ts",
  "files": [
  "dist",
- "headless"
+ "headless",
+ "no-rhc"
  ],
  "scripts": {
  "build": "pnpm build:bundle && pnpm build:declarations",

packages/clerk-js/rspack.config.js

@@ -11,13 +11,15 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
  clerk: 'clerk',
+ clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
  clerkBrowser: 'clerk.browser',
  clerkHeadless: 'clerk.headless',
  clerkHeadlessBrowser: 'clerk.headless.browser',
 };
 
 const variantToSourceFile = {
  [variants.clerk]: './src/index.ts',
+ [variants.clerkNoRHC]: './src/index.ts',
  [variants.clerkBrowser]: './src/index.browser.ts',
  [variants.clerkHeadless]: './src/index.headless.ts',
  [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
@@ -27,9 +29,10 @@ const variantToSourceFile = {
  *
  * @param {object} config
  * @param {'development'|'production'} config.mode
+ * @param {boolean} [config.disableRHC=false]
  * @returns { import('@rspack/cli').Configuration }
  */
-const common = ({ mode }) => {
+const common = ({ mode, disableRHC = false }) => {
  return {
  mode,
  resolve: {
@@ -39,6 +42,7 @@ const common = ({ mode }) => {
  },
  plugins: [
  new rspack.DefinePlugin({
+ __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
  __DEV__: isDevelopment(mode),
  __PKG_VERSION__: JSON.stringify(packageJSON.version),
  __PKG_NAME__: JSON.stringify(packageJSON.name),
@@ -400,12 +404,63 @@ const prodConfig = ({ mode, env, analysis }) => {
  },
  });
 
+ const clerkEsmNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ filename: '[name].mjs',
+ libraryTarget: 'module',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
+ const clerkCjsNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ output: {
+ filename: '[name].js',
+ libraryTarget: 'commonjs',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
  // webpack-bundle-analyzer only supports a single build, use clerkBrowser as that's the default build we serve
  if (analysis) {
  return [clerkBrowser];
  }
 
- return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkCjs];
+ return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkEsmNoRHC, clerkCjs, clerkCjsNoRHC];
 };
 
 /**
@@ -478,6 +533,12 @@ const devConfig = ({ mode, env }) => {
  common({ mode }),
  commonForDev(),
  ),
+ // prettier-ignore
+ [variants.clerkBrowserNoRHC]: merge(
+ entryForVariant(variants.clerkBrowserNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForDev(),
+ ),
  [variants.clerkHeadless]: merge(
  entryForVariant(variants.clerkHeadless),
  common({ mode }),

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

@@ -109,6 +109,7 @@ import {
  clerkMissingSignInUrlAsSatellite,
  clerkOAuthCallbackDidNotCompleteSignInSignUp,
  clerkRedirectUrlIsMissingScheme,
+ clerkUnsupportedEnvironmentWarning,
 } from './errors';
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
@@ -175,7 +176,7 @@ export class Clerk implements ClerkInterface {
  // converted to protected environment to support `updateEnvironment` type assertion
  protected environment?: EnvironmentResource | null;
 
- #publishableKey: string = '';
+ #publishableKey = '';
  #domain: DomainOrProxyUrl['domain'];
  #proxyUrl: DomainOrProxyUrl['proxyUrl'];
  #authService?: AuthCookieService;
@@ -263,7 +264,9 @@ export class Clerk implements ClerkInterface {
  const publishableKey = parsePublishableKey(this.publishableKey);
 
  if (!publishableKey) {
- return errorThrower.throwInvalidPublishableKeyError({ key: this.publishableKey });
+ return errorThrower.throwInvalidPublishableKeyError({
+ key: this.publishableKey,
+ });
  }
 
  return publishableKey.frontendApi;
@@ -557,7 +560,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignIn', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -583,7 +586,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignUp', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -1325,7 +1328,13 @@ export class Clerk implements ClerkInterface {
  signUp,
  verifyEmailPath:
  params.verifyEmailAddressUrl ||
- buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true }),
+ buildURL(
+ {
+ base: displayConfig.signUpUrl,
+ hashPath: '/verify-email-address',
+ },
+ { stringify: true },
+ ),
  verifyPhonePath:
  params.verifyPhoneNumberUrl ||
  buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
@@ -1486,6 +1495,11 @@ export class Clerk implements ClerkInterface {
  public authenticateWithGoogleOneTap = async (
  params: AuthenticateWithGoogleOneTapParams,
  ): Promise<SignInResource | SignUpResource> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Google One Tap');
+ return this.client!.signIn; // TODO: Remove not null assertion
+ }
+
  return this.client?.signIn
  .create({
  strategy: 'google_one_tap',
@@ -1504,11 +1518,27 @@ export class Clerk implements ClerkInterface {
  };
 
  public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Metamask');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_metamask_signature',
+ });
  };
 
  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_coinbase_wallet_signature',
+ });
  };
 
  public authenticateWithWeb3 = async ({
@@ -1519,6 +1549,11 @@ export class Clerk implements ClerkInterface {
  strategy,
  legalAccepted,
  }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Web3');
+ return;
+ }
+
  if (!this.client || !this.environment) {
  return;
  }
@@ -1532,7 +1567,11 @@ export class Clerk implements ClerkInterface {
 
  let signInOrSignUp: SignInResource | SignUpResource;
  try {
- signInOrSignUp = await this.client.signIn.authenticateWithWeb3({ identifier, generateSignature, strategy });
+ signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
+ identifier,
+ generateSignature,
+ strategy,
+ });
  } catch (err) {
  if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
  signInOrSignUp = await this.client.signUp.authenticateWithWeb3({
@@ -1642,7 +1681,10 @@ export class Clerk implements ClerkInterface {
  // 2. clerk-js initializes propA with a default value
  // 3. The customer update propB independently of propA and window.Clerk.updateProps is called
  // 4. If we don't merge the new props with the current options, propA will be reset to undefined
- const props = { ..._props, options: this.#initOptions({ ...this.#options, ..._props.options }) };
+ const props = {
+ ..._props,
+ options: this.#initOptions({ ...this.#options, ..._props.options }),
+ };
  return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
  };
 

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

@@ -1,5 +1,17 @@
 const errorPrefix = 'ClerkJS:';
 
+/**
+ * Used to log a warning when a Clerk feature is used in an unsupported environment.
+ * (Development Only)
+ *
+ * @param strategy The strategy that is not supported in the current environment.
+ * @returns void
+ * @note This is a warning and not an error because the application will still work, but the feature will not be available.
+ */
+export function clerkUnsupportedEnvironmentWarning(strategy: string) {
+ console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`);
+}
+
 export function clerkNetworkError(url: string, e: Error): never {
  throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
@@ -8,7 +20,7 @@ export function clerkErrorInitFailed(): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`);
 }
 
-export function clerkErrorDevInitFailed(msg: string = ''): never {
+export function clerkErrorDevInitFailed(msg = ''): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`);
 }
 

.changeset/afraid-toes-sin.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+---
+
+Include **BUILD_DISABLE_RHC** to allow for builds which remove remotely hosted code as it is a requirement for browser extensions.

.changeset/tidy-garlics-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': major
+---
+
+Consume packages with remotely hosted code removed as required by Manifest v3.

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

@@ -1,15 +1,16 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 
 import {
  createClerkClient as _createClerkClient,
  type CreateClerkClientOptions as _CreateClerkClientOptions,
 } from '../internal';
 import { SCOPE } from '../types';
 
+Clerk.mountComponentRenderer = undefined;
+
 export type CreateClerkClientOptions = Omit<_CreateClerkClientOptions, 'scope'>;
 
 export async function createClerkClient(opts: CreateClerkClientOptions): Promise<Clerk> {
- Clerk.mountComponentRenderer = undefined;
  const clerk = await _createClerkClient({ ...opts, scope: SCOPE.BACKGROUND });
  await clerk.load({ standardBrowser: false });
  return clerk;

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

@@ -1,4 +1,4 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
@@ -32,6 +32,10 @@ export async function createClerkClient({
  storageCache = BrowserStorageCache,
  syncHost,
 }: CreateClerkClientOptions): Promise<Clerk> {
+ if (scope === SCOPE.BACKGROUND) {
+ Clerk.mountComponentRenderer = undefined;
+ }
+
  // Don't cache background scripts as it can result in out-of-sync client information.
  if (clerk && scope !== SCOPE.BACKGROUND) {
  return clerk;

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
 import React from 'react';

packages/chrome-extension/tsup.config.ts

@@ -2,24 +2,27 @@ import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
 import { runAfterLast } from '../../scripts/utils';
-// @ts-ignore
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
  const isWatch = !!overrideOptions.watch;
  const shouldPublish = !!overrideOptions.env?.publish;
 
  const common: Options = {
- entry: ['./src/index.ts', './src/background/index.ts', './src/internal/index.ts', './src/react/index.ts'],
+ entry: ['./src/index.ts', './src/background/index.ts', './src/react/index.ts'],
  bundle: true,
  clean: true,
  minify: false,
  sourcemap: true,
  legacyOutput: true,
+ treeshake: true,
+ noExternal: ['@clerk/clerk-react'],
+ external: ['use-sync-external-store'],
  define: {
  PACKAGE_NAME: `"${name}"`,
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${isWatch}`,
+ __BUILD_DISABLE_RHC__: 'true',
  },
  };
 

packages/clerk-js/no-rhc/index.d.ts

@@ -0,0 +1,3 @@
+export { Clerk } from '../dist/types/index';
+
+export * from '../dist/types/index';

packages/clerk-js/no-rhc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.no-rhc');

packages/clerk-js/package.json

@@ -27,7 +27,8 @@
  "types": "dist/types/index.d.ts",
  "files": [
  "dist",
- "headless"
+ "headless",
+ "no-rhc"
  ],
  "scripts": {
  "build": "pnpm build:bundle && pnpm build:declarations",

packages/clerk-js/rspack.config.js

@@ -11,13 +11,15 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
  clerk: 'clerk',
+ clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
  clerkBrowser: 'clerk.browser',
  clerkHeadless: 'clerk.headless',
  clerkHeadlessBrowser: 'clerk.headless.browser',
 };
 
 const variantToSourceFile = {
  [variants.clerk]: './src/index.ts',
+ [variants.clerkNoRHC]: './src/index.ts',
  [variants.clerkBrowser]: './src/index.browser.ts',
  [variants.clerkHeadless]: './src/index.headless.ts',
  [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
@@ -27,9 +29,10 @@ const variantToSourceFile = {
  *
  * @param {object} config
  * @param {'development'|'production'} config.mode
+ * @param {boolean} [config.disableRHC=false]
  * @returns { import('@rspack/cli').Configuration }
  */
-const common = ({ mode }) => {
+const common = ({ mode, disableRHC = false }) => {
  return {
  mode,
  resolve: {
@@ -39,6 +42,7 @@ const common = ({ mode }) => {
  },
  plugins: [
  new rspack.DefinePlugin({
+ __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
  __DEV__: isDevelopment(mode),
  __PKG_VERSION__: JSON.stringify(packageJSON.version),
  __PKG_NAME__: JSON.stringify(packageJSON.name),
@@ -400,12 +404,63 @@ const prodConfig = ({ mode, env, analysis }) => {
  },
  });
 
+ const clerkEsmNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ filename: '[name].mjs',
+ libraryTarget: 'module',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
+ const clerkCjsNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ output: {
+ filename: '[name].js',
+ libraryTarget: 'commonjs',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
  // webpack-bundle-analyzer only supports a single build, use clerkBrowser as that's the default build we serve
  if (analysis) {
  return [clerkBrowser];
  }
 
- return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkCjs];
+ return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkEsmNoRHC, clerkCjs, clerkCjsNoRHC];
 };
 
 /**
@@ -478,6 +533,12 @@ const devConfig = ({ mode, env }) => {
  common({ mode }),
  commonForDev(),
  ),
+ // prettier-ignore
+ [variants.clerkBrowserNoRHC]: merge(
+ entryForVariant(variants.clerkBrowserNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForDev(),
+ ),
  [variants.clerkHeadless]: merge(
  entryForVariant(variants.clerkHeadless),
  common({ mode }),

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

@@ -109,6 +109,7 @@ import {
  clerkMissingSignInUrlAsSatellite,
  clerkOAuthCallbackDidNotCompleteSignInSignUp,
  clerkRedirectUrlIsMissingScheme,
+ clerkUnsupportedEnvironmentWarning,
 } from './errors';
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
@@ -175,7 +176,7 @@ export class Clerk implements ClerkInterface {
  // converted to protected environment to support `updateEnvironment` type assertion
  protected environment?: EnvironmentResource | null;
 
- #publishableKey: string = '';
+ #publishableKey = '';
  #domain: DomainOrProxyUrl['domain'];
  #proxyUrl: DomainOrProxyUrl['proxyUrl'];
  #authService?: AuthCookieService;
@@ -263,7 +264,9 @@ export class Clerk implements ClerkInterface {
  const publishableKey = parsePublishableKey(this.publishableKey);
 
  if (!publishableKey) {
- return errorThrower.throwInvalidPublishableKeyError({ key: this.publishableKey });
+ return errorThrower.throwInvalidPublishableKeyError({
+ key: this.publishableKey,
+ });
  }
 
  return publishableKey.frontendApi;
@@ -557,7 +560,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignIn', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -583,7 +586,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignUp', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -1325,7 +1328,13 @@ export class Clerk implements ClerkInterface {
  signUp,
  verifyEmailPath:
  params.verifyEmailAddressUrl ||
- buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true }),
+ buildURL(
+ {
+ base: displayConfig.signUpUrl,
+ hashPath: '/verify-email-address',
+ },
+ { stringify: true },
+ ),
  verifyPhonePath:
  params.verifyPhoneNumberUrl ||
  buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
@@ -1486,6 +1495,11 @@ export class Clerk implements ClerkInterface {
  public authenticateWithGoogleOneTap = async (
  params: AuthenticateWithGoogleOneTapParams,
  ): Promise<SignInResource | SignUpResource> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Google One Tap');
+ return this.client!.signIn; // TODO: Remove not null assertion
+ }
+
  return this.client?.signIn
  .create({
  strategy: 'google_one_tap',
@@ -1504,11 +1518,27 @@ export class Clerk implements ClerkInterface {
  };
 
  public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Metamask');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_metamask_signature',
+ });
  };
 
  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_coinbase_wallet_signature',
+ });
  };
 
  public authenticateWithWeb3 = async ({
@@ -1519,6 +1549,11 @@ export class Clerk implements ClerkInterface {
  strategy,
  legalAccepted,
  }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Web3');
+ return;
+ }
+
  if (!this.client || !this.environment) {
  return;
  }
@@ -1532,7 +1567,11 @@ export class Clerk implements ClerkInterface {
 
  let signInOrSignUp: SignInResource | SignUpResource;
  try {
- signInOrSignUp = await this.client.signIn.authenticateWithWeb3({ identifier, generateSignature, strategy });
+ signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
+ identifier,
+ generateSignature,
+ strategy,
+ });
  } catch (err) {
  if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
  signInOrSignUp = await this.client.signUp.authenticateWithWeb3({
@@ -1642,7 +1681,10 @@ export class Clerk implements ClerkInterface {
  // 2. clerk-js initializes propA with a default value
  // 3. The customer update propB independently of propA and window.Clerk.updateProps is called
  // 4. If we don't merge the new props with the current options, propA will be reset to undefined
- const props = { ..._props, options: this.#initOptions({ ...this.#options, ..._props.options }) };
+ const props = {
+ ..._props,
+ options: this.#initOptions({ ...this.#options, ..._props.options }),
+ };
  return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
  };
 

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

@@ -1,5 +1,17 @@
 const errorPrefix = 'ClerkJS:';
 
+/**
+ * Used to log a warning when a Clerk feature is used in an unsupported environment.
+ * (Development Only)
+ *
+ * @param strategy The strategy that is not supported in the current environment.
+ * @returns void
+ * @note This is a warning and not an error because the application will still work, but the feature will not be available.
+ */
+export function clerkUnsupportedEnvironmentWarning(strategy: string) {
+ console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`);
+}
+
 export function clerkNetworkError(url: string, e: Error): never {
  throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
@@ -8,7 +20,7 @@ export function clerkErrorInitFailed(): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`);
 }
 
-export function clerkErrorDevInitFailed(msg: string = ''): never {
+export function clerkErrorDevInitFailed(msg = ''): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`);
 }
 

.changeset/afraid-toes-sin.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+---
+
+Include **BUILD_DISABLE_RHC** to allow for builds which remove remotely hosted code as it is a requirement for browser extensions.

.changeset/tidy-garlics-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': major
+---
+
+Consume packages with remotely hosted code removed as required by Manifest v3.

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

@@ -1,15 +1,16 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 
 import {
  createClerkClient as _createClerkClient,
  type CreateClerkClientOptions as _CreateClerkClientOptions,
 } from '../internal';
 import { SCOPE } from '../types';
 
+Clerk.mountComponentRenderer = undefined;
+
 export type CreateClerkClientOptions = Omit<_CreateClerkClientOptions, 'scope'>;
 
 export async function createClerkClient(opts: CreateClerkClientOptions): Promise<Clerk> {
- Clerk.mountComponentRenderer = undefined;
  const clerk = await _createClerkClient({ ...opts, scope: SCOPE.BACKGROUND });
  await clerk.load({ standardBrowser: false });
  return clerk;

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

@@ -1,4 +1,4 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
@@ -32,6 +32,10 @@ export async function createClerkClient({
  storageCache = BrowserStorageCache,
  syncHost,
 }: CreateClerkClientOptions): Promise<Clerk> {
+ if (scope === SCOPE.BACKGROUND) {
+ Clerk.mountComponentRenderer = undefined;
+ }
+
  // Don't cache background scripts as it can result in out-of-sync client information.
  if (clerk && scope !== SCOPE.BACKGROUND) {
  return clerk;

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
 import React from 'react';

packages/chrome-extension/tsup.config.ts

@@ -2,24 +2,27 @@ import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
 import { runAfterLast } from '../../scripts/utils';
-// @ts-ignore
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
  const isWatch = !!overrideOptions.watch;
  const shouldPublish = !!overrideOptions.env?.publish;
 
  const common: Options = {
- entry: ['./src/index.ts', './src/background/index.ts', './src/internal/index.ts', './src/react/index.ts'],
+ entry: ['./src/index.ts', './src/background/index.ts', './src/react/index.ts'],
  bundle: true,
  clean: true,
  minify: false,
  sourcemap: true,
  legacyOutput: true,
+ treeshake: true,
+ noExternal: ['@clerk/clerk-react'],
+ external: ['use-sync-external-store'],
  define: {
  PACKAGE_NAME: `"${name}"`,
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${isWatch}`,
+ __BUILD_DISABLE_RHC__: 'true',
  },
  };
 

packages/clerk-js/no-rhc/index.d.ts

@@ -0,0 +1,3 @@
+export { Clerk } from '../dist/types/index';
+
+export * from '../dist/types/index';

packages/clerk-js/no-rhc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.no-rhc');

packages/clerk-js/package.json

@@ -27,7 +27,8 @@
  "types": "dist/types/index.d.ts",
  "files": [
  "dist",
- "headless"
+ "headless",
+ "no-rhc"
  ],
  "scripts": {
  "build": "pnpm build:bundle && pnpm build:declarations",

packages/clerk-js/rspack.config.js

@@ -11,13 +11,15 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
  clerk: 'clerk',
+ clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
  clerkBrowser: 'clerk.browser',
  clerkHeadless: 'clerk.headless',
  clerkHeadlessBrowser: 'clerk.headless.browser',
 };
 
 const variantToSourceFile = {
  [variants.clerk]: './src/index.ts',
+ [variants.clerkNoRHC]: './src/index.ts',
  [variants.clerkBrowser]: './src/index.browser.ts',
  [variants.clerkHeadless]: './src/index.headless.ts',
  [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
@@ -27,9 +29,10 @@ const variantToSourceFile = {
  *
  * @param {object} config
  * @param {'development'|'production'} config.mode
+ * @param {boolean} [config.disableRHC=false]
  * @returns { import('@rspack/cli').Configuration }
  */
-const common = ({ mode }) => {
+const common = ({ mode, disableRHC = false }) => {
  return {
  mode,
  resolve: {
@@ -39,6 +42,7 @@ const common = ({ mode }) => {
  },
  plugins: [
  new rspack.DefinePlugin({
+ __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
  __DEV__: isDevelopment(mode),
  __PKG_VERSION__: JSON.stringify(packageJSON.version),
  __PKG_NAME__: JSON.stringify(packageJSON.name),
@@ -400,12 +404,63 @@ const prodConfig = ({ mode, env, analysis }) => {
  },
  });
 
+ const clerkEsmNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ filename: '[name].mjs',
+ libraryTarget: 'module',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
+ const clerkCjsNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ output: {
+ filename: '[name].js',
+ libraryTarget: 'commonjs',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
  // webpack-bundle-analyzer only supports a single build, use clerkBrowser as that's the default build we serve
  if (analysis) {
  return [clerkBrowser];
  }
 
- return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkCjs];
+ return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkEsmNoRHC, clerkCjs, clerkCjsNoRHC];
 };
 
 /**
@@ -478,6 +533,12 @@ const devConfig = ({ mode, env }) => {
  common({ mode }),
  commonForDev(),
  ),
+ // prettier-ignore
+ [variants.clerkBrowserNoRHC]: merge(
+ entryForVariant(variants.clerkBrowserNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForDev(),
+ ),
  [variants.clerkHeadless]: merge(
  entryForVariant(variants.clerkHeadless),
  common({ mode }),

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

@@ -109,6 +109,7 @@ import {
  clerkMissingSignInUrlAsSatellite,
  clerkOAuthCallbackDidNotCompleteSignInSignUp,
  clerkRedirectUrlIsMissingScheme,
+ clerkUnsupportedEnvironmentWarning,
 } from './errors';
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
@@ -175,7 +176,7 @@ export class Clerk implements ClerkInterface {
  // converted to protected environment to support `updateEnvironment` type assertion
  protected environment?: EnvironmentResource | null;
 
- #publishableKey: string = '';
+ #publishableKey = '';
  #domain: DomainOrProxyUrl['domain'];
  #proxyUrl: DomainOrProxyUrl['proxyUrl'];
  #authService?: AuthCookieService;
@@ -263,7 +264,9 @@ export class Clerk implements ClerkInterface {
  const publishableKey = parsePublishableKey(this.publishableKey);
 
  if (!publishableKey) {
- return errorThrower.throwInvalidPublishableKeyError({ key: this.publishableKey });
+ return errorThrower.throwInvalidPublishableKeyError({
+ key: this.publishableKey,
+ });
  }
 
  return publishableKey.frontendApi;
@@ -557,7 +560,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignIn', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -583,7 +586,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignUp', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -1325,7 +1328,13 @@ export class Clerk implements ClerkInterface {
  signUp,
  verifyEmailPath:
  params.verifyEmailAddressUrl ||
- buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true }),
+ buildURL(
+ {
+ base: displayConfig.signUpUrl,
+ hashPath: '/verify-email-address',
+ },
+ { stringify: true },
+ ),
  verifyPhonePath:
  params.verifyPhoneNumberUrl ||
  buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
@@ -1486,6 +1495,11 @@ export class Clerk implements ClerkInterface {
  public authenticateWithGoogleOneTap = async (
  params: AuthenticateWithGoogleOneTapParams,
  ): Promise<SignInResource | SignUpResource> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Google One Tap');
+ return this.client!.signIn; // TODO: Remove not null assertion
+ }
+
  return this.client?.signIn
  .create({
  strategy: 'google_one_tap',
@@ -1504,11 +1518,27 @@ export class Clerk implements ClerkInterface {
  };
 
  public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Metamask');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_metamask_signature',
+ });
  };
 
  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_coinbase_wallet_signature',
+ });
  };
 
  public authenticateWithWeb3 = async ({
@@ -1519,6 +1549,11 @@ export class Clerk implements ClerkInterface {
  strategy,
  legalAccepted,
  }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Web3');
+ return;
+ }
+
  if (!this.client || !this.environment) {
  return;
  }
@@ -1532,7 +1567,11 @@ export class Clerk implements ClerkInterface {
 
  let signInOrSignUp: SignInResource | SignUpResource;
  try {
- signInOrSignUp = await this.client.signIn.authenticateWithWeb3({ identifier, generateSignature, strategy });
+ signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
+ identifier,
+ generateSignature,
+ strategy,
+ });
  } catch (err) {
  if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
  signInOrSignUp = await this.client.signUp.authenticateWithWeb3({
@@ -1642,7 +1681,10 @@ export class Clerk implements ClerkInterface {
  // 2. clerk-js initializes propA with a default value
  // 3. The customer update propB independently of propA and window.Clerk.updateProps is called
  // 4. If we don't merge the new props with the current options, propA will be reset to undefined
- const props = { ..._props, options: this.#initOptions({ ...this.#options, ..._props.options }) };
+ const props = {
+ ..._props,
+ options: this.#initOptions({ ...this.#options, ..._props.options }),
+ };
  return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
  };
 

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

@@ -1,5 +1,17 @@
 const errorPrefix = 'ClerkJS:';
 
+/**
+ * Used to log a warning when a Clerk feature is used in an unsupported environment.
+ * (Development Only)
+ *
+ * @param strategy The strategy that is not supported in the current environment.
+ * @returns void
+ * @note This is a warning and not an error because the application will still work, but the feature will not be available.
+ */
+export function clerkUnsupportedEnvironmentWarning(strategy: string) {
+ console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`);
+}
+
 export function clerkNetworkError(url: string, e: Error): never {
  throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
@@ -8,7 +20,7 @@ export function clerkErrorInitFailed(): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`);
 }
 
-export function clerkErrorDevInitFailed(msg: string = ''): never {
+export function clerkErrorDevInitFailed(msg = ''): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`);
 }
 

.changeset/afraid-toes-sin.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+---
+
+Include **BUILD_DISABLE_RHC** to allow for builds which remove remotely hosted code as it is a requirement for browser extensions.

.changeset/tidy-garlics-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': major
+---
+
+Consume packages with remotely hosted code removed as required by Manifest v3.

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

@@ -1,15 +1,16 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 
 import {
  createClerkClient as _createClerkClient,
  type CreateClerkClientOptions as _CreateClerkClientOptions,
 } from '../internal';
 import { SCOPE } from '../types';
 
+Clerk.mountComponentRenderer = undefined;
+
 export type CreateClerkClientOptions = Omit<_CreateClerkClientOptions, 'scope'>;
 
 export async function createClerkClient(opts: CreateClerkClientOptions): Promise<Clerk> {
- Clerk.mountComponentRenderer = undefined;
  const clerk = await _createClerkClient({ ...opts, scope: SCOPE.BACKGROUND });
  await clerk.load({ standardBrowser: false });
  return clerk;

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

@@ -1,4 +1,4 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
@@ -32,6 +32,10 @@ export async function createClerkClient({
  storageCache = BrowserStorageCache,
  syncHost,
 }: CreateClerkClientOptions): Promise<Clerk> {
+ if (scope === SCOPE.BACKGROUND) {
+ Clerk.mountComponentRenderer = undefined;
+ }
+
  // Don't cache background scripts as it can result in out-of-sync client information.
  if (clerk && scope !== SCOPE.BACKGROUND) {
  return clerk;

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
 import React from 'react';

packages/chrome-extension/tsup.config.ts

@@ -2,24 +2,27 @@ import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
 import { runAfterLast } from '../../scripts/utils';
-// @ts-ignore
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
  const isWatch = !!overrideOptions.watch;
  const shouldPublish = !!overrideOptions.env?.publish;
 
  const common: Options = {
- entry: ['./src/index.ts', './src/background/index.ts', './src/internal/index.ts', './src/react/index.ts'],
+ entry: ['./src/index.ts', './src/background/index.ts', './src/react/index.ts'],
  bundle: true,
  clean: true,
  minify: false,
  sourcemap: true,
  legacyOutput: true,
+ treeshake: true,
+ noExternal: ['@clerk/clerk-react'],
+ external: ['use-sync-external-store'],
  define: {
  PACKAGE_NAME: `"${name}"`,
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${isWatch}`,
+ __BUILD_DISABLE_RHC__: 'true',
  },
  };
 

packages/clerk-js/no-rhc/index.d.ts

@@ -0,0 +1,3 @@
+export { Clerk } from '../dist/types/index';
+
+export * from '../dist/types/index';

packages/clerk-js/no-rhc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.no-rhc');

packages/clerk-js/package.json

@@ -27,7 +27,8 @@
  "types": "dist/types/index.d.ts",
  "files": [
  "dist",
- "headless"
+ "headless",
+ "no-rhc"
  ],
  "scripts": {
  "build": "pnpm build:bundle && pnpm build:declarations",

packages/clerk-js/rspack.config.js

@@ -11,13 +11,15 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
  clerk: 'clerk',
+ clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
  clerkBrowser: 'clerk.browser',
  clerkHeadless: 'clerk.headless',
  clerkHeadlessBrowser: 'clerk.headless.browser',
 };
 
 const variantToSourceFile = {
  [variants.clerk]: './src/index.ts',
+ [variants.clerkNoRHC]: './src/index.ts',
  [variants.clerkBrowser]: './src/index.browser.ts',
  [variants.clerkHeadless]: './src/index.headless.ts',
  [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
@@ -27,9 +29,10 @@ const variantToSourceFile = {
  *
  * @param {object} config
  * @param {'development'|'production'} config.mode
+ * @param {boolean} [config.disableRHC=false]
  * @returns { import('@rspack/cli').Configuration }
  */
-const common = ({ mode }) => {
+const common = ({ mode, disableRHC = false }) => {
  return {
  mode,
  resolve: {
@@ -39,6 +42,7 @@ const common = ({ mode }) => {
  },
  plugins: [
  new rspack.DefinePlugin({
+ __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
  __DEV__: isDevelopment(mode),
  __PKG_VERSION__: JSON.stringify(packageJSON.version),
  __PKG_NAME__: JSON.stringify(packageJSON.name),
@@ -400,12 +404,63 @@ const prodConfig = ({ mode, env, analysis }) => {
  },
  });
 
+ const clerkEsmNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ filename: '[name].mjs',
+ libraryTarget: 'module',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
+ const clerkCjsNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ output: {
+ filename: '[name].js',
+ libraryTarget: 'commonjs',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
  // webpack-bundle-analyzer only supports a single build, use clerkBrowser as that's the default build we serve
  if (analysis) {
  return [clerkBrowser];
  }
 
- return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkCjs];
+ return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkEsmNoRHC, clerkCjs, clerkCjsNoRHC];
 };
 
 /**
@@ -478,6 +533,12 @@ const devConfig = ({ mode, env }) => {
  common({ mode }),
  commonForDev(),
  ),
+ // prettier-ignore
+ [variants.clerkBrowserNoRHC]: merge(
+ entryForVariant(variants.clerkBrowserNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForDev(),
+ ),
  [variants.clerkHeadless]: merge(
  entryForVariant(variants.clerkHeadless),
  common({ mode }),

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

@@ -109,6 +109,7 @@ import {
  clerkMissingSignInUrlAsSatellite,
  clerkOAuthCallbackDidNotCompleteSignInSignUp,
  clerkRedirectUrlIsMissingScheme,
+ clerkUnsupportedEnvironmentWarning,
 } from './errors';
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
@@ -175,7 +176,7 @@ export class Clerk implements ClerkInterface {
  // converted to protected environment to support `updateEnvironment` type assertion
  protected environment?: EnvironmentResource | null;
 
- #publishableKey: string = '';
+ #publishableKey = '';
  #domain: DomainOrProxyUrl['domain'];
  #proxyUrl: DomainOrProxyUrl['proxyUrl'];
  #authService?: AuthCookieService;
@@ -263,7 +264,9 @@ export class Clerk implements ClerkInterface {
  const publishableKey = parsePublishableKey(this.publishableKey);
 
  if (!publishableKey) {
- return errorThrower.throwInvalidPublishableKeyError({ key: this.publishableKey });
+ return errorThrower.throwInvalidPublishableKeyError({
+ key: this.publishableKey,
+ });
  }
 
  return publishableKey.frontendApi;
@@ -557,7 +560,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignIn', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -583,7 +586,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignUp', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -1325,7 +1328,13 @@ export class Clerk implements ClerkInterface {
  signUp,
  verifyEmailPath:
  params.verifyEmailAddressUrl ||
- buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true }),
+ buildURL(
+ {
+ base: displayConfig.signUpUrl,
+ hashPath: '/verify-email-address',
+ },
+ { stringify: true },
+ ),
  verifyPhonePath:
  params.verifyPhoneNumberUrl ||
  buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
@@ -1486,6 +1495,11 @@ export class Clerk implements ClerkInterface {
  public authenticateWithGoogleOneTap = async (
  params: AuthenticateWithGoogleOneTapParams,
  ): Promise<SignInResource | SignUpResource> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Google One Tap');
+ return this.client!.signIn; // TODO: Remove not null assertion
+ }
+
  return this.client?.signIn
  .create({
  strategy: 'google_one_tap',
@@ -1504,11 +1518,27 @@ export class Clerk implements ClerkInterface {
  };
 
  public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Metamask');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_metamask_signature',
+ });
  };
 
  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_coinbase_wallet_signature',
+ });
  };
 
  public authenticateWithWeb3 = async ({
@@ -1519,6 +1549,11 @@ export class Clerk implements ClerkInterface {
  strategy,
  legalAccepted,
  }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Web3');
+ return;
+ }
+
  if (!this.client || !this.environment) {
  return;
  }
@@ -1532,7 +1567,11 @@ export class Clerk implements ClerkInterface {
 
  let signInOrSignUp: SignInResource | SignUpResource;
  try {
- signInOrSignUp = await this.client.signIn.authenticateWithWeb3({ identifier, generateSignature, strategy });
+ signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
+ identifier,
+ generateSignature,
+ strategy,
+ });
  } catch (err) {
  if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
  signInOrSignUp = await this.client.signUp.authenticateWithWeb3({
@@ -1642,7 +1681,10 @@ export class Clerk implements ClerkInterface {
  // 2. clerk-js initializes propA with a default value
  // 3. The customer update propB independently of propA and window.Clerk.updateProps is called
  // 4. If we don't merge the new props with the current options, propA will be reset to undefined
- const props = { ..._props, options: this.#initOptions({ ...this.#options, ..._props.options }) };
+ const props = {
+ ..._props,
+ options: this.#initOptions({ ...this.#options, ..._props.options }),
+ };
  return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
  };
 

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

@@ -1,5 +1,17 @@
 const errorPrefix = 'ClerkJS:';
 
+/**
+ * Used to log a warning when a Clerk feature is used in an unsupported environment.
+ * (Development Only)
+ *
+ * @param strategy The strategy that is not supported in the current environment.
+ * @returns void
+ * @note This is a warning and not an error because the application will still work, but the feature will not be available.
+ */
+export function clerkUnsupportedEnvironmentWarning(strategy: string) {
+ console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`);
+}
+
 export function clerkNetworkError(url: string, e: Error): never {
  throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
@@ -8,7 +20,7 @@ export function clerkErrorInitFailed(): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`);
 }
 
-export function clerkErrorDevInitFailed(msg: string = ''): never {
+export function clerkErrorDevInitFailed(msg = ''): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`);
 }
 

.changeset/afraid-toes-sin.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+---
+
+Include **BUILD_DISABLE_RHC** to allow for builds which remove remotely hosted code as it is a requirement for browser extensions.

.changeset/tidy-garlics-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': major
+---
+
+Consume packages with remotely hosted code removed as required by Manifest v3.

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

@@ -1,15 +1,16 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 
 import {
  createClerkClient as _createClerkClient,
  type CreateClerkClientOptions as _CreateClerkClientOptions,
 } from '../internal';
 import { SCOPE } from '../types';
 
+Clerk.mountComponentRenderer = undefined;
+
 export type CreateClerkClientOptions = Omit<_CreateClerkClientOptions, 'scope'>;
 
 export async function createClerkClient(opts: CreateClerkClientOptions): Promise<Clerk> {
- Clerk.mountComponentRenderer = undefined;
  const clerk = await _createClerkClient({ ...opts, scope: SCOPE.BACKGROUND });
  await clerk.load({ standardBrowser: false });
  return clerk;

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

@@ -1,4 +1,4 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
@@ -32,6 +32,10 @@ export async function createClerkClient({
  storageCache = BrowserStorageCache,
  syncHost,
 }: CreateClerkClientOptions): Promise<Clerk> {
+ if (scope === SCOPE.BACKGROUND) {
+ Clerk.mountComponentRenderer = undefined;
+ }
+
  // Don't cache background scripts as it can result in out-of-sync client information.
  if (clerk && scope !== SCOPE.BACKGROUND) {
  return clerk;

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
 import React from 'react';

packages/chrome-extension/tsup.config.ts

@@ -2,24 +2,27 @@ import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
 import { runAfterLast } from '../../scripts/utils';
-// @ts-ignore
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
  const isWatch = !!overrideOptions.watch;
  const shouldPublish = !!overrideOptions.env?.publish;
 
  const common: Options = {
- entry: ['./src/index.ts', './src/background/index.ts', './src/internal/index.ts', './src/react/index.ts'],
+ entry: ['./src/index.ts', './src/background/index.ts', './src/react/index.ts'],
  bundle: true,
  clean: true,
  minify: false,
  sourcemap: true,
  legacyOutput: true,
+ treeshake: true,
+ noExternal: ['@clerk/clerk-react'],
+ external: ['use-sync-external-store'],
  define: {
  PACKAGE_NAME: `"${name}"`,
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${isWatch}`,
+ __BUILD_DISABLE_RHC__: 'true',
  },
  };
 

packages/clerk-js/no-rhc/index.d.ts

@@ -0,0 +1,3 @@
+export { Clerk } from '../dist/types/index';
+
+export * from '../dist/types/index';

packages/clerk-js/no-rhc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.no-rhc');

packages/clerk-js/package.json

@@ -27,7 +27,8 @@
  "types": "dist/types/index.d.ts",
  "files": [
  "dist",
- "headless"
+ "headless",
+ "no-rhc"
  ],
  "scripts": {
  "build": "pnpm build:bundle && pnpm build:declarations",

packages/clerk-js/rspack.config.js

@@ -11,13 +11,15 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
  clerk: 'clerk',
+ clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
  clerkBrowser: 'clerk.browser',
  clerkHeadless: 'clerk.headless',
  clerkHeadlessBrowser: 'clerk.headless.browser',
 };
 
 const variantToSourceFile = {
  [variants.clerk]: './src/index.ts',
+ [variants.clerkNoRHC]: './src/index.ts',
  [variants.clerkBrowser]: './src/index.browser.ts',
  [variants.clerkHeadless]: './src/index.headless.ts',
  [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
@@ -27,9 +29,10 @@ const variantToSourceFile = {
  *
  * @param {object} config
  * @param {'development'|'production'} config.mode
+ * @param {boolean} [config.disableRHC=false]
  * @returns { import('@rspack/cli').Configuration }
  */
-const common = ({ mode }) => {
+const common = ({ mode, disableRHC = false }) => {
  return {
  mode,
  resolve: {
@@ -39,6 +42,7 @@ const common = ({ mode }) => {
  },
  plugins: [
  new rspack.DefinePlugin({
+ __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
  __DEV__: isDevelopment(mode),
  __PKG_VERSION__: JSON.stringify(packageJSON.version),
  __PKG_NAME__: JSON.stringify(packageJSON.name),
@@ -400,12 +404,63 @@ const prodConfig = ({ mode, env, analysis }) => {
  },
  });
 
+ const clerkEsmNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ filename: '[name].mjs',
+ libraryTarget: 'module',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
+ const clerkCjsNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ output: {
+ filename: '[name].js',
+ libraryTarget: 'commonjs',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
  // webpack-bundle-analyzer only supports a single build, use clerkBrowser as that's the default build we serve
  if (analysis) {
  return [clerkBrowser];
  }
 
- return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkCjs];
+ return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkEsmNoRHC, clerkCjs, clerkCjsNoRHC];
 };
 
 /**
@@ -478,6 +533,12 @@ const devConfig = ({ mode, env }) => {
  common({ mode }),
  commonForDev(),
  ),
+ // prettier-ignore
+ [variants.clerkBrowserNoRHC]: merge(
+ entryForVariant(variants.clerkBrowserNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForDev(),
+ ),
  [variants.clerkHeadless]: merge(
  entryForVariant(variants.clerkHeadless),
  common({ mode }),

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

@@ -109,6 +109,7 @@ import {
  clerkMissingSignInUrlAsSatellite,
  clerkOAuthCallbackDidNotCompleteSignInSignUp,
  clerkRedirectUrlIsMissingScheme,
+ clerkUnsupportedEnvironmentWarning,
 } from './errors';
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
@@ -175,7 +176,7 @@ export class Clerk implements ClerkInterface {
  // converted to protected environment to support `updateEnvironment` type assertion
  protected environment?: EnvironmentResource | null;
 
- #publishableKey: string = '';
+ #publishableKey = '';
  #domain: DomainOrProxyUrl['domain'];
  #proxyUrl: DomainOrProxyUrl['proxyUrl'];
  #authService?: AuthCookieService;
@@ -263,7 +264,9 @@ export class Clerk implements ClerkInterface {
  const publishableKey = parsePublishableKey(this.publishableKey);
 
  if (!publishableKey) {
- return errorThrower.throwInvalidPublishableKeyError({ key: this.publishableKey });
+ return errorThrower.throwInvalidPublishableKeyError({
+ key: this.publishableKey,
+ });
  }
 
  return publishableKey.frontendApi;
@@ -557,7 +560,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignIn', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -583,7 +586,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignUp', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -1325,7 +1328,13 @@ export class Clerk implements ClerkInterface {
  signUp,
  verifyEmailPath:
  params.verifyEmailAddressUrl ||
- buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true }),
+ buildURL(
+ {
+ base: displayConfig.signUpUrl,
+ hashPath: '/verify-email-address',
+ },
+ { stringify: true },
+ ),
  verifyPhonePath:
  params.verifyPhoneNumberUrl ||
  buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
@@ -1486,6 +1495,11 @@ export class Clerk implements ClerkInterface {
  public authenticateWithGoogleOneTap = async (
  params: AuthenticateWithGoogleOneTapParams,
  ): Promise<SignInResource | SignUpResource> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Google One Tap');
+ return this.client!.signIn; // TODO: Remove not null assertion
+ }
+
  return this.client?.signIn
  .create({
  strategy: 'google_one_tap',
@@ -1504,11 +1518,27 @@ export class Clerk implements ClerkInterface {
  };
 
  public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Metamask');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_metamask_signature',
+ });
  };
 
  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_coinbase_wallet_signature',
+ });
  };
 
  public authenticateWithWeb3 = async ({
@@ -1519,6 +1549,11 @@ export class Clerk implements ClerkInterface {
  strategy,
  legalAccepted,
  }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Web3');
+ return;
+ }
+
  if (!this.client || !this.environment) {
  return;
  }
@@ -1532,7 +1567,11 @@ export class Clerk implements ClerkInterface {
 
  let signInOrSignUp: SignInResource | SignUpResource;
  try {
- signInOrSignUp = await this.client.signIn.authenticateWithWeb3({ identifier, generateSignature, strategy });
+ signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
+ identifier,
+ generateSignature,
+ strategy,
+ });
  } catch (err) {
  if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
  signInOrSignUp = await this.client.signUp.authenticateWithWeb3({
@@ -1642,7 +1681,10 @@ export class Clerk implements ClerkInterface {
  // 2. clerk-js initializes propA with a default value
  // 3. The customer update propB independently of propA and window.Clerk.updateProps is called
  // 4. If we don't merge the new props with the current options, propA will be reset to undefined
- const props = { ..._props, options: this.#initOptions({ ...this.#options, ..._props.options }) };
+ const props = {
+ ..._props,
+ options: this.#initOptions({ ...this.#options, ..._props.options }),
+ };
  return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
  };
 

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

@@ -1,5 +1,17 @@
 const errorPrefix = 'ClerkJS:';
 
+/**
+ * Used to log a warning when a Clerk feature is used in an unsupported environment.
+ * (Development Only)
+ *
+ * @param strategy The strategy that is not supported in the current environment.
+ * @returns void
+ * @note This is a warning and not an error because the application will still work, but the feature will not be available.
+ */
+export function clerkUnsupportedEnvironmentWarning(strategy: string) {
+ console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`);
+}
+
 export function clerkNetworkError(url: string, e: Error): never {
  throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
@@ -8,7 +20,7 @@ export function clerkErrorInitFailed(): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`);
 }
 
-export function clerkErrorDevInitFailed(msg: string = ''): never {
+export function clerkErrorDevInitFailed(msg = ''): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`);
 }
 

.changeset/afraid-toes-sin.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+---
+
+Include **BUILD_DISABLE_RHC** to allow for builds which remove remotely hosted code as it is a requirement for browser extensions.

.changeset/tidy-garlics-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': major
+---
+
+Consume packages with remotely hosted code removed as required by Manifest v3.

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

@@ -1,15 +1,16 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 
 import {
  createClerkClient as _createClerkClient,
  type CreateClerkClientOptions as _CreateClerkClientOptions,
 } from '../internal';
 import { SCOPE } from '../types';
 
+Clerk.mountComponentRenderer = undefined;
+
 export type CreateClerkClientOptions = Omit<_CreateClerkClientOptions, 'scope'>;
 
 export async function createClerkClient(opts: CreateClerkClientOptions): Promise<Clerk> {
- Clerk.mountComponentRenderer = undefined;
  const clerk = await _createClerkClient({ ...opts, scope: SCOPE.BACKGROUND });
  await clerk.load({ standardBrowser: false });
  return clerk;

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

@@ -1,4 +1,4 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
@@ -32,6 +32,10 @@ export async function createClerkClient({
  storageCache = BrowserStorageCache,
  syncHost,
 }: CreateClerkClientOptions): Promise<Clerk> {
+ if (scope === SCOPE.BACKGROUND) {
+ Clerk.mountComponentRenderer = undefined;
+ }
+
  // Don't cache background scripts as it can result in out-of-sync client information.
  if (clerk && scope !== SCOPE.BACKGROUND) {
  return clerk;

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
 import React from 'react';

packages/chrome-extension/tsup.config.ts

@@ -2,24 +2,27 @@ import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
 import { runAfterLast } from '../../scripts/utils';
-// @ts-ignore
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
  const isWatch = !!overrideOptions.watch;
  const shouldPublish = !!overrideOptions.env?.publish;
 
  const common: Options = {
- entry: ['./src/index.ts', './src/background/index.ts', './src/internal/index.ts', './src/react/index.ts'],
+ entry: ['./src/index.ts', './src/background/index.ts', './src/react/index.ts'],
  bundle: true,
  clean: true,
  minify: false,
  sourcemap: true,
  legacyOutput: true,
+ treeshake: true,
+ noExternal: ['@clerk/clerk-react'],
+ external: ['use-sync-external-store'],
  define: {
  PACKAGE_NAME: `"${name}"`,
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${isWatch}`,
+ __BUILD_DISABLE_RHC__: 'true',
  },
  };
 

packages/clerk-js/no-rhc/index.d.ts

@@ -0,0 +1,3 @@
+export { Clerk } from '../dist/types/index';
+
+export * from '../dist/types/index';

packages/clerk-js/no-rhc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.no-rhc');

packages/clerk-js/package.json

@@ -27,7 +27,8 @@
  "types": "dist/types/index.d.ts",
  "files": [
  "dist",
- "headless"
+ "headless",
+ "no-rhc"
  ],
  "scripts": {
  "build": "pnpm build:bundle && pnpm build:declarations",

packages/clerk-js/rspack.config.js

@@ -11,13 +11,15 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
  clerk: 'clerk',
+ clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
  clerkBrowser: 'clerk.browser',
  clerkHeadless: 'clerk.headless',
  clerkHeadlessBrowser: 'clerk.headless.browser',
 };
 
 const variantToSourceFile = {
  [variants.clerk]: './src/index.ts',
+ [variants.clerkNoRHC]: './src/index.ts',
  [variants.clerkBrowser]: './src/index.browser.ts',
  [variants.clerkHeadless]: './src/index.headless.ts',
  [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
@@ -27,9 +29,10 @@ const variantToSourceFile = {
  *
  * @param {object} config
  * @param {'development'|'production'} config.mode
+ * @param {boolean} [config.disableRHC=false]
  * @returns { import('@rspack/cli').Configuration }
  */
-const common = ({ mode }) => {
+const common = ({ mode, disableRHC = false }) => {
  return {
  mode,
  resolve: {
@@ -39,6 +42,7 @@ const common = ({ mode }) => {
  },
  plugins: [
  new rspack.DefinePlugin({
+ __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
  __DEV__: isDevelopment(mode),
  __PKG_VERSION__: JSON.stringify(packageJSON.version),
  __PKG_NAME__: JSON.stringify(packageJSON.name),
@@ -400,12 +404,63 @@ const prodConfig = ({ mode, env, analysis }) => {
  },
  });
 
+ const clerkEsmNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ filename: '[name].mjs',
+ libraryTarget: 'module',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
+ const clerkCjsNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ output: {
+ filename: '[name].js',
+ libraryTarget: 'commonjs',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
  // webpack-bundle-analyzer only supports a single build, use clerkBrowser as that's the default build we serve
  if (analysis) {
  return [clerkBrowser];
  }
 
- return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkCjs];
+ return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkEsmNoRHC, clerkCjs, clerkCjsNoRHC];
 };
 
 /**
@@ -478,6 +533,12 @@ const devConfig = ({ mode, env }) => {
  common({ mode }),
  commonForDev(),
  ),
+ // prettier-ignore
+ [variants.clerkBrowserNoRHC]: merge(
+ entryForVariant(variants.clerkBrowserNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForDev(),
+ ),
  [variants.clerkHeadless]: merge(
  entryForVariant(variants.clerkHeadless),
  common({ mode }),

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

@@ -109,6 +109,7 @@ import {
  clerkMissingSignInUrlAsSatellite,
  clerkOAuthCallbackDidNotCompleteSignInSignUp,
  clerkRedirectUrlIsMissingScheme,
+ clerkUnsupportedEnvironmentWarning,
 } from './errors';
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
@@ -175,7 +176,7 @@ export class Clerk implements ClerkInterface {
  // converted to protected environment to support `updateEnvironment` type assertion
  protected environment?: EnvironmentResource | null;
 
- #publishableKey: string = '';
+ #publishableKey = '';
  #domain: DomainOrProxyUrl['domain'];
  #proxyUrl: DomainOrProxyUrl['proxyUrl'];
  #authService?: AuthCookieService;
@@ -263,7 +264,9 @@ export class Clerk implements ClerkInterface {
  const publishableKey = parsePublishableKey(this.publishableKey);
 
  if (!publishableKey) {
- return errorThrower.throwInvalidPublishableKeyError({ key: this.publishableKey });
+ return errorThrower.throwInvalidPublishableKeyError({
+ key: this.publishableKey,
+ });
  }
 
  return publishableKey.frontendApi;
@@ -557,7 +560,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignIn', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -583,7 +586,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignUp', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -1325,7 +1328,13 @@ export class Clerk implements ClerkInterface {
  signUp,
  verifyEmailPath:
  params.verifyEmailAddressUrl ||
- buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true }),
+ buildURL(
+ {
+ base: displayConfig.signUpUrl,
+ hashPath: '/verify-email-address',
+ },
+ { stringify: true },
+ ),
  verifyPhonePath:
  params.verifyPhoneNumberUrl ||
  buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
@@ -1486,6 +1495,11 @@ export class Clerk implements ClerkInterface {
  public authenticateWithGoogleOneTap = async (
  params: AuthenticateWithGoogleOneTapParams,
  ): Promise<SignInResource | SignUpResource> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Google One Tap');
+ return this.client!.signIn; // TODO: Remove not null assertion
+ }
+
  return this.client?.signIn
  .create({
  strategy: 'google_one_tap',
@@ -1504,11 +1518,27 @@ export class Clerk implements ClerkInterface {
  };
 
  public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Metamask');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_metamask_signature',
+ });
  };
 
  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_coinbase_wallet_signature',
+ });
  };
 
  public authenticateWithWeb3 = async ({
@@ -1519,6 +1549,11 @@ export class Clerk implements ClerkInterface {
  strategy,
  legalAccepted,
  }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Web3');
+ return;
+ }
+
  if (!this.client || !this.environment) {
  return;
  }
@@ -1532,7 +1567,11 @@ export class Clerk implements ClerkInterface {
 
  let signInOrSignUp: SignInResource | SignUpResource;
  try {
- signInOrSignUp = await this.client.signIn.authenticateWithWeb3({ identifier, generateSignature, strategy });
+ signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
+ identifier,
+ generateSignature,
+ strategy,
+ });
  } catch (err) {
  if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
  signInOrSignUp = await this.client.signUp.authenticateWithWeb3({
@@ -1642,7 +1681,10 @@ export class Clerk implements ClerkInterface {
  // 2. clerk-js initializes propA with a default value
  // 3. The customer update propB independently of propA and window.Clerk.updateProps is called
  // 4. If we don't merge the new props with the current options, propA will be reset to undefined
- const props = { ..._props, options: this.#initOptions({ ...this.#options, ..._props.options }) };
+ const props = {
+ ..._props,
+ options: this.#initOptions({ ...this.#options, ..._props.options }),
+ };
  return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
  };
 

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

@@ -1,5 +1,17 @@
 const errorPrefix = 'ClerkJS:';
 
+/**
+ * Used to log a warning when a Clerk feature is used in an unsupported environment.
+ * (Development Only)
+ *
+ * @param strategy The strategy that is not supported in the current environment.
+ * @returns void
+ * @note This is a warning and not an error because the application will still work, but the feature will not be available.
+ */
+export function clerkUnsupportedEnvironmentWarning(strategy: string) {
+ console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`);
+}
+
 export function clerkNetworkError(url: string, e: Error): never {
  throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
@@ -8,7 +20,7 @@ export function clerkErrorInitFailed(): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`);
 }
 
-export function clerkErrorDevInitFailed(msg: string = ''): never {
+export function clerkErrorDevInitFailed(msg = ''): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`);
 }
 

.changeset/afraid-toes-sin.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+---
+
+Include **BUILD_DISABLE_RHC** to allow for builds which remove remotely hosted code as it is a requirement for browser extensions.

.changeset/tidy-garlics-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': major
+---
+
+Consume packages with remotely hosted code removed as required by Manifest v3.

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

@@ -1,15 +1,16 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 
 import {
  createClerkClient as _createClerkClient,
  type CreateClerkClientOptions as _CreateClerkClientOptions,
 } from '../internal';
 import { SCOPE } from '../types';
 
+Clerk.mountComponentRenderer = undefined;
+
 export type CreateClerkClientOptions = Omit<_CreateClerkClientOptions, 'scope'>;
 
 export async function createClerkClient(opts: CreateClerkClientOptions): Promise<Clerk> {
- Clerk.mountComponentRenderer = undefined;
  const clerk = await _createClerkClient({ ...opts, scope: SCOPE.BACKGROUND });
  await clerk.load({ standardBrowser: false });
  return clerk;

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

@@ -1,4 +1,4 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
@@ -32,6 +32,10 @@ export async function createClerkClient({
  storageCache = BrowserStorageCache,
  syncHost,
 }: CreateClerkClientOptions): Promise<Clerk> {
+ if (scope === SCOPE.BACKGROUND) {
+ Clerk.mountComponentRenderer = undefined;
+ }
+
  // Don't cache background scripts as it can result in out-of-sync client information.
  if (clerk && scope !== SCOPE.BACKGROUND) {
  return clerk;

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
 import React from 'react';

packages/chrome-extension/tsup.config.ts

@@ -2,24 +2,27 @@ import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
 import { runAfterLast } from '../../scripts/utils';
-// @ts-ignore
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
  const isWatch = !!overrideOptions.watch;
  const shouldPublish = !!overrideOptions.env?.publish;
 
  const common: Options = {
- entry: ['./src/index.ts', './src/background/index.ts', './src/internal/index.ts', './src/react/index.ts'],
+ entry: ['./src/index.ts', './src/background/index.ts', './src/react/index.ts'],
  bundle: true,
  clean: true,
  minify: false,
  sourcemap: true,
  legacyOutput: true,
+ treeshake: true,
+ noExternal: ['@clerk/clerk-react'],
+ external: ['use-sync-external-store'],
  define: {
  PACKAGE_NAME: `"${name}"`,
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${isWatch}`,
+ __BUILD_DISABLE_RHC__: 'true',
  },
  };
 

packages/clerk-js/no-rhc/index.d.ts

@@ -0,0 +1,3 @@
+export { Clerk } from '../dist/types/index';
+
+export * from '../dist/types/index';

packages/clerk-js/no-rhc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.no-rhc');

packages/clerk-js/package.json

@@ -27,7 +27,8 @@
  "types": "dist/types/index.d.ts",
  "files": [
  "dist",
- "headless"
+ "headless",
+ "no-rhc"
  ],
  "scripts": {
  "build": "pnpm build:bundle && pnpm build:declarations",

packages/clerk-js/rspack.config.js

@@ -11,13 +11,15 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
  clerk: 'clerk',
+ clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
  clerkBrowser: 'clerk.browser',
  clerkHeadless: 'clerk.headless',
  clerkHeadlessBrowser: 'clerk.headless.browser',
 };
 
 const variantToSourceFile = {
  [variants.clerk]: './src/index.ts',
+ [variants.clerkNoRHC]: './src/index.ts',
  [variants.clerkBrowser]: './src/index.browser.ts',
  [variants.clerkHeadless]: './src/index.headless.ts',
  [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
@@ -27,9 +29,10 @@ const variantToSourceFile = {
  *
  * @param {object} config
  * @param {'development'|'production'} config.mode
+ * @param {boolean} [config.disableRHC=false]
  * @returns { import('@rspack/cli').Configuration }
  */
-const common = ({ mode }) => {
+const common = ({ mode, disableRHC = false }) => {
  return {
  mode,
  resolve: {
@@ -39,6 +42,7 @@ const common = ({ mode }) => {
  },
  plugins: [
  new rspack.DefinePlugin({
+ __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
  __DEV__: isDevelopment(mode),
  __PKG_VERSION__: JSON.stringify(packageJSON.version),
  __PKG_NAME__: JSON.stringify(packageJSON.name),
@@ -400,12 +404,63 @@ const prodConfig = ({ mode, env, analysis }) => {
  },
  });
 
+ const clerkEsmNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ filename: '[name].mjs',
+ libraryTarget: 'module',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
+ const clerkCjsNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ output: {
+ filename: '[name].js',
+ libraryTarget: 'commonjs',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
  // webpack-bundle-analyzer only supports a single build, use clerkBrowser as that's the default build we serve
  if (analysis) {
  return [clerkBrowser];
  }
 
- return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkCjs];
+ return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkEsmNoRHC, clerkCjs, clerkCjsNoRHC];
 };
 
 /**
@@ -478,6 +533,12 @@ const devConfig = ({ mode, env }) => {
  common({ mode }),
  commonForDev(),
  ),
+ // prettier-ignore
+ [variants.clerkBrowserNoRHC]: merge(
+ entryForVariant(variants.clerkBrowserNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForDev(),
+ ),
  [variants.clerkHeadless]: merge(
  entryForVariant(variants.clerkHeadless),
  common({ mode }),

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

@@ -109,6 +109,7 @@ import {
  clerkMissingSignInUrlAsSatellite,
  clerkOAuthCallbackDidNotCompleteSignInSignUp,
  clerkRedirectUrlIsMissingScheme,
+ clerkUnsupportedEnvironmentWarning,
 } from './errors';
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
@@ -175,7 +176,7 @@ export class Clerk implements ClerkInterface {
  // converted to protected environment to support `updateEnvironment` type assertion
  protected environment?: EnvironmentResource | null;
 
- #publishableKey: string = '';
+ #publishableKey = '';
  #domain: DomainOrProxyUrl['domain'];
  #proxyUrl: DomainOrProxyUrl['proxyUrl'];
  #authService?: AuthCookieService;
@@ -263,7 +264,9 @@ export class Clerk implements ClerkInterface {
  const publishableKey = parsePublishableKey(this.publishableKey);
 
  if (!publishableKey) {
- return errorThrower.throwInvalidPublishableKeyError({ key: this.publishableKey });
+ return errorThrower.throwInvalidPublishableKeyError({
+ key: this.publishableKey,
+ });
  }
 
  return publishableKey.frontendApi;
@@ -557,7 +560,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignIn', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -583,7 +586,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignUp', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -1325,7 +1328,13 @@ export class Clerk implements ClerkInterface {
  signUp,
  verifyEmailPath:
  params.verifyEmailAddressUrl ||
- buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true }),
+ buildURL(
+ {
+ base: displayConfig.signUpUrl,
+ hashPath: '/verify-email-address',
+ },
+ { stringify: true },
+ ),
  verifyPhonePath:
  params.verifyPhoneNumberUrl ||
  buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
@@ -1486,6 +1495,11 @@ export class Clerk implements ClerkInterface {
  public authenticateWithGoogleOneTap = async (
  params: AuthenticateWithGoogleOneTapParams,
  ): Promise<SignInResource | SignUpResource> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Google One Tap');
+ return this.client!.signIn; // TODO: Remove not null assertion
+ }
+
  return this.client?.signIn
  .create({
  strategy: 'google_one_tap',
@@ -1504,11 +1518,27 @@ export class Clerk implements ClerkInterface {
  };
 
  public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Metamask');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_metamask_signature',
+ });
  };
 
  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_coinbase_wallet_signature',
+ });
  };
 
  public authenticateWithWeb3 = async ({
@@ -1519,6 +1549,11 @@ export class Clerk implements ClerkInterface {
  strategy,
  legalAccepted,
  }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Web3');
+ return;
+ }
+
  if (!this.client || !this.environment) {
  return;
  }
@@ -1532,7 +1567,11 @@ export class Clerk implements ClerkInterface {
 
  let signInOrSignUp: SignInResource | SignUpResource;
  try {
- signInOrSignUp = await this.client.signIn.authenticateWithWeb3({ identifier, generateSignature, strategy });
+ signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
+ identifier,
+ generateSignature,
+ strategy,
+ });
  } catch (err) {
  if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
  signInOrSignUp = await this.client.signUp.authenticateWithWeb3({
@@ -1642,7 +1681,10 @@ export class Clerk implements ClerkInterface {
  // 2. clerk-js initializes propA with a default value
  // 3. The customer update propB independently of propA and window.Clerk.updateProps is called
  // 4. If we don't merge the new props with the current options, propA will be reset to undefined
- const props = { ..._props, options: this.#initOptions({ ...this.#options, ..._props.options }) };
+ const props = {
+ ..._props,
+ options: this.#initOptions({ ...this.#options, ..._props.options }),
+ };
  return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
  };
 

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

@@ -1,5 +1,17 @@
 const errorPrefix = 'ClerkJS:';
 
+/**
+ * Used to log a warning when a Clerk feature is used in an unsupported environment.
+ * (Development Only)
+ *
+ * @param strategy The strategy that is not supported in the current environment.
+ * @returns void
+ * @note This is a warning and not an error because the application will still work, but the feature will not be available.
+ */
+export function clerkUnsupportedEnvironmentWarning(strategy: string) {
+ console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`);
+}
+
 export function clerkNetworkError(url: string, e: Error): never {
  throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
@@ -8,7 +20,7 @@ export function clerkErrorInitFailed(): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`);
 }
 
-export function clerkErrorDevInitFailed(msg: string = ''): never {
+export function clerkErrorDevInitFailed(msg = ''): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`);
 }
 

.changeset/afraid-toes-sin.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/clerk-react': patch
+---
+
+Include **BUILD_DISABLE_RHC** to allow for builds which remove remotely hosted code as it is a requirement for browser extensions.

.changeset/tidy-garlics-boil.md

@@ -0,0 +1,5 @@
+---
+'@clerk/chrome-extension': major
+---
+
+Consume packages with remotely hosted code removed as required by Manifest v3.

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

@@ -1,15 +1,16 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 
 import {
  createClerkClient as _createClerkClient,
  type CreateClerkClientOptions as _CreateClerkClientOptions,
 } from '../internal';
 import { SCOPE } from '../types';
 
+Clerk.mountComponentRenderer = undefined;
+
 export type CreateClerkClientOptions = Omit<_CreateClerkClientOptions, 'scope'>;
 
 export async function createClerkClient(opts: CreateClerkClientOptions): Promise<Clerk> {
- Clerk.mountComponentRenderer = undefined;
  const clerk = await _createClerkClient({ ...opts, scope: SCOPE.BACKGROUND });
  await clerk.load({ standardBrowser: false });
  return clerk;

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

@@ -1,4 +1,4 @@
-import { Clerk } from '@clerk/clerk-js';
+import { Clerk } from '@clerk/clerk-js/no-rhc';
 import { DEV_BROWSER_JWT_KEY } from '@clerk/shared/devBrowser';
 import { parsePublishableKey } from '@clerk/shared/keys';
 import browser from 'webextension-polyfill';
@@ -32,6 +32,10 @@ export async function createClerkClient({
  storageCache = BrowserStorageCache,
  syncHost,
 }: CreateClerkClientOptions): Promise<Clerk> {
+ if (scope === SCOPE.BACKGROUND) {
+ Clerk.mountComponentRenderer = undefined;
+ }
+
  // Don't cache background scripts as it can result in out-of-sync client information.
  if (clerk && scope !== SCOPE.BACKGROUND) {
  return clerk;

packages/chrome-extension/src/react/ClerkProvider.tsx

@@ -1,4 +1,4 @@
-import type { Clerk } from '@clerk/clerk-js';
+import type { Clerk } from '@clerk/clerk-js/no-rhc';
 import type { ClerkProviderProps as ClerkReactProviderProps } from '@clerk/clerk-react';
 import { ClerkProvider as ClerkReactProvider } from '@clerk/clerk-react';
 import React from 'react';

packages/chrome-extension/tsup.config.ts

@@ -2,24 +2,27 @@ import type { Options } from 'tsup';
 import { defineConfig } from 'tsup';
 
 import { runAfterLast } from '../../scripts/utils';
-// @ts-ignore
 import { name, version } from './package.json';
 
 export default defineConfig(overrideOptions => {
  const isWatch = !!overrideOptions.watch;
  const shouldPublish = !!overrideOptions.env?.publish;
 
  const common: Options = {
- entry: ['./src/index.ts', './src/background/index.ts', './src/internal/index.ts', './src/react/index.ts'],
+ entry: ['./src/index.ts', './src/background/index.ts', './src/react/index.ts'],
  bundle: true,
  clean: true,
  minify: false,
  sourcemap: true,
  legacyOutput: true,
+ treeshake: true,
+ noExternal: ['@clerk/clerk-react'],
+ external: ['use-sync-external-store'],
  define: {
  PACKAGE_NAME: `"${name}"`,
  PACKAGE_VERSION: `"${version}"`,
  __DEV__: `${isWatch}`,
+ __BUILD_DISABLE_RHC__: 'true',
  },
  };
 

packages/clerk-js/no-rhc/index.d.ts

@@ -0,0 +1,3 @@
+export { Clerk } from '../dist/types/index';
+
+export * from '../dist/types/index';

packages/clerk-js/no-rhc/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/clerk.no-rhc');

packages/clerk-js/package.json

@@ -27,7 +27,8 @@
  "types": "dist/types/index.d.ts",
  "files": [
  "dist",
- "headless"
+ "headless",
+ "no-rhc"
  ],
  "scripts": {
  "build": "pnpm build:bundle && pnpm build:declarations",

packages/clerk-js/rspack.config.js

@@ -11,13 +11,15 @@ const isDevelopment = mode => !isProduction(mode);
 
 const variants = {
  clerk: 'clerk',
+ clerkNoRHC: 'clerk.no-rhc', // Omit Remotely Hosted Code
  clerkBrowser: 'clerk.browser',
  clerkHeadless: 'clerk.headless',
  clerkHeadlessBrowser: 'clerk.headless.browser',
 };
 
 const variantToSourceFile = {
  [variants.clerk]: './src/index.ts',
+ [variants.clerkNoRHC]: './src/index.ts',
  [variants.clerkBrowser]: './src/index.browser.ts',
  [variants.clerkHeadless]: './src/index.headless.ts',
  [variants.clerkHeadlessBrowser]: './src/index.headless.browser.ts',
@@ -27,9 +29,10 @@ const variantToSourceFile = {
  *
  * @param {object} config
  * @param {'development'|'production'} config.mode
+ * @param {boolean} [config.disableRHC=false]
  * @returns { import('@rspack/cli').Configuration }
  */
-const common = ({ mode }) => {
+const common = ({ mode, disableRHC = false }) => {
  return {
  mode,
  resolve: {
@@ -39,6 +42,7 @@ const common = ({ mode }) => {
  },
  plugins: [
  new rspack.DefinePlugin({
+ __BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
  __DEV__: isDevelopment(mode),
  __PKG_VERSION__: JSON.stringify(packageJSON.version),
  __PKG_NAME__: JSON.stringify(packageJSON.name),
@@ -400,12 +404,63 @@ const prodConfig = ({ mode, env, analysis }) => {
  },
  });
 
+ const clerkEsmNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ experiments: {
+ outputModule: true,
+ },
+ output: {
+ filename: '[name].mjs',
+ libraryTarget: 'module',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
+ const clerkCjsNoRHC = merge(
+ entryForVariant(variants.clerkNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForProd(),
+ commonForProdBundled(),
+ {
+ output: {
+ filename: '[name].js',
+ libraryTarget: 'commonjs',
+ },
+ plugins: [
+ // Include the lazy chunks in the bundle as well
+ // so that the final bundle can be imported and bundled again
+ // by a different bundler, eg the webpack instance used by react-scripts
+ new rspack.optimize.LimitChunkCountPlugin({
+ maxChunks: 1,
+ }),
+ ],
+ optimization: {
+ splitChunks: false,
+ },
+ },
+ );
+
  // webpack-bundle-analyzer only supports a single build, use clerkBrowser as that's the default build we serve
  if (analysis) {
  return [clerkBrowser];
  }
 
- return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkCjs];
+ return [clerkBrowser, clerkHeadless, clerkHeadlessBrowser, clerkEsm, clerkEsmNoRHC, clerkCjs, clerkCjsNoRHC];
 };
 
 /**
@@ -478,6 +533,12 @@ const devConfig = ({ mode, env }) => {
  common({ mode }),
  commonForDev(),
  ),
+ // prettier-ignore
+ [variants.clerkBrowserNoRHC]: merge(
+ entryForVariant(variants.clerkBrowserNoRHC),
+ common({ mode, disableRHC: true }),
+ commonForDev(),
+ ),
  [variants.clerkHeadless]: merge(
  entryForVariant(variants.clerkHeadless),
  common({ mode }),

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

@@ -109,6 +109,7 @@ import {
  clerkMissingSignInUrlAsSatellite,
  clerkOAuthCallbackDidNotCompleteSignInSignUp,
  clerkRedirectUrlIsMissingScheme,
+ clerkUnsupportedEnvironmentWarning,
 } from './errors';
 import { eventBus, events } from './events';
 import type { FapiClient, FapiRequestCallback } from './fapiClient';
@@ -175,7 +176,7 @@ export class Clerk implements ClerkInterface {
  // converted to protected environment to support `updateEnvironment` type assertion
  protected environment?: EnvironmentResource | null;
 
- #publishableKey: string = '';
+ #publishableKey = '';
  #domain: DomainOrProxyUrl['domain'];
  #proxyUrl: DomainOrProxyUrl['proxyUrl'];
  #authService?: AuthCookieService;
@@ -263,7 +264,9 @@ export class Clerk implements ClerkInterface {
  const publishableKey = parsePublishableKey(this.publishableKey);
 
  if (!publishableKey) {
- return errorThrower.throwInvalidPublishableKeyError({ key: this.publishableKey });
+ return errorThrower.throwInvalidPublishableKeyError({
+ key: this.publishableKey,
+ });
  }
 
  return publishableKey.frontendApi;
@@ -557,7 +560,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignIn = (node: HTMLDivElement, props?: SignInProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignIn', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -583,7 +586,7 @@ export class Clerk implements ClerkInterface {
  };
 
  public mountSignUp = (node: HTMLDivElement, props?: SignUpProps): void => {
- if (props && props.__experimental?.newComponents && this.__experimental_ui) {
+ if (props?.__experimental?.newComponents && this.__experimental_ui) {
  this.__experimental_ui.mount('SignUp', node, props);
  } else {
  this.assertComponentsReady(this.#componentControls);
@@ -1325,7 +1328,13 @@ export class Clerk implements ClerkInterface {
  signUp,
  verifyEmailPath:
  params.verifyEmailAddressUrl ||
- buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-email-address' }, { stringify: true }),
+ buildURL(
+ {
+ base: displayConfig.signUpUrl,
+ hashPath: '/verify-email-address',
+ },
+ { stringify: true },
+ ),
  verifyPhonePath:
  params.verifyPhoneNumberUrl ||
  buildURL({ base: displayConfig.signUpUrl, hashPath: '/verify-phone-number' }, { stringify: true }),
@@ -1486,6 +1495,11 @@ export class Clerk implements ClerkInterface {
  public authenticateWithGoogleOneTap = async (
  params: AuthenticateWithGoogleOneTapParams,
  ): Promise<SignInResource | SignUpResource> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Google One Tap');
+ return this.client!.signIn; // TODO: Remove not null assertion
+ }
+
  return this.client?.signIn
  .create({
  strategy: 'google_one_tap',
@@ -1504,11 +1518,27 @@ export class Clerk implements ClerkInterface {
  };
 
  public authenticateWithMetamask = async (props: AuthenticateWithMetamaskParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_metamask_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Metamask');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_metamask_signature',
+ });
  };
 
  public authenticateWithCoinbaseWallet = async (props: AuthenticateWithCoinbaseWalletParams = {}): Promise<void> => {
- await this.authenticateWithWeb3({ ...props, strategy: 'web3_coinbase_wallet_signature' });
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Coinbase Wallet');
+ return;
+ }
+
+ await this.authenticateWithWeb3({
+ ...props,
+ strategy: 'web3_coinbase_wallet_signature',
+ });
  };
 
  public authenticateWithWeb3 = async ({
@@ -1519,6 +1549,11 @@ export class Clerk implements ClerkInterface {
  strategy,
  legalAccepted,
  }: ClerkAuthenticateWithWeb3Params): Promise<void> => {
+ if (__BUILD_DISABLE_RHC__) {
+ clerkUnsupportedEnvironmentWarning('Web3');
+ return;
+ }
+
  if (!this.client || !this.environment) {
  return;
  }
@@ -1532,7 +1567,11 @@ export class Clerk implements ClerkInterface {
 
  let signInOrSignUp: SignInResource | SignUpResource;
  try {
- signInOrSignUp = await this.client.signIn.authenticateWithWeb3({ identifier, generateSignature, strategy });
+ signInOrSignUp = await this.client.signIn.authenticateWithWeb3({
+ identifier,
+ generateSignature,
+ strategy,
+ });
  } catch (err) {
  if (isError(err, ERROR_CODES.FORM_IDENTIFIER_NOT_FOUND)) {
  signInOrSignUp = await this.client.signUp.authenticateWithWeb3({
@@ -1642,7 +1681,10 @@ export class Clerk implements ClerkInterface {
  // 2. clerk-js initializes propA with a default value
  // 3. The customer update propB independently of propA and window.Clerk.updateProps is called
  // 4. If we don't merge the new props with the current options, propA will be reset to undefined
- const props = { ..._props, options: this.#initOptions({ ...this.#options, ..._props.options }) };
+ const props = {
+ ..._props,
+ options: this.#initOptions({ ...this.#options, ..._props.options }),
+ };
  return this.#componentControls?.ensureMounted().then(controls => controls.updateProps(props));
  };
 

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

@@ -1,5 +1,17 @@
 const errorPrefix = 'ClerkJS:';
 
+/**
+ * Used to log a warning when a Clerk feature is used in an unsupported environment.
+ * (Development Only)
+ *
+ * @param strategy The strategy that is not supported in the current environment.
+ * @returns void
+ * @note This is a warning and not an error because the application will still work, but the feature will not be available.
+ */
+export function clerkUnsupportedEnvironmentWarning(strategy: string) {
+ console.warn(`${errorPrefix} ${strategy} is not supported in this environment.`);
+}
+
 export function clerkNetworkError(url: string, e: Error): never {
  throw new Error(`${errorPrefix} Network error at "${url}" - ${e}. Please try again.`);
 }
@@ -8,7 +20,7 @@ export function clerkErrorInitFailed(): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk.`);
 }
 
-export function clerkErrorDevInitFailed(msg: string = ''): never {
+export function clerkErrorDevInitFailed(msg = ''): never {
  throw new Error(`${errorPrefix} Something went wrong initializing Clerk in development mode.${msg && ` ${msg}`}`);
 }