SSR fetch fails with Laravel Valet virtual host and HTTPS

[mtzrmzia]

I'm using Laravel Valet to serve my backend via https://api.calenzia.test/api/, and in the browser everything works fine — I can log in and use the session without problems.

However, when I refresh the page, the session is lost unless I disable the initial user fetch:

client: {
  initialRequest: false,
}

But if I enable:

client: {
  initialRequest: true,
}

Then I get this error during SSR:

[GET] "https://api.calenzia.test/api/auth/user": <no response> fetch failed

I believe this is because Node.js cannot resolve api.calenzia.test internally, even though I have this in my /etc/hosts:

127.0.0.1 calenzia.test
127.0.0.1 api.calenzia.test

And in the Nuxt server logs I see:

[nuxt-auth-sanctum:ssr] ⚙ Fetching user identity on plugin initialization
[nuxt-auth-sanctum:ssr] ⚙ [request] added default Accept header
[nuxt-auth-sanctum:ssr] ⚙ [request] added client headers to server request [ 'Referer', 'Origin', 'Cookie', 'User-Agent' ]
[nuxt-auth-sanctum:ssr] → Request headers for "/auth/user" { accept: 'application/json',
  cookie:
   'XSRF-TOKEN=eyJpdiI6IlFUY21JWTViUFNEMFlXb0dUVS94YXc9PSIsInZhbHVlIjoiSTVUbHlQZU1uYTdzUHJiYXdUWllmNnhiYjhSMlNYbll3Y05qMnc0ZkI0cnI5clVZR1VVQVA4Q0paT3crejVBVUZzSU50OE1HTTEzTGhUcEdTRWFTTGNHSzVLSjA5QVAwb2pQL1h6M2hMMUs0djBTZVdtTUEzRzhDZXZJME1NZDQiLCJtYWMiOiI5MmM1ZGNmNzVjMDAwYjY3ODg3NjgzMjljNDc5YTA5ZTg2YzMzODA3M2JjZDliNjYxNzg0NzA5MmExYjc4MzNlIiwidGFnIjoiIn0%3D; calenzia_session=rmAsGYOm5jczhX1R599wABPCflQq7CiscFj8raH6',
  origin: 'https://calenzia.test:3000',
  referer: 'https://calenzia.test:3000',
  'user-agent':
   'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36' }
    at FancyReporter.formatLogObj (node_modules/consola/dist/index.mjs:606:20)
    at FancyReporter.log (node_modules/consola/dist/shared/consola.DRwqZj3T.mjs:61:23)
    at Consola._log (node_modules/consola/dist/core.mjs:483:16)
    at resolveLog (node_modules/consola/dist/core.mjs:451:14)
    at Consola._logFn (node_modules/consola/dist/core.mjs:479:5)
    at Consola.trace (node_modules/consola/dist/core.mjs:408:19)
    at logRequestHeaders (node_modules/nuxt-auth-sanctum/dist/runtime/interceptors/request/logging.js:3:10)
    at node_modules/nuxt-auth-sanctum/dist/runtime/httpFactory.js:44:17
    at fn (node_modules/nuxt/dist/app/nuxt.js:230:44)
    at Object.callAsync (node_modules/unctx/dist/index.mjs:68:55)

---

Nuxt Configuration

I'm using SSL via mkcert. Here's the config:

nuxt.config.ts

devServer: {
  https: {
    key: './certificates/calenzia.test-key.pem',
    cert: './certificates/calenzia.test.pem',
  },
  host: 'calenzia.test',
},
sanctum: {
  mode: 'cookie',
  baseUrl: process.env.API_BASE_URL,
  origin: process.env.APP_URL,
  redirect: {
    keepRequestedRoute: true,
    onLogin: '/',
    onLogout: '/login',
    onAuthOnly: '/login',
    onGuestOnly: '/',
  },
  globalMiddleware: {
    enabled: true,
  },
  client: {
    initialRequest: true,
  },
  endpoints: {
    csrf: '/sanctum/csrf-cookie',
    login: '/auth/login',
    logout: '/auth/logout',
    user: '/auth/user',
  },
  logLevel: 5,
},

.env (frontend)

APP_URL=https://calenzia.test:3000
API_BASE_URL=https://api.calenzia.test/api/

---

Laravel Configuration

config/cors.php

return [
  'paths' => ['api/*', '/sanctum/csrf-cookie'],
  'allowed_methods' => ['*'],
  'allowed_origins' => env('APP_ENV') === 'production'
    ? ['https://calenzia.com', 'https://*.calenzia.com']
    : ['http://localhost:3000', 'https://calenzia.test:3000', 'http://calenzia.test:3000'],
  'allowed_headers' => ['*'],
  'supports_credentials' => true,
];

