search

manchenkoff / nuxt-auth-sanctum

Nuxt module for Laravel Sanctum authentication
https://manchenkoff.gitbook.io/nuxt-auth-sanctum/
MIT License
173 stars 21 forks source link

[Question] Keeps redirecting to login even I am authenticated #144

Closed ezekel closed 3 months ago

ezekel commented 3 months ago

Hi, I was able to successfully log in and it redirects me to the dashboard however when I refresh the page, I will get back to my login page, then If I manually type /dashboard to the URL keeps me redirected to login page even though I am authenticated.

My backend is Laravel 11 + octane using Frankenphp docker image

URL of my backend

https://larabells.local

.env of my backend

APP_URL=https://larabells.local FRONTEND_URL=https://nuxtnew.larabells.local:4000 SANCTUM_STATEFUL_DOMAINS=nuxtnew.larabells.local:4000 //commenting out and commenting in the issue still persist

and my frontend using docker also

https://nuxtnew.larabells.local:4000

in my nuxt app, I have .env

NUXT_PUBLIC_SANCTUM_BASE_URL=https://larabells.local

nuxtconfig

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
    devtools: {enabled: false},
    ssr: true,
    devServer: {
        port: 4000,
        host: '0.0.0.0',
        https: true,
    },
  sanctum: {
        baseUrl: 'https://larabells.local', // Laravel API
        mode: 'cookie',
        redirect: {

            onLogin: '/dashboard',
            onLogout: '/login',

        },
    },
});

pages/dasbhoard.vue

<script setup lang="ts">
definePageMeta({
  middleware: ['sanctum:auth','sanctum-verified'],
})

</script>

<template>
   <p>You are login as {{ `${user.email}` }}</p>

</template>

<style scoped>

</style>

pages/login.vue

<script setup lang="ts">
definePageMeta({
  middleware: ['sanctum:guest'],
})

</script>

<template>
  <AuthLoginForm />
</template>

<style scoped>

</style>

pages/about.vue

   <script setup lang="ts">
definePageMeta({
  middleware: ['sanctum:auth','sanctum-verified'],
})
const {user} = useSanctumAuth();
</script>

<template>
  <p>You are login as {{ `${user.email}` }}</p>
 <p>This is about for authenticated user only</p>
</template>

<style scoped>

</style>

package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "rm -rf /tmp/nitro && nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "@formkit/auto-animate": "^0.8.2",
    "@vee-validate/zod": "^4.13.2",
    "@vueuse/core": "^10.11.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lucide-vue-next": "^0.408.0",
    "radix-vue": "^1.9.1",
    "tailwind-merge": "^2.4.0",
    "tailwindcss-animate": "^1.0.7",
    "vee-validate": "^4.13.2",
    "vue": "latest",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@iconify-json/radix-icons": "^1.1.14",
    "@iconify/vue": "^4.1.2",
    "@nuxtjs/color-mode": "^3.4.2",
    "@nuxtjs/tailwindcss": "^6.12.1",
    "nuxt": "^3.12.4",
    "nuxt-auth-sanctum": "^0.4.4",
    "shadcn-nuxt": "^0.10.4",
    "typescript": "^5.5.3"
  }
}
manchenkoff commented 3 months ago

Hey @ezekel, since you are not using localhost for your URLs, make sure that your session domain is set properly (should be .larabells.local. However, when you refresh the page, Nuxt tries to send a request to your API from SSR environment, so it might be the case that this domain is not reachable due to docker network or the request cookies are refused.

Please, provide the logs from your nuxt app with the details of SSR request.

For docker setup, also take a look at the following issues:

ezekel commented 3 months ago

yes sorry I forgot to post, I have already this configuration in my .env

SESSION_DOMAIN=.larabells.local

I also have this in my etc

127.0.0.1 nuxtnew.larabells.local

ezekel commented 3 months ago

Hi,

Please, provide the logs from your nuxt app with the details of SSR request.

how can I get the log in console browser ?

manchenkoff commented 3 months ago

I also have this in my etc

127.0.0.1 nuxtnew.larabells.local

make sure that docker also can resolve this URL into proper localhost binding because by default Nuxt container can access Laravel API only by the container name (which we usually define in docker-compose.yml).

how can I get the log in console browser ?

You should get logs not from browser, but from your Node instance which handles SSR mode. Since you mentioned that you are using Docker for Nuxt, logs will be available there either in a file or in console output, but it depends on your configuration.

ezekel commented 3 months ago

Hi,

This is the error in my docker nuxt app when I refresh the dashboard then it redirect to login

2024-08-21 20:50:17 system
2024-08-21 20:50:05 
2024-08-21 20:50:05 [nuxt-auth-sanctum:ssr]  ERROR  Unable to load user identity from API [GET] "https://larabells.local/api/user": <no response> fetch failed
2024-08-21 20:50:05 
2024-08-21 20:50:05   at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2024-08-21 20:50:05   at async $fetch2 (node_modules/ofetch/dist/shared/ofetch.37386b05.mjs:268:15)
2024-08-21 20:50:05   at async node_modules/nuxt-auth-sanctum/dist/runtime/plugin.js:58:120
2024-08-21 20:50:05   at async Object.callAsync (node_modules/unctx/dist/index.mjs:72:16)
2024-08-21 20:50:05   at async applyPlugin (node_modules/nuxt/dist/app/nuxt.js:144:25)
2024-08-21 20:50:05   at async executePlugin (node_modules/nuxt/dist/app/nuxt.js:181:9)
2024-08-21 20:50:05   at async Module.applyPlugins (node_modules/nuxt/dist/app/nuxt.js:195:5)
2024-08-21 20:50:05   at async createNuxtAppServer (node_modules/nuxt/dist/app/entry.js:23:7)
2024-08-21 20:50:05   at async default (node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:34:18)
2024-08-21 20:50:05   at async Object.renderToString (node_modules/vue-bundle-renderer/dist/runtime.mjs:173:19)
2024-08-21 20:50:05 
2024-08-21 20:50:05 
2024-08-21 20:50:05  WARN  [Vue Router warn]: No match found for location with path "/installHook.js.map"
2024-08-21 20:50:05 
2024-08-21 20:50:05 
2024-08-21 20:50:05 [nuxt-auth-sanctum:ssr]  ERROR  Unable to load user identity from API [GET] "https://larabells.local/api/user": <no response> fetch failed
manchenkoff commented 3 months ago

@ezekel thanks for providing the error. As I said before, your problem is that Laravel container is not visible from your Nuxt container as stated in the error - [GET] "https://larabells.local/api/user": <no response> fetch failed. Please, either check all the issues I mentioned previously (about how to configure 2 docker containers to work with each other) or disable SSR if you cannot do that for some reason.

ezekel commented 3 months ago

Ok thank you I will be back

ezekel commented 3 months ago

Hi

I just disable the SSR for now and it works like a charm

But I will just continue checking above on how to get work if enabling the SSR, although I have also the same network both the backend and my nuxt but no luck.

Thank you

manchenkoff commented 3 months ago

Sure thing @ezekel, you can tackle it later but keep in mind that the problem is not the difference between networks, it is about dns resolving since container does not know about the domain linked to the other container, only its name. I usually name my containers like that:

In this case, if you call Laravel API from Nuxt SSR by domain name api.playground.test it will be resolved into containers name api.playground.test which will be resolved by docker network.

ezekel commented 3 months ago

Hi @manchenkoff

I got it working with SSR enabled. I need to use http not https both frontend and backend in local development.

Thank you