message: 'Invalid URL', on v 0.10.0

[agracia-foticos]

Environment

• Operating System: Linux
• Node Version: v22.8.0
• Nuxt Version: 3.14.1592
• CLI Version: 3.17.1
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

Reproduction

i have this config:

 auth: {        
     // @ts-ignore (isEnabled boolean type)
     //BE CAREFULL, With visual studio debugger isEnabled can't be false, fails... issue opened
     isEnabled                         : true, //all environment variables are strings
     baseURL                           : `${process.env.NUXT_BASE_URL}/api/auth`, // The origin is set to the development origin. Change this when deploying to production by setting `origin` in this config before build-time or by exporting `AUTH_ORIGIN` by running `export AUTH_ORIGIN=...`                  
     // Whether to add a global authentication middleware that will protect all pages without exclusion
     globalAppMiddleware : true,
     provider                          : { type: 'authjs' },
     sessionRefresh : {
        enablePeriodically              : 86400000, //refresh the session every day
        enableOnWindowFocus             : true
     }
 },

1. go to localhost:3000
2. Server responses with error 500 and

error {
  url: '/',
  statusCode: 500,
  statusMessage: '',
  message: 'Invalid URL',
  stack: '<pre><span class="stack internal">at new URL (node:internal/url:816:29)</span>\n' +
    '<span class="stack internal">at /home/web/var/www/site/node_modules/@sidebase/nuxt-auth/dist/runtime/composables/authjs/utils/navigateToAuthPage.js:15:31</span>\n' +
    '<span class="stack internal">at runNextTicks (node:internal/process/task_queues:65:5)</span>\n' +
    '<span class="stack internal">at process.processImmediate (node:internal/timers:459:9)</span>\n' +
    '<span class="stack internal">at process.callbackTrampoline (node:internal/async_hooks:130:17)</span>\n' +
    '<span class="stack internal">at async Object.callAsync (/home/web/var/www/site/node_modules/unctx/dist/index.mjs:72:16)</span>\n' +
    '<span class="stack internal">at async Object.callAsync (/home/web/var/www/site/node_modules/unctx/dist/index.mjs:72:16)</span>\n' +
    '<span class="stack internal">at async /home/web/var/www/site/node_modules/nuxt/dist/pages/runtime/plugins/router.js:180:26</span></pre>'
}
3. Automatic, (without any action), redirects to http://localhost:3000/login?callbackUrl=http://localhost:3000/


If i turn globalAppMiddleware to false, works OK

Describe the bug

i have this config:

 auth: {        
     // @ts-ignore (isEnabled boolean type)
     //BE CAREFULL, With visual studio debugger isEnabled can't be false, fails... issue opened
     isEnabled                         : true, //all environment variables are strings
     baseURL                           : `${process.env.NUXT_BASE_URL}/api/auth`, // The origin is set to the development origin. Change this when deploying to production by setting `origin` in this config before build-time or by exporting `AUTH_ORIGIN` by running `export AUTH_ORIGIN=...`                  
     // Whether to add a global authentication middleware that will protect all pages without exclusion
     globalAppMiddleware : true,
     provider                          : { type: 'authjs' },
     sessionRefresh : {
        enablePeriodically              : 86400000, //refresh the session every day
        enableOnWindowFocus             : true
     }
 },

1. go to localhost:3000
2. Server responses with error 500 and

error {
  url: '/',
  statusCode: 500,
  statusMessage: '',
  message: 'Invalid URL',
  stack: '<pre><span class="stack internal">at new URL (node:internal/url:816:29)</span>\n' +
    '<span class="stack internal">at /home/web/var/www/site/node_modules/@sidebase/nuxt-auth/dist/runtime/composables/authjs/utils/navigateToAuthPage.js:15:31</span>\n' +
    '<span class="stack internal">at runNextTicks (node:internal/process/task_queues:65:5)</span>\n' +
    '<span class="stack internal">at process.processImmediate (node:internal/timers:459:9)</span>\n' +
    '<span class="stack internal">at process.callbackTrampoline (node:internal/async_hooks:130:17)</span>\n' +
    '<span class="stack internal">at async Object.callAsync (/home/web/var/www/site/node_modules/unctx/dist/index.mjs:72:16)</span>\n' +
    '<span class="stack internal">at async Object.callAsync (/home/web/var/www/site/node_modules/unctx/dist/index.mjs:72:16)</span>\n' +
    '<span class="stack internal">at async /home/web/var/www/site/node_modules/nuxt/dist/pages/runtime/plugins/router.js:180:26</span></pre>'
}
3. Automatic, (without any action), redirects to http://localhost:3000/login?callbackUrl=http://localhost:3000/


