fix(clerk-js): Update props while respecting defaults set by Clerk.load

.changeset/cold-chicken-drop.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Support remounting ClerkProvider multiple times by making sure that the `updateProps` call during the loading phase does not override any defaults set by `Clerk.load()` for values that are missing

integration/templates/react-vite/src/main.tsx

@@ -15,7 +15,7 @@ const Root = () => {
     <ClerkProvider
       // @ts-ignore
       publishableKey={import.meta.env.VITE_CLERK_PUBLISHABLE_KEY as string}
-      clerkJSUrl={import.meta.env.VITE_CLERK_JS as string}
+      clerkJSUrl={import.meta.env.VITE_CLERK_JS_URL as string}
       routerPush={(to: string) => navigate(to)}
       routerReplace={(to: string) => navigate(to, { replace: true })}
     >

integration/tests/update-props.test.ts

@@ -0,0 +1,45 @@
+import { test } from '@playwright/test';
+
+import type { FakeUser } from '../testUtils';
+import { createTestUtils, testAgainstRunningApps } from '../testUtils';
+
+testAgainstRunningApps({ withPattern: ['react.vite.withEmailCodes'] })('sign in flow @generic', ({ app }) => {
+  test.describe.configure({ mode: 'serial' });
+
+  let fakeUser: FakeUser;
+
+  test.beforeAll(async () => {
+    const u = createTestUtils({ app });
+    fakeUser = u.services.users.createFakeUser({
+      fictionalEmail: true,
+      withPassword: true,
+    });
+    await u.services.users.createBapiUser(fakeUser);
+  });
+
+  test.afterAll(async () => {
+    await fakeUser.deleteIfExists();
+    await app.teardown();
+  });
+
+  test('updating props after initial loading does not override defaults set by Clerk.load()', async ({
+    page,
+    context,
+  }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo({ searchParams: new URLSearchParams({ redirect_url: 'https://www.clerk.com' }) });
+    await u.page.waitForFunction(async () => {
+      // Emulate ClerkProvider being unmounted and mounted again
+      // as updateProps is going to be called without the default options set by window.Clerk.load()
+      await (window.Clerk as any).__unstable__updateProps({ options: {} });
+    });
+    await u.po.signIn.setIdentifier(fakeUser.email);
+    await u.po.signIn.continue();
+    await u.po.signIn.setPassword(fakeUser.password);
+    await u.po.signIn.continue();
+    await u.po.expect.toBeSignedIn();
+    // allowedRedirectOrigins should still be respected here
+    // even after the above updateProps invocation
+    await u.page.waitForURL(`${app.serverUrl}`);
+  });
+});

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

@@ -169,6 +169,7 @@ const Components = (props: ComponentsProps) => {
     nodes: new Map(),
     impersonationFab: false,
   });
+
   const {
     googleOneTapModal,
     signInModal,
@@ -215,7 +216,8 @@ const Components = (props: ComponentsProps) => {
           return;
         }
       }
-      setState(s => ({ ...s, ...restProps }));
+
+      setState(s => ({ ...s, ...restProps, options: { ...s.options, ...restProps.options } }));
     };
 
     componentsControls.closeModal = name => {