How to check if the user is authenticated?

[mityukov]

Hi, I'm new to Nuxt, so, probably a dumb question…

I've configured my app to connect to a Laravel backend using "token" mode. login() works and it stores token into a cookie, as expected. refreshIdentity() and client() also work, but only if called via a button. But when I want to check authentication status during the page initialization - console.log(isAuthenticated.value, user.value) is returning false, null

// app.vue
<script setup>
const { login, isAuthenticated, user, refreshIdentity } = useSanctumAuth()

console.log({isAuth: isAuthenticated.value, u: user.value}) // => always `false, null`, but I need to know authentication status HERE, before something is rendered…

async function logIn() // this works when called
{
  const credentials = {
    email: "xxx",
    password: "yyy",
  }
  const loginRes = await login(credentials)
}

async function checkUser() // => when calling this on a button click, I have `true, object`, as expected
{
  await refreshIdentity()
  console.log(isAuthenticated.value, user.value)
}
</script>

[manchenkoff]

Hey @mityukov! When you call login method and token is retrieved, the module automatically calls refreshIdentity to populate Nuxt state (example in sources - here).
If you experience incorrect user and authentication value during page load, it might be the case that your config is not working well with SSR mode.
Please, provide the logs (with logLevel=5) and nuxt.config.ts contents, it would help to determine the problem!

[mityukov]

I've managed to configure it to work in recommended "cookie" mode, but this issue preserves.

Here's my configuration:

import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  logLevel: "verbose",
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [
      tailwindcss(),
    ],
  },
  modules: ['nuxt-auth-sanctum'],
  sanctum: {
    baseUrl: 'https://mappanel.test', // backend
    logLevel: 5
  },
  devServer: {
    host: 'mappanel.test',
    https: {
      key: './mappanel.test.key',
      cert: './mappanel.test.crt'
    }
  },
})

[mityukov]

[nuxt-auth-sanctum:ssr] ERROR Unable to load user identity from API [GET] "https://mappanel.test/api/user": fetch failed

Here's what nuxt-auth-sanctum:ssr sends to backend (among other data) when refreshing identity::

origin: 'http://mappanel.test:3000',

The browser sends 'origin: https://mappanel.test:3000` (which is how is should be way). Could it be the reason?

[mityukov]

Updating "origin" in config did not help…
Maybe, it's something with server-side fetching in general… It says "unable to verify the first certificate" in the very end…

[nuxt-auth-sanctum:ssr] ⚙ Fetching user identity on plugin initialization
[nuxt-auth-sanctum:ssr] ⚙ [request] added default headers [ 'Accept' ]
[nuxt-auth-sanctum:ssr] ⚙ [request] added client headers to server request [ 'Referer', 'Origin', 'Cookie', 'User-Agent' ]
[nuxt-auth-sanctum:ssr] → Request headers for "/api/user" { accept: 'application/json',
  cookie:
   'XSRF-TOKEN=...; app_name_session=...',
  origin: 'https://mappanel.test:3000',
  referer: 'https://mappanel.test:3000',
  'user-agent':
   'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36' }
    at FancyReporter.formatLogObj (node_modules/consola/dist/index.mjs:606:20)
    at FancyReporter.log (node_modules/consola/dist/shared/consola.Cs5FdtHD.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 onRequest (node_modules/nuxt-auth-sanctum/dist/runtime/httpFactory.js:59:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async callHooks (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:134:7)
    at async $fetchRaw2 (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:207:7)

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

    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async $fetch2 (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:316:15)
    at async initialIdentityLoad (node_modules/nuxt-auth-sanctum/dist/runtime/plugin.js:42:20)
    at async setup (node_modules/nuxt-auth-sanctum/dist/runtime/plugin.js:70:119)
    at async Object.callAsync (node_modules/unctx/dist/index.mjs:72:16)
    at async applyPlugin (node_modules/nuxt/dist/app/nuxt.js:142:25)
    at async executePlugin (node_modules/nuxt/dist/app/nuxt.js:179:9)
    at async applyPlugins (node_modules/nuxt/dist/app/nuxt.js:193:5)
    at async createNuxtAppServer (node_modules/nuxt/dist/app/entry.js:15:7)
    at async default (node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:34:18)

  [cause]: fetch failed

      at node:internal/deps/undici/undici:13502:13
      at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
      at async $fetchRaw2 (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:258:26)
      at async $fetch2 (node_modules/ofetch/dist/shared/ofetch.03887fc3.mjs:316:15)
      at async initialIdentityLoad (node_modules/nuxt-auth-sanctum/dist/runtime/plugin.js:42:20)
      at async setup (node_modules/nuxt-auth-sanctum/dist/runtime/plugin.js:70:119)
      at async Object.callAsync (node_modules/unctx/dist/index.mjs:72:16)
      at async applyPlugin (node_modules/nuxt/dist/app/nuxt.js:142:25)
      at async executePlugin (node_modules/nuxt/dist/app/nuxt.js:179:9)
      at async applyPlugins (node_modules/nuxt/dist/app/nuxt.js:193:5)

    [cause]: unable to verify the first certificate

        at TLSSocket.onConnectSecure (node:_tls_wrap:1679:34)
        at TLSSocket.emit (node:events:518:28)
        at TLSSocket._finishInit (node:_tls_wrap:1078:8)
        at ssl.onhandshakedone (node:_tls_wrap:864:12)
        at TLSWrap.callbackTrampoline (node:internal/async_hooks:130:17)

[mityukov]

This works! 🎉
NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev

[manchenkoff]

Great that you found the root cause! It's always something in our environments 😄