diff --git a/.changeset/weak-poets-remember.md b/.changeset/weak-poets-remember.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/weak-poets-remember.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/jest.setup.ts b/packages/clerk-js/jest.setup.ts
index cf496bb413..38259c0787 100644
--- a/packages/clerk-js/jest.setup.ts
+++ b/packages/clerk-js/jest.setup.ts
@@ -35,6 +35,7 @@ if (typeof window !== 'undefined') {
global.__PKG_NAME__ = '';
global.__PKG_VERSION__ = '';
+ global.__BUILD_FLAG_ACCOUNTLESS_UI__ = '';
global.BUILD_ENABLE_NEW_COMPONENTS = '';
//@ts-expect-error
diff --git a/packages/clerk-js/rspack.config.js b/packages/clerk-js/rspack.config.js
index 91bddaa091..31dcf9c2fe 100644
--- a/packages/clerk-js/rspack.config.js
+++ b/packages/clerk-js/rspack.config.js
@@ -44,6 +44,7 @@ const common = ({ mode, disableRHC = false }) => {
new rspack.DefinePlugin({
__BUILD_DISABLE_RHC__: JSON.stringify(disableRHC),
__DEV__: isDevelopment(mode),
+ __BUILD_FLAG_ACCOUNTLESS_UI__: isDevelopment(mode),
__PKG_VERSION__: JSON.stringify(packageJSON.version),
__PKG_NAME__: JSON.stringify(packageJSON.name),
BUILD_ENABLE_NEW_COMPONENTS: JSON.stringify(process.env.BUILD_ENABLE_NEW_COMPONENTS),
diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
index 8d087aa7e5..8885f4bfc6 100644
--- a/packages/clerk-js/src/core/clerk.ts
+++ b/packages/clerk-js/src/core/clerk.ts
@@ -1876,7 +1876,9 @@ export class Clerk implements ClerkInterface {
void this.#captchaHeartbeat.start();
this.#clearClerkQueryParams();
this.#handleImpersonationFab();
- this.#handleAccountlessPrompt();
+ if (__BUILD_FLAG_ACCOUNTLESS_UI__) {
+ this.#handleAccountlessPrompt();
+ }
return true;
};
@@ -2007,13 +2009,15 @@ export class Clerk implements ClerkInterface {
};
#handleAccountlessPrompt = () => {
- void this.#componentControls?.ensureMounted().then(controls => {
- if (this.#options.__internal_claimAccountlessKeysUrl) {
- controls.updateProps({
- options: { __internal_claimAccountlessKeysUrl: this.#options.__internal_claimAccountlessKeysUrl },
- });
- }
- });
+ if (__BUILD_FLAG_ACCOUNTLESS_UI__) {
+ void this.#componentControls?.ensureMounted().then(controls => {
+ if (this.#options.__internal_claimAccountlessKeysUrl) {
+ controls.updateProps({
+ options: { __internal_claimAccountlessKeysUrl: this.#options.__internal_claimAccountlessKeysUrl },
+ });
+ }
+ });
+ }
};
#buildUrl = (
diff --git a/packages/clerk-js/src/globals.d.ts b/packages/clerk-js/src/globals.d.ts
index 4cd691f52f..a1ac10dabf 100644
--- a/packages/clerk-js/src/globals.d.ts
+++ b/packages/clerk-js/src/globals.d.ts
@@ -1,5 +1,6 @@
declare global {
const __DEV__: boolean;
+ const __BUILD_FLAG_ACCOUNTLESS_UI__: boolean;
const __PKG_NAME__: string;
const __PKG_VERSION__: string;
const __BUILD_DISABLE_RHC__: string;
diff --git a/packages/clerk-js/src/ui/Components.tsx b/packages/clerk-js/src/ui/Components.tsx
index 81b8e93036..2118601a4c 100644
--- a/packages/clerk-js/src/ui/Components.tsx
+++ b/packages/clerk-js/src/ui/Components.tsx
@@ -517,11 +517,13 @@ const Components = (props: ComponentsProps) => {
)}
- {state.options?.__internal_claimAccountlessKeysUrl && (
-
-
-
- )}
+ {__BUILD_FLAG_ACCOUNTLESS_UI__
+ ? state.options?.__internal_claimAccountlessKeysUrl && (
+
+
+
+ )
+ : null}
{state.organizationSwitcherPrefetch && }
diff --git a/packages/clerk-js/src/ui/lazyModules/components.ts b/packages/clerk-js/src/ui/lazyModules/components.ts
index 8aae06059d..14c544bca9 100644
--- a/packages/clerk-js/src/ui/lazyModules/components.ts
+++ b/packages/clerk-js/src/ui/lazyModules/components.ts
@@ -16,7 +16,9 @@ const componentImportPaths = {
BlankCaptchaModal: () => import(/* webpackChunkName: "blankcaptcha" */ './../components/BlankCaptchaModal'),
UserVerification: () => import(/* webpackChunkName: "userverification" */ './../components/UserVerification'),
Waitlist: () => import(/* webpackChunkName: "waitlist" */ './../components/Waitlist'),
- AccountlessPrompt: () => import(/* webpackChunkName: "accountlessPrompt" */ './../components/AccountlessPrompt'),
+ AccountlessPrompt: __BUILD_FLAG_ACCOUNTLESS_UI__
+ ? () => import(/* webpackChunkName: "accountlessPrompt" */ './../components/AccountlessPrompt')
+ : () => null,
} as const;
export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
@@ -84,9 +86,10 @@ export const BlankCaptchaModal = lazy(() =>
export const ImpersonationFab = lazy(() =>
componentImportPaths.ImpersonationFab().then(module => ({ default: module.ImpersonationFab })),
);
-export const AccountlessPrompt = lazy(() =>
- componentImportPaths.AccountlessPrompt().then(module => ({ default: module.AccountlessPrompt })),
-);
+export const AccountlessPrompt = __BUILD_FLAG_ACCOUNTLESS_UI__
+ ? // @ts-expect-error Types are broken due to __BUILD_FLAG_ACCOUNTLESS_UI__
+ lazy(() => componentImportPaths.AccountlessPrompt().then(module => ({ default: module.AccountlessPrompt })))
+ : () => null;
export const preloadComponent = async (component: unknown) => {
return componentImportPaths[component as keyof typeof componentImportPaths]?.();