Fixes route ordering to prevent Wasp routes being overriden (#2039)

waspc/ChangeLog.md

@@ -64,7 +64,8 @@ These changes only apply to getting auth fields from the `user` object you recei
 ### 🐞 Bug fixes
 
 - Update the `tsconfig.json` to make sure IDEs don't underline `import.meta.env` when users use client env vars.
-- Fixes the `netlify.toml` to include the correct build path for the client app.
+- Fix the `netlify.toml` to include the correct build path for the client app.
+- Fix the client router to ensure that user defined routes don't override Wasp defined routes by moving the user defined routes to the end of the route list.
 
 ### 🔧 Small improvements
 

waspc/data/Generator/templates/react-app/src/router.tsx

@@ -31,6 +31,16 @@ const router = (
     <{= rootComponent.importIdentifier =}>
     {=/ rootComponent.isDefined =}
     <Switch>
+      {=# isExternalAuthEnabled =}
+      {/* 
+        Wasp specific routes *must* go first to prevent user
+        defined routes from overriding them.
+        Details in https://github.com/wasp-lang/wasp/issues/2029
+      */}
+      <Route exact path="{= oAuthCallbackPath =}">
+        <OAuthCallbackPage />
+      </Route>
+      {=/ isExternalAuthEnabled =}
       {Object.entries(routes).map(([routeKey, route]) => (
         <Route
           exact
@@ -39,11 +49,6 @@ const router = (
           component={routeNameToRouteComponent[routeKey]}
         />
       ))}
-      {=# isExternalAuthEnabled =}
-      <Route exact path="{= oAuthCallbackPath =}">
-        <OAuthCallbackPage />
-      </Route>
-      {=/ isExternalAuthEnabled =}
     </Switch>
     {=# rootComponent.isDefined =}
     </{= rootComponent.importIdentifier =}>

waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/.waspchecksums

@@ -1194,7 +1194,7 @@
             "file",
             "web-app/src/router.tsx"
         ],
-        "938782afaf3fbe32d850a983e55fe7e31bb261cf8f79e84c7e800b7847544f15"
+        "8dc5955b5a640cbae8836cc227e6ade562b8e7ba9eda5ce076436955807fe0fe"
     ],
     [
         [

waspc/e2e-test/test-outputs/waspComplexTest-golden/waspComplexTest/.wasp/out/web-app/src/router.tsx

@@ -18,6 +18,14 @@ const router = (
   <Router basename="/">
     <App>
     <Switch>
+      {/* 
+        Wasp specific routes *must* go first to prevent user
+        defined routes from overriding them.
+        Details in https://github.com/wasp-lang/wasp/issues/2029
+      */}
+      <Route exact path="/oauth/callback">
+        <OAuthCallbackPage />
+      </Route>
       {Object.entries(routes).map(([routeKey, route]) => (
         <Route
           exact
@@ -26,9 +34,6 @@ const router = (
           component={routeNameToRouteComponent[routeKey]}
         />
       ))}
-      <Route exact path="/oauth/callback">
-        <OAuthCallbackPage />
-      </Route>
     </Switch>
     </App>
   </Router>

waspc/examples/todoApp/main.wasp

@@ -130,6 +130,11 @@ page TaskPage {
   component: import Task from "@src/pages/Task"
 }
 
+route CatchAllRoute { path: "*", to: CatchAllPage }
+page CatchAllPage {
+  component: import { CatchAllPage } from "@src/pages/CatchAll"
+}
+
 // --------- Queries --------- //
 
 query getTasks {

waspc/examples/todoApp/src/pages/CatchAll.tsx

@@ -0,0 +1,20 @@
+import { useLocation } from 'react-router-dom'
+
+export function CatchAllPage() {
+  const location = useLocation()
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-80">
+      <div className="space-y-2 text-center">
+        <h1 className="text-2xl font-bold mb-4">Not found</h1>
+        <p className="text-gray-500">
+          We couldn't find anything at the{' '}
+          <code className="text-gray-700 font-mono bg-gray-200 rounded px-2">
+            {location.pathname}
+          </code>{' '}
+          location.
+        </p>
+      </div>
+    </div>
+  )
+}

waspc/headless-test/examples/todoApp/src/client/pages/CatchAll.tsx

@@ -0,0 +1,20 @@
+import { useLocation } from 'react-router-dom'
+
+export function CatchAllPage() {
+  const location = useLocation()
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-80">
+      <div className="space-y-2 text-center">
+        <h1 className="text-2xl font-bold mb-4">Not found</h1>
+        <p className="text-gray-500">
+          We couldn't find anything at the{' '}
+          <code className="text-gray-700 font-mono bg-gray-200 rounded px-2">
+            {location.pathname}
+          </code>{' '}
+          location.
+        </p>
+      </div>
+    </div>
+  )
+}

waspc/headless-test/examples/todoApp/todoApp.wasp

@@ -112,6 +112,11 @@ page TaskPage {
   component: import Task from "@src/client/pages/Task.tsx"
 }
 
+route CatchAllRoute { path: "*", to: CatchAllPage }
+page CatchAllPage {
+  component: import { CatchAllPage } from "@src/client/pages/CatchAll"
+}
+
 // --------- Queries --------- //
 
 query getTasks {

waspc/headless-test/tests/catch-all-route.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from "@playwright/test";
+
+test.describe("catch all route + oauth route", () => {
+  test.describe.configure({ mode: "serial" });
+
+  test("catch all route renders for unknown route", async ({ page }) => {
+    await page.goto("/unknown-route");
+
+    await page.waitForSelector("text=Not found");
+
+    await expect(page.locator("body")).toContainText(
+      `We couldn't find anything at the /unknown-route location.`
+    );
+  });
+
+  // We wanted to prevent the user defined routes from overriding
+  // the OAuth callback route. Details: https://github.com/wasp-lang/wasp/issues/2029
+  test("oauth callback route renders at /ouath/callback", async ({ page }) => {
+    await page.goto("/oauth/callback?error=example+error");
+
+    await page.waitForSelector("text=example error");
+
+    await expect(page.locator("body")).toContainText("example error");
+  });
+});