feat(clerk-js): Display a prompt on Keyless mode (#4761)

Author: panteliselef

.changeset/quick-geckos-unite.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': minor
+---
+
+Display a UI prompt while Clerk is running in Keyless mode.

packages/clerk-js/bundlewatch.config.json

@@ -17,6 +17,7 @@
     { "path": "./dist/userprofile*.js", "maxSize": "15KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },
     { "path": "./dist/onetap*.js", "maxSize": "1KB" },
-    { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" }
+    { "path": "./dist/waitlist*.js", "maxSize": "1.3KB" },
+    { "path": "./dist/keylessPrompt*.js", "maxSize": "4.5KB" }
   ]
 }

packages/clerk-js/jest.setup.ts

@@ -35,7 +35,6 @@ if (typeof window !== 'undefined') {
 
   global.__PKG_NAME__ = '';
   global.__PKG_VERSION__ = '';
-  global.__BUILD_FLAG_KEYLESS_UI__ = '';
   global.BUILD_ENABLE_NEW_COMPONENTS = '';
 
   //@ts-expect-error

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

@@ -1915,9 +1915,7 @@ export class Clerk implements ClerkInterface {
     void this.#captchaHeartbeat.start();
     this.#clearClerkQueryParams();
     this.#handleImpersonationFab();
-    if (__BUILD_FLAG_KEYLESS_UI__) {
-      this.#handleKeylessPrompt();
-    }
+    this.#handleKeylessPrompt();
     return true;
   };
 
@@ -2048,18 +2046,16 @@ export class Clerk implements ClerkInterface {
   };
 
   #handleKeylessPrompt = () => {
-    if (__BUILD_FLAG_KEYLESS_UI__) {
-      void this.#componentControls?.ensureMounted().then(controls => {
-        if (this.#options.__internal_claimKeylessApplicationUrl) {
-          controls.updateProps({
-            options: {
-              __internal_claimKeylessApplicationUrl: this.#options.__internal_claimKeylessApplicationUrl,
-              __internal_copyInstanceKeysUrl: this.#options.__internal_copyInstanceKeysUrl,
-            },
-          });
-        }
-      });
-    }
+    void this.#componentControls?.ensureMounted().then(controls => {
+      if (this.#options.__internal_claimKeylessApplicationUrl) {
+        controls.updateProps({
+          options: {
+            __internal_claimKeylessApplicationUrl: this.#options.__internal_claimKeylessApplicationUrl,
+            __internal_copyInstanceKeysUrl: this.#options.__internal_copyInstanceKeysUrl,
+          },
+        });
+      }
+    });
   };
 
   #buildUrl = (

packages/clerk-js/src/globals.d.ts

@@ -5,7 +5,6 @@ declare global {
   /**
    * Build time feature flags.
    */
-  const __BUILD_FLAG_KEYLESS_UI__: boolean;
   const __BUILD_DISABLE_RHC__: string;
 
   interface Window {

packages/clerk-js/src/ui/Components.tsx

@@ -517,17 +517,14 @@ const Components = (props: ComponentsProps) => {
           </LazyImpersonationFabProvider>
         )}
 
-        {__BUILD_FLAG_KEYLESS_UI__
-          ? state.options?.__internal_claimKeylessApplicationUrl &&
-            state.options?.__internal_copyInstanceKeysUrl && (
-              <LazyImpersonationFabProvider globalAppearance={state.appearance}>
-                <KeylessPrompt
-                  claimUrl={state.options.__internal_claimKeylessApplicationUrl}
-                  copyKeysUrl={state.options.__internal_copyInstanceKeysUrl}
-                />
-              </LazyImpersonationFabProvider>
-            )
-          : null}
+        {state.options?.__internal_claimKeylessApplicationUrl && state.options?.__internal_copyInstanceKeysUrl && (
+          <LazyImpersonationFabProvider globalAppearance={state.appearance}>
+            <KeylessPrompt
+              claimUrl={state.options.__internal_claimKeylessApplicationUrl}
+              copyKeysUrl={state.options.__internal_copyInstanceKeysUrl}
+            />
+          </LazyImpersonationFabProvider>
+        )}
 
         <Suspense>{state.organizationSwitcherPrefetch && <OrganizationSwitcherPrefetch />}</Suspense>
       </LazyProviders>

packages/clerk-js/src/ui/lazyModules/components.ts

@@ -16,9 +16,7 @@ const componentImportPaths = {
   BlankCaptchaModal: () => import(/* webpackChunkName: "blankcaptcha" */ './../components/BlankCaptchaModal'),
   UserVerification: () => import(/* webpackChunkName: "userverification" */ './../components/UserVerification'),
   Waitlist: () => import(/* webpackChunkName: "waitlist" */ './../components/Waitlist'),
-  KeylessPrompt: __BUILD_FLAG_KEYLESS_UI__
-    ? () => import(/* webpackChunkName: "keylessPrompt" */ '../components/KeylessPrompt')
-    : () => null,
+  KeylessPrompt: () => import(/* webpackChunkName: "keylessPrompt" */ '../components/KeylessPrompt'),
 } as const;
 
 export const SignIn = lazy(() => componentImportPaths.SignIn().then(module => ({ default: module.SignIn })));
@@ -86,10 +84,9 @@ export const BlankCaptchaModal = lazy(() =>
 export const ImpersonationFab = lazy(() =>
   componentImportPaths.ImpersonationFab().then(module => ({ default: module.ImpersonationFab })),
 );
-export const KeylessPrompt = __BUILD_FLAG_KEYLESS_UI__
-  ? // @ts-expect-error Types are broken due to __BUILD_FLAG_KEYLESS_UI__
-    lazy(() => componentImportPaths.KeylessPrompt().then(module => ({ default: module.KeylessPrompt })))
-  : () => null;
+export const KeylessPrompt = lazy(() =>
+  componentImportPaths.KeylessPrompt().then(module => ({ default: module.KeylessPrompt })),
+);
 
 export const preloadComponent = async (component: unknown) => {
   return componentImportPaths[component as keyof typeof componentImportPaths]?.();