If i turn globalAppMiddleware to false, works OK

Additional context

No response

Logs

No response

[phoenix-ru]

Hi @agracia-foticos , thanks a lot for your report about v0.10! This data is valuable as there were lots of breaking changes and internal refactoring.
As our company is on a vacation, we could only get back to Sidebase work in the first/second week of January 2025.
Sorry for a wait

[phoenix-ru]

Also beware that there are breaking changes exactly regarding the URL logic. You may need to follow the release notes for that: https://auth.sidebase.io/upgrade/version-0.10.0

[agracia-foticos]

Actually, I think I have done the migration correctly, since if I disable the globalAppMiddleware I can log in and out without problems.
But when i put globalAppMiddleware to true, the first page its a 500 error (the trace of error its in this page)and automatically redirects me correctly to login page

[agracia-foticos]

i upgrade from "@sidebase/nuxt-auth": "0.9.4",

[Invisi]

I'm able to replicate that as well on 0.10.0 and it seems to originate in the following code introduced in 5788005:

nuxt-auth/src/runtime/composables/authjs/utils/navigateToAuthPage.ts

Lines 20 to 28 in 52d4b9a

	export function navigateToAuthPage(href: string) {
	const nuxtApp = useNuxtApp()
	if (import.meta.server) {
	if (nuxtApp.ssrContext) {
	// TODO: consider deprecating in favour of `app:rendered` and removing
	return nuxtApp.callHook('app:redirected').then(() => {
	const encodedLoc = href.replace(/"/g, '%22')
	const encodedHeader = new URL(href).toString()

In my case the href passed to navigateToAuthPage is /api/auth/signin?callback=.... I do have baseURL set to http://localhost:3000/api/auth[0], however runtimeConfig.public.auth.baseURL[1] is still /api/auth, resulting in the resolveApiUrlPath("signin", runtimeConfig) generating that invalid URL.

I disabled the defaultProvider during debugging, as the automatic redirect for the login didn't seem to set the state cookie correctly (#922), hence the redirect via useAuth.signIn().

nuxt-auth/src/runtime/utils/url.ts

Lines 15 to 26 in 52d4b9a

	export function resolveApiUrlPath(
	endpointPath: string,
	runtimeConfig: RuntimeConfig
	): string {
	// Fully-specified endpoint path - do not join with `baseURL`
	if (isExternalUrl(endpointPath)) {
	return endpointPath
	}
	const baseURL = resolveApiBaseURL(runtimeConfig)
	return joinURL(baseURL, endpointPath)
	}

[0] my config in nuxt.config.ts

  auth: {
    isEnabled: true,
    disableServerSideAuth: false,
    globalAppMiddleware: true,
    originEnvKey: "AUTH_ORIGIN",
    baseURL: "http://localhost:3000/api/auth",
    provider: {
      type: "authjs",
      trustHost: false,
    },
    sessionRefresh: {
      enablePeriodically: 60 * 1000, // refresh every x seconds
      enableOnWindowFocus: true,
    },
  }

[1] runtimeConfig in resolveApiUrlPath

"public": {
    "auth": {
        "baseURL": "/api/auth",
        "disableInternalRouting": false,
        "disableServerSideAuth": false,
        "globalAppMiddleware": true,
        "isEnabled": true,
        "originEnvKey": "AUTH_ORIGIN",
        "provider": {
            "addDefaultCallbackUrl": true,
            "defaultProvider": "",
            "trustHost": false,
            "type": "authjs"
        },
        "sessionRefresh": {
            "enableOnWindowFocus": true,
            "enablePeriodically": 60000,
            "handler": ""
        }
    }
}

[NathanD19]

Seeing the behavior this config.

`auth: {
isEnabled: true,
disableServerSideAuth: false,
globalAppMiddleware: true,
originEnvKey: 'http://localhost:3000',
baseURL: 'http://localhost:3000/api/auth',

provider: {
  type: 'authjs'           
}

}`