.env (backend)

APP_ENV=local
APP_URL=https://api.calenzia.test
FRONTEND_URL=https://calenzia.test

SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_SECURE_COOKIE=true
SESSION_DOMAIN=.calenzia.test
SANCTUM_STATEFUL_DOMAINS=localhost,localhost:3000,calenzia.test,calenzia.test:3000

---

The problem

Even though everything works in the browser, SSR fails to resolve or trust api.calenzia.test, likely due to the Valet self-signed certificate not being trusted by Node.js (during SSR). Setting NODE_TLS_REJECT_UNAUTHORIZED=0 might help temporarily, but it’s not ideal.

Question

❓ Does anyone know how to make SSR authentication work with Laravel Valet (HTTPS) and Nuxt 3 using initialRequest: true?

Any guidance or best practices would be greatly appreciated.

[mtzrmzia]

Even if I disable SSR, log in successfully, and have:

client: {
  initialRequest: true,
}

When I refresh the page, it redirects me to the login. What could I be doing wrong?

[mtzrmzia]

Tried to add NODE_TLS_REJECT_UNAUTHORIZED=0 on .env , then attempt login, login works fine, but then refresh the page and redirects me to /login. Using SSR and initialRequest: true.

.nuxt.config.ts

  ssr: true,
  sanctum: {
    mode: 'cookie',
    baseUrl: process.env.API_BASE_URL,
    origin: process.env.APP_URL,
    redirect: {
      keepRequestedRoute: true,
      onLogin: '/',
      onLogout: '/login',
      onAuthOnly: '/login',
      onGuestOnly: '/',
    },
    client: {
      initialRequest: true,
    },
    globalMiddleware: {
      enabled: true,
    },
    endpoints: {
      csrf: '/sanctum/csrf-cookie',
      login: '/auth/login',
      logout: '/auth/logout',
      user: '/auth/user',
    },
    logLevel: 5,
  },
  runtimeConfig: {
    public: {
      sanctum: {
        baseUrl: process.env.API_BASE_URL,
        origin: process.env.APP_URL,
      },
    },
  },

.env

APP_URL=https://calenzia.test:3000
API_BASE_URL=https://api.calenzia.test/api/
NODE_TLS_REJECT_UNAUTHORIZED=0

So now the issue with SSL and SSR is gone, but why it redirects me to login when refresh page?

[mtzrmzia]

@manchenkoff Any ideas on how I can set up an environment to use SSL on both the front end with Nuxt and Laravel on the back end? I'm losing patience trying to get SSL working using Valet. 😩

[mtzrmzia]

@manchenkoff I tried disabling SSR, using localhost with different ports in both Laravel and Nuxt, both without SSL. And yet, when I log in, I'm still logged out when I refresh the browser. What am I doing wrong? It doesn't work with SSR or without SSR, with SSL or without SSL. Any ideas?

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  ssr: false,
  devServer: {
    port: 3000,
  },
  modules: [
    'nuxt-auth-sanctum',
  ],
  sanctum: {
    mode: 'cookie',
    baseUrl: process.env.API_BASE_URL,
    origin: process.env.APP_URL,
    redirect: {
      keepRequestedRoute: true,
      onLogin: '/',
      onLogout: '/login',
      onAuthOnly: '/login',
      onGuestOnly: '/',
    },
    client: {
      initialRequest: true,
    },
    globalMiddleware: {
      enabled: true,
    },
    endpoints: {
      csrf: '/sanctum/csrf-cookie',
      login: '/auth/login',
      logout: '/auth/logout',
      user: '/auth/user',
    },
    logLevel: 5,
  },
  runtimeConfig: {
    public: {
      sanctum: {
        baseUrl: process.env.API_BASE_URL,
        origin: process.env.APP_URL,
      },
    },
  },
});

.env

APP_URL=http://localhost:3000
API_BASE_URL=http://localhost:8000/api

cors.php

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['http://localhost', 'http://localhost:3000'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

.env

SESSION_DRIVER=database
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=
SESSION_SECURE_COOKIE=false
SANCTUM_STATEFUL_DOMAINS=localhost:3000

And using php artisan serve --host=127.0.0.1 --port=8000

[mtzrmzia]

Sorry for all the spam, I finally got it working and for now I'm fine with localhost. Thanks for this module 🥇

[manchenkoff]

Hey @mtzrmzia! Sorry for the late reply. If you can post your findings here, it would be useful for others in the future