Using nuxt-auth-sanctum with apps in Docker containers

[den15dev]

Hi,
First of all, thanks for the useful tool!
I'm using both Nuxt app and Laravel API app in separate Docker containers. These are fully isolated from each other: both app has its own project folder, git repo, and compose.yml file. But both containers (as all my other containers) run in the same Docker network. The Nuxt app domain is eshop3.local, and the Laravel API domain is api.eshop3.local — these are both virtual hosts in Windows which work through single nginx-proxy container.
The problem begins at Nuxt's server side: the server can't connect to api.eshop3.local because it runs inside a Docker container. It can connect to the API only by container name, which called eshop3-api-nginx.
So I wrote small Nuxt plugin which returns API base URL depending on whether the app running on client or server:

• on client side it's 'http://api.eshop3.local'
• on server side it's 'http://eshop3-api-nginx'

And my Nuxt app works correctly but now I need to implement registration and authentication (this is an educational e-commerse web app). So now I have two questions:

1. Is it possible to implement SSR-friendly Sanctum cookie authentication with such a configuration?
2. If the previous question's answer is "yes", then how to implement this with nuxt-auth-sanctum module?

I tried to dynamically change runtimeConfig.public.sanctum.baseUrl property on the client side to 'http://api.eshop3.local' but the module still use initially set value 'http://eshop3-api-nginx' and I get <no-response> error.

nuxt.config.ts:

export default defineNuxtConfig({
// ...
  runtimeConfig: {
        apiBaseServer: process.env.NUXT_API_BASE_SERVER, // This is 'http://eshop3-api-nginx'
        public: {
            apiBaseClient: 'http://api.eshop3.local',
            sanctum: {
                baseUrl: process.env.NUXT_API_BASE_SERVER, // This is 'http://eshop3-api-nginx'
               // ...
            }
       }
  }
// ...
})

default.vue:

const config = useRuntimeConfig()
if (import.meta.client) {
   // This doesn't work, the module still tries to connect to 'http://eshop3-api-nginx/login' on the client side
    config.public.sanctum.baseUrl = config.public.apiBaseClient
}

[manchenkoff]

Hi @den15dev!

Since cookie authentication for SSR requires to be configured for the same domain, you should keep your CSR and SSR environment as close as possible from the backend URL and config perspective. The easiest solution which I also use for my projects is to set Laravel container name as domain, e.g. laravel.test which will make it accessible from web browser and Nuxt container, even though it is a domain name.

You can check an example here - Breeze API Docker container.

[den15dev]

Thanks a lot! You helped me to solve my biggest problem in my project. After your reply, I decided to dig a little deeper and found that I can just use an alias in Laravel API's service, like so:

compose.yml:

services:
  eshop3-api-nginx:
    // ...
    networks:
      my-network:
        aliases:
          - api.eshop3.local

Thanks once again for your help and for your tool!