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

clerk · Nov 23, 2023 · ed4ac78 · ed4ac78
1 parent 5b5e1c4
commit ed4ac78
Show file tree

Hide file tree

Showing 18 changed files with 107 additions and 64 deletions.
diff --git a/.changeset/gold-islands-cover.md b/.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.
diff --git a/.changeset/smart-suns-train.md b/.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`.
diff --git a/.changeset/stupid-suits-accept.md b/.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.
diff --git a/integration/templates/react-vite/src/main.tsx b/integration/templates/react-vite/src/main.tsx
@@ -15,7 +15,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>

diff --git a/packages/chrome-extension/README.md b/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

diff --git a/packages/clerk-js/src/core/clerk.redirects.test.ts b/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,
         });
       });
 

diff --git a/packages/clerk-js/src/core/clerk.test.ts b/packages/clerk-js/src/core/clerk.test.ts
@@ -529,14 +529,14 @@ describe('Clerk singleton', () => {
     });
 
     it('uses window location if a custom navigate is defined but destination has different origin', async () => {
-      await sut.load({ navigate: mockNavigate });
+      await sut.load({ routerPush: mockNavigate });
       const toUrl = 'https://www.origindifferent.com/';
       await sut.navigate(toUrl);
       expect(mockHref).toHaveBeenCalledWith(toUrl);
     });
 
     it('wraps custom navigate method in a promise if provided and it sync', async () => {
-      await sut.load({ navigate: mockNavigate });
+      await sut.load({ routerPush: mockNavigate });
       const toUrl = 'http://test.host/path#hash';
       const res = sut.navigate(toUrl);
       expect(res.then).toBeDefined();
@@ -596,7 +596,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       if (!sut.client) {
         fail('we should always have a client');
@@ -661,7 +661,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       if (!sut.client) {
         fail('we should always have a client');
@@ -729,7 +729,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       if (!sut.client) {
         fail('we should always have a client');
@@ -787,7 +787,7 @@ describe('Clerk singleton', () => {
       const mockSetActive = jest.fn();
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
 
@@ -839,7 +839,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       if (!sut.client) {
         fail('we should always have a client');
@@ -887,7 +887,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
 
       await sut.handleRedirectCallback();
@@ -930,7 +930,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
 
       sut.handleRedirectCallback({
@@ -986,7 +986,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive as any;
 
@@ -1043,7 +1043,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive as any;
 
@@ -1097,7 +1097,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
 
       await sut.handleRedirectCallback();
@@ -1147,7 +1147,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
 
       await sut.handleRedirectCallback();
@@ -1191,7 +1191,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
 
       await sut.handleRedirectCallback();
@@ -1240,7 +1240,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
 
       await sut.handleRedirectCallback();
@@ -1274,7 +1274,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
 
       await sut.handleRedirectCallback();
@@ -1320,7 +1320,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       if (!sut.client) {
         fail('we should always have a client');
@@ -1381,7 +1381,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       if (!sut.client) {
         fail('we should always have a client');
@@ -1434,7 +1434,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       if (!sut.client) {
         fail('we should always have a client');
@@ -1474,7 +1474,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       if (!sut.client) {
         fail('we should always have a client');
@@ -1515,7 +1515,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
 
@@ -1546,7 +1546,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
 
@@ -1579,7 +1579,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
 
@@ -1610,7 +1610,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
 
@@ -1637,7 +1637,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
 
@@ -1661,7 +1661,7 @@ describe('Clerk singleton', () => {
 
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
 
@@ -1687,7 +1687,7 @@ describe('Clerk singleton', () => {
       const mockSetActive = jest.fn();
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
       const res = { ping: 'ping' };
@@ -1712,7 +1712,7 @@ describe('Clerk singleton', () => {
       const mockSetActive = jest.fn();
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
       await expect(async () => {
@@ -1739,7 +1739,7 @@ describe('Clerk singleton', () => {
       const mockSetActive = jest.fn();
       const sut = new Clerk(productionPublishableKey);
       await sut.load({
-        navigate: mockNavigate,
+        routerPush: mockNavigate,
       });
       sut.setActive = mockSetActive;
 

diff --git a/packages/clerk-js/src/core/clerk.ts b/packages/clerk-js/src/core/clerk.ts
@@ -31,6 +31,7 @@ import type {
   HandleOAuthCallbackParams,
   InstanceType,
   ListenerCallback,
+  NavigateOptions,
   OrganizationListProps,
   OrganizationProfileProps,
   OrganizationResource,
@@ -665,13 +666,14 @@ export class Clerk implements ClerkInterface {
     return unsubscribe;
   };
 
-  public navigate = async (to: string | undefined): Promise<unknown> => {
+  public navigate = async (to: string | undefined, options?: NavigateOptions): Promise<unknown> => {
     if (!to || !inBrowser()) {
       return;
     }
 
     const toURL = new URL(to, window.location.href);
-    const customNavigate = this.#options.navigate;
+    const customNavigate =
+      options?.replace && this.#options.routerReplace ? this.#options.routerReplace : this.#options.routerPush;
 
     if (toURL.origin !== window.location.origin || !customNavigate) {
       windowNavigate(toURL);