feat(#797, #878): set baseURL via environment variables and improve internal url detection

[zoey-kaiser]

🔗 Linked issue

closes #797, #878

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

📝 Checklist

• I have linked an issue or discussion.
• I have added tests (if possible).
• I have updated the documentation accordingly.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/@sidebase/nuxt-auth@913

commit: 1cd7381

[zoey-kaiser]

Testing auth.baseURL and AUTH_ORIGIN:

Only setting auth.baseURL

• auth.baseURL not set:
  • Requests made to /api/auth
• auth.baseURL set to http://localhost:8080
  • Requests made to http://localhost:8080
• auth.baseURL set to http://localhost:8080/auth
  • Requests made to http://localhost:8080/auth

Combination of auth.baseURL and AUTH_ORIGIN

• auth.baseURL not set, AUTH_ORIGIN not set:
  • Requests made to /api/auth
• auth.baseURL set to http://localhost:8080, AUTH_ORIGIN not set:
  • Requests made to http://localhost:8080
• auth.baseURL set to http://localhost:8080, AUTH_ORIGIN set to http://localhost:8081:
  • Requests made to http://localhost:8081
• auth.baseURL set to http://localhost:8080, AUTH_ORIGIN set to http://localhost:8081/auth:
  • Requests made to http://localhost:8081/auth

Testing setting internal vs external URLs:

• Internal auth.baseURL:
  • auth.baseURL set to /auth
  • AUTH_ORIGIN not set
  • auth.provider.endpoints.signIn.path set to /login
  • Request made to: /auth/login
• Internal AUTH_ORIGIN:
  • auth.baseURL not set
  • AUTH_ORIGIN set to /auth
  • auth.provider.endpoints.signIn.path set to /login
  • Request made to: /auth/login
• External auth.baseURL:
  • auth.baseURL set to http://localhost:8080/auth
  • AUTH_ORIGIN not set
  • auth.provider.endpoints.signIn.path set to /login
  • Request made to: http://localhost:8080/auth/login
• External AUTH_ORIGIN:
  • auth.baseURL not set
  • AUTH_ORIGIN set to http://localhost:8080/auth
  • auth.provider.endpoints.signIn.path set to /login
  • Request made to: http://localhost:8080/auth/login

Note: I tested that the internal URLs actually request internal URLs, but setting the path to a non existent route and ensuring I receive the Vue Router warning

[phoenix-ru]

In general I understand the intent and very like the testing comment you left. However, there are several points:

1. What happens to users who already use baseURL as e.g. http://localhost:3000? In my understanding, requests are now made to this URL without adding /api/auth? This is a breaking change and needs to have its own minor release + docs if we settle on it.
2. What happens to internal $fetch calls? Remember that they have a limitation - they only work when path starts with a /. And here are two facts that break it:
3. When using authjs provider in which these calls are the most relevant, you need to set AUTH_ORIGIN or baseURL to a fully-specified URL (i.e. protocol, hostname, etc.);
4. Calling a fully-specified URL using $fetch invokes external fetch, meaning that a real HTTP call is made from the server to itself - and it has a relatively high cost, bottlenecking performance.

Any implementation that doesn't provide backwards compatibility with at least these two points is therefore highly discouraged :/
I'd like for us to get involved in an RFC discussion and come up with a spec of how calls are made depending on what variable is set. For example, we know for sure:

• authjs provider is the same Nuxt server and therefore should always prefer internal calls, regardless of the AUTH_ORIGIN (only taking into account pathname);
• local provider is isomorphic (with lean towards external backends, it seems), and origin needs to be taken literally - if it is set, we assume all calls are external.
  With these in mind, it might even make sense to disconnect the implementations of two providers into separate URL utils.

[phoenix-ru]

This looks like a breaking change

[zoey-kaiser]

This is a breaking change and needs to have its own minor release + docs if we settle on it.

It is! I had forgotten to add the label. However, I think these changes are desperately needed as the current logic makes no sense and limits how you can use it. E.g. I am working on a project where the external API routes are as follows:

• sign in: localhost:8080/auth/login
• get session: localhost:8080/account/me

Adding /api/auth if no path is provided, makes the URLs listed above incompatible with the local provider, as there is no base path I can provide.

If I provide localhost:8080 as baseURL it gets transformed to: localhost:8080/api/auth which does not make sense IMO.

What happens to internal $fetch calls? Remember that they have a limitation - they only work when path starts with a /. And here are two facts that break it:

This logic has been removed, in favour of checking if origin was provided. If you are using an internal API within your Nuxt Application, I do not expect the origin to be passed (as in all our our examples this is also not the case). If no origin is provided, the fetch requests are made internally, if one is provided they are handled as external URLs.

Example Nuxt configuration that currently breaks

export default defineNuxtConfig({
  modules: ['@sidebase/nuxt-auth'],
  runtimeConfig: {
    public: {
      api: {
        baseURL: 'http://localhost:8080'
      }
    }
  },
  auth: {
    originEnvKey: 'NUXT_PUBLIC_API_BASE_URL',
    baseURL: 'http://localhost:8080',
    provider: {
      type: 'local',
      endpoints: {
        signIn: { path: '/auth/login', method: 'post' },
        signUp: { path: '/auth/register', method: 'post' },
        signOut: { path: '/auth/logout', method: 'post' },
        getSession: { path: '/accounts/me', method: 'get' }
      },
      pages: {
        login: '/auth/sign-in'
      },
      token: {
        signInResponseTokenPointer: '/token',
        maxAgeInSeconds: 60 * 60 * 24
      },
      session: {
        dataType: {
          id: 'string',
          name: 'string',
          email: 'string',
          createdAt: 'number',
          members: '{ id: number, email: string, roles: string[] }[]'
        },
      }
    },
    sessionRefresh: {
      enableOnWindowFocus: true,
      enablePeriodically: 5000
    },
    globalAppMiddleware: {
      isEnabled: true
    }
  },
})

[phoenix-ru]

This doesn't actually work the way you'd expect. It will set variables during build time. Because we are doing additional extractFromRuntimeConfig later, it gets quite convoluted

If you do not set AUTH_ORIGIN during build but set baseURL: 'http://localhost:3000/api/auth', and then during runtime set AUTH_ORIGIN=http://localhost:3001/other, some requests are made to localhost:3000/api/auth, while others are made to locahost:3001/api/auth