[Help] Cannot persist login with ssr on

[gaghigogu]

Hi,

I am experiencing the same problem described here #57. The difference is that I'm not using containers. The sanctum app is running behind Laravel Valet (nginx) at api.domain.test (https) while the nuxt app I'm trying to develop is served at app.domain.test.

Sorry if this question looks stupid but I cannot understand why it's not working.

Here are some details:

export default defineNuxtConfig({
    ssr: true,
    compatibilityDate: '2024-04-03',
    devtools: {enabled: true},
    devServer: {
        host: 'app.domain.test',
        port: 9200,

    },
    modules: ["nuxt-quasar-ui", "nuxt-auth-sanctum"],
    sanctum: {
        mode: 'cookie',
        baseUrl: 'https://api.domain.test',
        origin: 'http://app.domain.test:9200',
        endpoints: {
            user: '/auth/whoami'
        },
        globalMiddleware: {
            enabled: true,
        },
        redirect:{
            onAuthOnly: '/auth/login',
            keepRequestedRoute: true,
        },
        logLevel: 5
    },
    quasar: {
        sassVariables: '@/assets/variables.scss',
        components: {
            defaults: {
                QBtn: {
                    color: 'primary',
                    unelevated: true,
                    rounded: false
                }
            }
        }
    }
})

The login process is working as it should, redirecting me to a index page. If I try to make more requests from that page the auth keeps working:

<script setup lang="ts">
import {useRequestURL} from "#imports";

async function getUser() {
    const client = useSanctumClient();

    const {data} = await client('/auth/whoami', {parseResponse: JSON.parse});

    console.log(data);
}
</script>

<template>
    <div>
        <q-card>
            <q-card-section>
                INDEX {{ useRequestURL().origin }}
                <div>
                    <q-btn @click="getUser">get</q-btn>
                </div>
            </q-card-section>
        </q-card>
    </div>
</template>

I tried logging the request details on the Laravel app and everything is correct:

{
    "method": "GET",
    "url": "https://api.domain.test/auth/whoami",
    "ip": "127.0.0.1",
    "user_agent": "...",
    "body": [],
    "headers": {
        "cookie": [
            "XSRF-TOKEN=eyJ....; apimeteo_session=ey..."
        ],
        "te": [
            "trailers"
        ],
        "sec-fetch-site": [
            "cross-site"
        ],
        "sec-fetch-mode": [
            "cors"
        ],
        "sec-fetch-dest": [
            "empty"
        ],
        "dnt": [
            "1"
        ],
        "origin": [
            "http://app.domain.test:9200"
        ],
        "referer": [
            "http://app.domain.test:9200/"
        ],
        "accept-encoding": [
            "gzip, deflate, br"
        ],
        "accept-language": [
            "it,en-US;q=0.7,en;q=0.3"
        ],
        "accept": [
            "application/json"
        ],
        "user-agent": [
            "..."
        ],
        "host": [
            "api.domain.test"
        ]
    }
}

By the time I reload the browser page, no request is logged on the Laravel app, browser is redirected to login page and this message is logged:

[nuxt-auth-sanctum:ssr]  ERROR  Unable to load user identity from API [GET] "https://api.domain.test/auth/whoami": <no response> fetch failed

Note that everything works with ssr off (as I first guessed from the error message above)

Any help is appreciated.

[manchenkoff]

Hey @gaghigogu, usually <no response> fetch failed means that no server is responding on this route. I assume your API is unreachable from your Node server.

I don't have an experience with Laravel Valet. How do you run your Nuxt app?

[gaghigogu]

Hey @gaghigogu, usually <no response> fetch failed means that no server is responding on this route. I assume your API is unreachable from your Node server.

I don't have an experience with Laravel Valet. How do you run your Nuxt app?

I run the Nuxt app using npm run dev.

Laravel valet basically installs a dnsmasq instance redirecting all *.test domains to localhost. It then creates a nginx config for each managed site (ex. the api.domain.test config points the directory where the laravel app is installed).
Should I assume that the node server is not using dnsmasq rules then?

Thanks in advance for any help.

[gaghigogu]

Ok, more findings: the problem is related to the fact that the node server does not read /etc/hosts or dnsmasq configs. Or at least mine acts this way. It uses the network dns, so I'm kinda done with this setup. Serving laravel app with php artisan serve and setting the api url in .env file of nuxt app to http://localhost:8000 does the trick.

Hope that this could be helpful for someone.

[manchenkoff]

I'm glad you figured that out, thanks for leaving a comment with details @gaghigogu! I would say for local development it is always more straightforward to just use localhost.