fix(next): omit server url from route matching (#14919)

Follow up to #14907. Fixes
#14900.

Since #14869, setting a
`serverURL` causes some additional admin routing to break, including
`/admin/logout`.

We need to ensure that all routes are relative before matching them.

---------

Co-authored-by: Jarrod Flesch <jarrodmflesch@gmail.com>

Author: jacobsfletch

packages/next/src/views/Root/getRouteData.ts

@@ -160,7 +160,7 @@ export const getRouteData = ({
           return isPathMatchingRoute({
             currentRoute,
             exact: true,
-            path: formatAdminURL({ adminRoute, path: route, serverURL: config.serverURL }),
+            path: formatAdminURL({ adminRoute, path: route }),
           })
         })
 

packages/next/src/views/Root/index.tsx

@@ -63,10 +63,10 @@ export const RootPage = async ({
 
   const params = await paramsPromise
 
+  // Intentionally omit `serverURL` to ensure relative path
   const currentRoute = formatAdminURL({
     adminRoute,
     path: Array.isArray(params.segments) ? `/${params.segments.join('/')}` : null,
-    serverURL: config.serverURL,
   })
 
   const segments = Array.isArray(params.segments) ? params.segments : []
@@ -140,10 +140,7 @@ export const RootPage = async ({
         }),
       },
       // intentionally omit `serverURL` to keep URL relative
-      urlSuffix: `${formatAdminURL({
-        adminRoute,
-        path: Array.isArray(params.segments) ? `/${params.segments.join('/')}` : null,
-      })}${searchParams ? queryString : ''}`,
+      urlSuffix: `${currentRoute}${searchParams ? queryString : ''}`,
     },
   })
 
@@ -224,15 +221,11 @@ export const RootPage = async ({
     }
   }
 
-  const createFirstUserRoute = formatAdminURL({
-    adminRoute,
-    path: _createFirstUserRoute,
-    serverURL: config.serverURL,
-  })
-
   const usersCollection = config.collections.find(({ slug }) => slug === userSlug)
   const disableLocalStrategy = usersCollection?.auth?.disableLocalStrategy
 
+  const createFirstUserRoute = formatAdminURL({ adminRoute, path: _createFirstUserRoute })
+
   if (disableLocalStrategy && currentRoute === createFirstUserRoute) {
     redirect(adminRoute)
   }

packages/next/src/views/Root/isPathMatchingRoute.ts

@@ -33,6 +33,7 @@ export const isPathMatchingRoute = ({
   if (exact) {
     return currentRoute === viewRoute
   }
+
   if (!exact) {
     return viewRoute.startsWith(currentRoute)
   }

test/helpers/e2e/auth/logout.ts

@@ -3,10 +3,23 @@ import type { Page } from 'playwright'
 import { POLL_TOPASS_TIMEOUT } from 'playwright.config.js'
 import { expect } from 'playwright/test'
 
+import { openNav } from '../toggleNav.js'
+
 export const logout = async (page: Page, serverURL: string) => {
   await page.goto(`${serverURL}/admin/logout`)
 
   await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).toContain('/admin/login')
 
   await expect(page.locator('.login')).toBeVisible()
 }
+
+export const logoutViaNav = async (page: Page) => {
+  const { nav } = await openNav(page)
+  const logoutAnchor = nav.locator('a[title="Log out"]')
+  await expect(logoutAnchor).toBeVisible()
+  await logoutAnchor.click()
+
+  await expect.poll(() => page.url(), { timeout: POLL_TOPASS_TIMEOUT }).toContain('/admin/login')
+
+  await expect(page.locator('.login')).toBeVisible()
+}

test/helpers/e2e/toggleNav.ts

@@ -2,27 +2,36 @@ import type { Page } from '@playwright/test'
 
 import { expect } from '@playwright/test'
 
-export async function openNav(page: Page): Promise<void> {
+export async function openNav(page: Page): Promise<{ nav: ReturnType<Page['locator']> }> {
   // wait for the preferences/media queries to either open or close the nav
   await expect(page.locator('.template-default--nav-hydrated')).toBeVisible()
 
   // close all open modals
   const dialogs = await page.locator('dialog[open]').elementHandles()
+
   for (let i = 0; i < dialogs.length; i++) {
     await page.keyboard.press('Escape')
   }
 
   // check to see if the nav is already open and if not, open it
   // use the `--nav-open` modifier class to check if the nav is open
   // this will prevent clicking nav links that are bleeding off the screen
-  if (await page.locator('.template-default.template-default--nav-open').isVisible()) {
-    return
+  const nav = page.locator('.template-default.template-default--nav-open')
+
+  if (await nav.isVisible()) {
+    return {
+      nav,
+    }
   }
 
   // playwright: get first element with .nav-toggler which is VISIBLE (not hidden), could be 2 elements with .nav-toggler on mobile and desktop but only one is visible
   await page.locator('.nav-toggler >> visible=true').click()
   await expect(page.locator('.nav--nav-animate[inert], .nav--nav-hydrated[inert]')).toBeHidden()
   await expect(page.locator('.template-default.template-default--nav-open')).toBeVisible()
+
+  return {
+    nav,
+  }
 }
 
 export async function closeNav(page: Page): Promise<void> {

test/server-url/config.ts

@@ -11,6 +11,7 @@ const dirname = path.dirname(filename)
 export default buildConfigWithDefaults({
   serverURL: 'http://localhost:3000',
   admin: {
+    autoLogin: false,
     importMap: {
       baseDir: path.resolve(dirname),
     },

test/server-url/e2e.spec.ts

@@ -1,6 +1,9 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
+import { login } from 'helpers/e2e/auth/login.js'
+import { logoutViaNav } from 'helpers/e2e/auth/logout.js'
+import { openNav } from 'helpers/e2e/toggleNav.js'
 import * as path from 'path'
 import { fileURLToPath } from 'url'
 
@@ -28,8 +31,15 @@ test.describe('serverURL', () => {
     await ensureCompilationIsDone({ page, serverURL })
   })
 
-  test('can load admin panel when serverURL is set', async () => {
+  test('can load admin panel', async () => {
+    await login({ page, serverURL: url.serverURL })
     await page.goto(url.admin)
-    await expect(page.getByText('Dashboard')).toBeVisible()
+    await expect(page.locator('.dashboard')).toBeVisible()
+  })
+
+  test('can log out', async () => {
+    await page.goto(url.admin)
+    await logoutViaNav(page)
+    await expect(page.locator('.login')).toBeVisible()
   })
 })