fix(clerk-js): Add push/replace props & replace state when merging fragment into url (#1304)

* feat(repo): Add push and replace props to ClerkProvider

* chore(repo): Add integration test for path routing on history back

* fix(repo): Fix expectation in sign in page objects to be more resilient

---------

Co-authored-by: Clerk Cookie <136073014+clerk-cookie@users.noreply.github.com>
Co-authored-by: Dimitris Klouvas <dimitris@clerk.dev>

Author: 3 people

.changeset/gold-islands-cover.md

@@ -0,0 +1,5 @@
+---
+'@clerk/nextjs': major
+---
+
+Fix a bug where navigating from the sign in page to the sign up page required two back button presses to go back.

.changeset/smart-suns-train.md

@@ -0,0 +1,9 @@
+---
+'gatsby-plugin-clerk': major
+'@clerk/clerk-js': major
+'@clerk/nextjs': major
+'@clerk/remix': major
+'@clerk/types': major
+---
+
+Use the new `routerPush` and `routerReplace` props for `<ClerkProvider />` instead of `navigate`.

.changeset/stupid-suits-accept.md

@@ -0,0 +1,5 @@
+---
+'@clerk/types': major
+---
+
+Introduces two new props for `<ClerkProvider />`, `push` and `replace`. These props replace the `navigate` prop. Passing both `push` and `replace` will allow Clerk to correctly handle navigations without causing issues with the host application's router.

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

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

integration/testUtils/signInPageObject.ts

@@ -23,8 +23,8 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => {
     },
     setInstantPassword: async (val: string) => {
       const passField = self.getPasswordInput();
-      await passField.fill(val, { force: true });
       await expect(passField).toBeVisible();
+      await passField.fill(val, { force: true });
     },
     getGoToSignUp: () => {
       return page.getByRole('link', { name: /sign up/i });
@@ -42,7 +42,10 @@ export const createSignInComponentPageObject = (testArgs: TestArgs) => {
       return page.getByRole('button', { name: new RegExp(`continue with ${provider}`, 'gi') });
     },
     signInWithEmailAndInstantPassword: async (opts: { email: string; password: string }) => {
-      await self.getIdentifierInput().fill(opts.email);
+      const identifierField = self.getIdentifierInput();
+      await expect(identifierField).toBeVisible();
+
+      await identifierField.fill(opts.email);
       await self.setInstantPassword(opts.password);
       await self.continue();
     },

integration/tests/navigation.test.ts

@@ -197,4 +197,18 @@ export default function Page() {
     await u.page.getByText(/Add an email address/i).click();
     await u.page.getByText(/Cancel/i).click();
   });
+
+  test('sign in with path routing navigates to previous page', async ({ page, context }) => {
+    const u = createTestUtils({ app, page, context });
+    await u.po.signIn.goTo();
+    await u.po.signIn.waitForMounted();
+
+    await u.po.signIn.getGoToSignUp().click();
+    await u.po.signUp.waitForMounted();
+    await u.page.waitForURL(`${app.serverUrl}/sign-up?redirect_url=${encodeURIComponent(app.serverUrl + '/')}`);
+
+    await page.goBack();
+    await u.po.signIn.waitForMounted();
+    await u.page.waitForURL(`${app.serverUrl}/sign-in`);
+  });
 });

packages/chrome-extension/README.md

@@ -68,7 +68,8 @@ function ClerkProviderWithRoutes() {
   return (
     <ClerkProvider
       publishableKey={publishableKey}
-      navigate={to => navigate(to)}
+      routerPush={to => navigate(to)}
+      routerReplace={to => navigate(to, { replace: true })}
     >
       <Routes>
         <Route

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

@@ -115,12 +115,12 @@ describe('Clerk singleton - Redirects', () => {
 
         clerkForProductionInstance = new Clerk(productionPublishableKey);
         await clerkForProductionInstance.load({
-          navigate: mockNavigate,
+          routerPush: mockNavigate,
         });
 
         clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
         await clerkForDevelopmentInstance.load({
-          navigate: mockNavigate,
+          routerPush: mockNavigate,
         });
       });
 
@@ -193,12 +193,12 @@ describe('Clerk singleton - Redirects', () => {
 
         clerkForProductionInstance = new Clerk(productionPublishableKey);
         await clerkForProductionInstance.load({
-          navigate: mockNavigate,
+          routerPush: mockNavigate,
         });
 
         clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
         await clerkForDevelopmentInstance.load({
-          navigate: mockNavigate,
+          routerPush: mockNavigate,
         });
       });
 
@@ -284,12 +284,12 @@ describe('Clerk singleton - Redirects', () => {
 
         clerkForProductionInstance = new Clerk(productionPublishableKey);
         await clerkForProductionInstance.load({
-          navigate: mockNavigate,
+          routerPush: mockNavigate,
         });
 
         clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
         await clerkForDevelopmentInstance.load({
-          navigate: mockNavigate,
+          routerPush: mockNavigate,
         });
       });
 
@@ -317,12 +317,12 @@ describe('Clerk singleton - Redirects', () => {
 
         clerkForProductionInstance = new Clerk(productionPublishableKey);
         await clerkForProductionInstance.load({
-          navigate: mockNavigate,
+          routerPush: mockNavigate,
         });
 
         clerkForDevelopmentInstance = new Clerk(developmentPublishableKey);
         await clerkForDevelopmentInstance.load({
-          navigate: mockNavigate,
+          routerPush: mockNavigate,
         });
       });