nuxt
Server routes are 404ing when navigateTo is used
Environment
Nuxi 3.1.2 15:35:08 15:35:09 RootDir: /Users/david.marr/playground/nuxt3-auth0 15:35:09 Nuxt project info: (copied to clipboard) 15:35:09
- Operating System:
Darwin - Node Version:
v16.19.0 - Nuxt Version:
3.1.2 - Nitro Version:
2.1.1 - Package Manager:
[email protected] - Builder:
vite - User Config:
modules,runtimeConfig,typescript - Runtime Modules:
@nuxt/[email protected] - Build Modules:
-
Reproduction
I am trying to build some server routes that act as auth callbacks / redirects for auth0. I think any openid connect provider is acceptable to test with, but I am just using an auth0 free trial for prototyping.
https://github.com/marr/nuxt3-auth0 is a reproduction using auth0 authentication for login/logout and protected pages.
install the repo and create a free auth0 app. Copy the .env.example file to .env and fill in the appropriate details. The callback url will be <your root>/callback. The login and logout paths are '/login' and '/logout'. These will need to be set in auth0 for the app to work correctly.
Load the app, and login using the "Login" link. Open the "About (protected)" link. You should see details of your logged in user. Click "Logout". Verify the "Logout" link now shows "Login". Click "About" without logging in. You see a 404, which should be a server-redirected page to the auth0 login page.
Describe the bug
In a page middleware, the navigateTo('/xyz', { external: true }) call causes a 404 when /xyz is a server route (external).
The client navigation occurs, but the 404 error page is rendered instead of the server route. Refreshing the page causes a server navigation and the page loads as expected.
Additional context
The following logs happen in the browser console when loading the app.
Logs
[Vue Router warn]: No match found for location with path "/logout"
[Vue Router warn]: No match found for location with path "/login"
After a discord chat with Daniel, I see that the route middleware won't be able to redirect without a FQDN and the external flag passed to navigateTo. This applies when trying to redirect to local server routes from route middleware as well. Therefore, this commit: https://github.com/marr/nuxt3-auth0/commit/5fc8529353605823a1a76f007a82bbc61f24820e will use a siteUrl defined in runtime config for the redirect.
The 404 is fixed with that commit.
I see another issue, now, which I'm not sure about. The "protected" page is exposed to the logged out user for a brief moment, before the route middleware can redirect. This appears only during a client navigation to the protected page in a logged out state. @danielroe do you know how I could prevent that?
I consider this a bug. Here's a minimal reproduction: https://stackblitz.com/edit/github-zzapxj.
On a related note, it seems navigating from plugins doesn't guarantee that the page won't be displayed. Ie, is there a way to have route middleware that prevents the page load?
sloved by rewrite navigateTo method
import { sendRedirect } from "h3"; const nuxtApp = useNuxtApp(); return nuxtApp .callHook("app:redirected") .then(() => sendRedirect(nuxtApp.ssrContext!.event, targetUrl, 302));
