Should using `${host}/` as baseURL be allowed?

[AntonyZ89]

Environment

• Operating System: Linux
• Node Version: v20.17.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: npm@10.8.2
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

https://codesandbox.io/p/devbox/charming-brook-w74xx3

to reproduce please uncomment baseURL with a slash at the end

  auth: {
    provider: {
      type: "authjs",
    },
    // ok
    baseURL: "http://localhost:3000",
    // loop
    // baseURL: "http://localhost:3000/", (here)
  },

Describe the bug

The application can enter a loop if ${host}/ is used as the baseURL (e.g., http://localhost:3000/), because the NuxtAuthHandler is not located at the root path. Of course, if it were, everything would work, but my question is: is it common for the pathname / to be used as the path for the NuxtAuthHandler (the [...].ts file)? I think most people follow the documentation and use /api/auth/, but if not, they likely use /api/*something*.

When I first started using nuxt-auth in my application, I encountered this issue (or bug?), and without logs, I wasn't sure how to proceed. After several attempts and changes, I eventually figured it out, but I wonder how much time could have been saved if this had been blocked by default.

This is just a thought I had while integrating OAuth into my application.

Note: I don’t know if this problem persists with the Local Provider; my case refers to the AuthJS Provider.

Additional context

No response

Logs

WARN  [Vue Router warn]: No match found for location with path "/session"
 WARN  [Vue Router warn]: No match found for location with path "/session"
 WARN  [Vue Router warn]: No match found for location with path "/session" (repeated 46 times)

[n-rowe]

I was experiencing a similar issue as I wanted to have /auth instead of /api/auth.

nuxt.config.ts

auth: {
  baseURL: process.env.NUXT_AUTH_ORIGIN,
  originEnvKey: 'NUXT_AUTH_ORIGIN',
  provider: {
    type: 'authjs',
    defaultProvider: 'azure-ad-b2c',
  },
},
runtimeConfig: {
  authOrigin: process.env.NUXT_AUTH_ORIGIN,
  // ....
}

env

NUXT_AUTH_ORIGIN=http://localhost:3000

I got around it by patching the following lines: https://github.com/sidebase/nuxt-auth/blob/734953f89bd19192540452d9e0fbb225d01b28c3/src/runtime/server/services/authjs/nuxtAuthHandler.ts#L184-L186

 async function createRequestForAuthjs(event: H3Event, trustHostUserPreference: boolean): Promise<RequestInternal> { 
   const nextRequest: Omit<RequestInternal, 'action'> = { 
     host: getRequestURLFromH3Event(event, trustHostUserPreference).href, 

https://github.com/sidebase/nuxt-auth/blob/734953f89bd19192540452d9e0fbb225d01b28c3/src/runtime/server/services/authjs/nuxtAuthHandler.ts#L230-L236

function getRequestURLFromH3Event(event: H3Event, trustHost: boolean): URL {
  const base = getRequestBaseFromH3Event(event, trustHost)
  return new URL(base)

Full .patch file:

diff --git a/dist/runtime/server/services/authjs/nuxtAuthHandler.js b/dist/runtime/server/services/authjs/nuxtAuthHandler.js
index 58c555fbc94e577d035f2be0a2b04601b481fe37..bcbde0f05c8993186268d05d9faf6d59839f127c 100644
--- a/dist/runtime/server/services/authjs/nuxtAuthHandler.js
+++ b/dist/runtime/server/services/authjs/nuxtAuthHandler.js
@@ -105,7 +105,7 @@ export function getToken({ event, secureCookie, secret, ...rest }) {
 }
 async function createRequestForAuthjs(event, trustHostUserPreference) {
   const nextRequest = {
-    host: getRequestURLFromH3Event(event, trustHostUserPreference).origin,
+    host: getRequestURLFromH3Event(event, trustHostUserPreference).href,
     body: void 0,
     cookies: parseCookies(event),
     query: void 0,
@@ -131,12 +131,8 @@ async function createRequestForAuthjs(event, trustHostUserPreference) {
   };
 }
 function getRequestURLFromH3Event(event, trustHost) {
-  const path = (event.node.req.originalUrl || event.path).replace(
-    /^[/\\]+/g,
-    "/"
-  );
   const base = getRequestBaseFromH3Event(event, trustHost);
-  return new URL(path, base);
+  return new URL(base);
 }
 function getRequestBaseFromH3Event(event, trustHost) {
   if (trustHost) {

[AntonyZ89]

Hey, @n-rowe, I tried your case and I was able to run it successfully!

• 1: env:

  NUXT_AUTH_ORIGIN=http://localhost:3000/auth/

• 2: move your auth folder from server/api/auth/[...].ts to server/routes/auth/[...].ts, why? see here

😁

[n-rowe]

Hi @AntonyZ89 thanks for testing I sent the wrong env file, I had:

NUXT_AUTH_ORIGIN=http://localhost:3000/auth

And for my Nuxt Auth Handler, I already have it in the location you mentioned: server/routes/auth/[...].ts

The problem I'm encountering may be different from yours as the dev server starts up normally but the callback URL when logging in is incorrect and tries to go to http://localhost:3000/api/auth/callback/azure-ad-b2c

My investigation shows that this is caused by the path being removed from the host when passed to authjs, resulting in a default path being applied. I probably should make a separate issue for this. You may experience this issue as well because next-auth will apply a default path

[AntonyZ89]

@n-rowe In reality, we have a similar issue. The problem with this issue is related to the '/'. When you don't have the slash at the end of your auth origin, the library assumes you want to use the default. But when you include the '/' at the end, the library understands that this is the auth origin path. It's confusing and can cause misunderstandings.

Did you notice I put a '/' at the end of my example of your auth origin? Did you try it? If so, my bad! It really looks like we have a different problem here, and I didn’t quite get it 🥲

[phoenix-ru]

Thanks for your reports and points - we are trying to make it more intuitive via #913 right now. This is unfortunately not a first attempt and there are lots of edgecases and considerations around pathing for which we want to find a sound solution. I will include your usage of /auth as one of things to test.

[AntonyZ89]

@phoenix-ru Thank you for your attention :smile: I'll be watching PR's progress