Nuxt•2mo ago

Has anyone played around with "nuxt-auth-sanctum"? I have some issues.

Link to module: https://manchenkoff.gitbook.io/nuxt-auth-sanctum So where is my issue? I've managed to setup everything on Laravel 11 as for sanctum, but my issue is that my Nuxt app sends the GET /api/user request without the Application/json header. My question is, does anyone know how I can solve this? OR how else would you setup authentication with laravel 11 nowadays? I get this error from nuxt because the request doesnt have the right header:

[nuxt-auth-sanctum:ssr]  ERROR  Unable to load user identity from API [GET] "http://localhost:8000/api/user": <no response> fetch failed

[nuxt-auth-sanctum:ssr]  ERROR  Unable to load user identity from API [GET] "http://localhost:8000/api/user": <no response> fetch failed

If I call the same endpoint from Hoppscotch (postman) with the right header, then it works. I am looking for both tips, other recommendations to auth etc. I am fairly new to Nuxt and Laravel.

Introduction | Nuxt - Laravel Sanctum

This module provides a simple way to use Laravel Sanctum with Nuxt. SSR-ready!

11 Replies

kapa.ai•2mo ago

Hi @Polak. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have specific details about the "nuxt-auth-sanctum" module or its implementation. However, I can offer some general advice and alternative approaches for authentication in Nuxt 3 with Laravel Sanctum. 1. Custom Authentication Setup: Instead of using a third-party module, you could implement a custom authentication solution using Nuxt 3's built-in features. Here's an approach you might consider: - Create a custom $fetch instance in a Nuxt plugin to handle API requests, including setting the appropriate headers and handling authentication errors. Here's an example of how you could set this up:

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  const { session } = useUserSession()

  const api = $fetch.create({
    baseURL: '<http://localhost:8000',> // Your Laravel API URL
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    onRequest({ request, options }) {
      if (session.value?.token) {
        options.headers.set('Authorization', `Bearer ${session.value?.token}`)
      }
    },
    async onResponseError({ response }) {
      if (response.status === 401) {
        await nuxtApp.runWithContext(() => navigateTo('/login'))
      }
    }
  })

  return {
    provide: {
      api
    }
  }
})

// plugins/api.ts
export default defineNuxtPlugin((nuxtApp) => {
  const { session } = useUserSession()

  const api = $fetch.create({
    baseURL: '<http://localhost:8000',> // Your Laravel API URL
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    },
    onRequest({ request, options }) {
      if (session.value?.token) {
        options.headers.set('Authorization', `Bearer ${session.value?.token}`)
      }
    },
    async onResponseError({ response }) {
      if (response.status === 401) {
        await nuxtApp.runWithContext(() => navigateTo('/login'))
      }
    }
  })

  return {
    provide: {
      api
    }
  }
})

This approach is based on the Nuxt documentation on custom $fetch (https://nuxt.com/docs/guide/recipes/custom-usefetch#custom-fetch). 2. Handling CSRF Token: If you're using Laravel Sanctum with SPA authentication, you might need to handle CSRF tokens. You can fetch the CSRF token before making authenticated requests:

const csrfToken = await fetchCsrfToken()
// Then include this token in your subsequent requests

const csrfToken = await fetchCsrfToken()
// Then include this token in your subsequent requests

3. Server-Side Redirection: For handling authentication errors server-side, you can use the approach mentioned in this Stack Overflow answer (https://stackoverflow.com/questions/78706609):

const { data, error } = await useAsyncData('data', () => {
  return userService.getSelf().catch(() => {
    if (import.meta.server) {
      const response = requestEvent.node.res;
      if (!response.headersSent) {
        response.writeHead(302, {Location: '/login'});
        response.end();
      } else {
        router.push('/login');
      }
    }
  })
});

const { data, error } = await useAsyncData('data', () => {
  return userService.getSelf().catch(() => {
    if (import.meta.server) {
      const response = requestEvent.node.res;
      if (!response.headersSent) {
        response.writeHead(302, {Location: '/login'});
        response.end();
      } else {
        router.push('/login');
      }
    }
  })
});

This approach ensures proper redirection on both server and client side when authentication fails. 4. Alternative Authentication Solutions: If you're open to other authentication solutions, you might want to look into nuxt-auth-utils (https://github.com/Atinux/nuxt-auth-utils), which is mentioned in a recent GitHub pull request for Nuxt documentation (https://github.com/nuxt/nuxt/pull/27287). This module provides utilities for managing user sessions and authentication in Nuxt 3. Remember to always set the appropriate headers for your API requests, including 'Content-Type': 'application/json' and 'Accept': 'application/json'. If you continue to face issues, it might be helpful to check the Laravel Sanctum configuration and ensure that CORS is properly set up for your Nuxt application's domain. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@260534435915628554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PolakOP•2mo ago

@kapa.ai If I were to add a app.config.ts file, will this run automatically or?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, if you add an app.config.ts file to your Nuxt project, it will be automatically recognized and used by Nuxt. Here are some key points about app.config.ts: 1. Automatic Recognition: Nuxt automatically detects and uses the app.config.ts file when it's present in your project's source directory (by default, the root of the project) Nuxt Configuration (https://nuxt.com/docs/getting-started/configuration#app-configuration). 2. File Extensions: The file can have either .ts, .js, or .mjs extensions App Config (https://nuxt.com/docs/guide/directory-structure/app-config). 3. Purpose: It's used to expose reactive configuration within your application, allowing you to define public variables that can be determined at build time App Config (https://nuxt.com/docs/guide/directory-structure/app-config). 4. Usage: You define your configuration using the defineAppConfig function:

   export default defineAppConfig({
     title: 'Hello Nuxt',
     theme: {
       dark: true,
       colors: {
         primary: '#ff0000'
       }
     }
   })

   export default defineAppConfig({
     title: 'Hello Nuxt',
     theme: {
       dark: true,
       colors: {
         primary: '#ff0000'
       }
     }
   })

Nuxt Configuration (https://nuxt.com/docs/getting-started/configuration#app-configuration) 5. Accessing the Config: You can access this configuration in your application using the useAppConfig() composable App Config Usage (https://nuxt.com/docs/api/composables/use-app-config). 6. Hot Module Replacement: The app.config.ts file supports hot module replacement, allowing you to update it at runtime Nuxt Configuration (https://nuxt.com/docs/getting-started/configuration#runtimeconfig-vs-appconfig). 7. Security: Do not put any secret values inside app.config as it is exposed to the user client bundle App Config (https://nuxt.com/docs/guide/directory-structure/app-config). Remember, app.config.ts is different from runtimeConfig in nuxt.config.ts. While runtimeConfig is for values that can be overridden by environment variables, app.config.ts is for configuration determined at build time Nuxt Configuration (https://nuxt.com/docs/getting-started/configuration#runtimeconfig-vs-appconfig). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@260534435915628554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PolakOP•2mo ago

@kapa.ai I have this code but it says that NuxtApp is not defined.

import type { FetchContext } from 'ofetch'
import type { ConsolaInstance } from 'consola'

export default defineAppConfig({
  sanctum: {
    interceptors: {
      onRequest: async (
        app: NuxtApp,
        ctx: FetchContext,
        logger: ConsolaInstance,
      ) => {
        ctx
          .options
          .headers
          .set('X-Custom-Headers', 'custom-value')

        logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
      },

      onResponse: async (
        app: NuxtApp,
        ctx: FetchContext,
        logger: ConsolaInstance,
      ) => {
        logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
      },
    },
  },
})

import type { FetchContext } from 'ofetch'
import type { ConsolaInstance } from 'consola'

export default defineAppConfig({
  sanctum: {
    interceptors: {
      onRequest: async (
        app: NuxtApp,
        ctx: FetchContext,
        logger: ConsolaInstance,
      ) => {
        ctx
          .options
          .headers
          .set('X-Custom-Headers', 'custom-value')

        logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
      },

      onResponse: async (
        app: NuxtApp,
        ctx: FetchContext,
        logger: ConsolaInstance,
      ) => {
        logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
      },
    },
  },
})

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're having an issue with the NuxtApp type in your app.config.ts file. The error you're seeing is because NuxtApp is not automatically available in the app.config.ts context. However, there are a couple of important points to consider: 1. Type Limitations: As mentioned in the Nuxt documentation (https://nuxt.com/docs/guide/directory-structure/app-config#known-limitations), there are some limitations when it comes to using certain types and imports in app.config.ts. This is because the file is shared with Nitro, which processes it without full Vue component support. 2. Incorrect Usage: The app.config.ts file is not the correct place to define interceptors or use runtime objects like NuxtApp. The app.config.ts is meant for static configuration that's determined at build time, not for runtime logic or plugin-like functionality. Instead of using app.config.ts for this purpose, you should consider the following alternatives: 1. Use a Nuxt Plugin: For interceptors and runtime logic, it's better to use a Nuxt plugin. Here's how you could modify your code to work as a plugin:

// plugins/sanctum-interceptors.ts
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const logger = useLogger() // or import your logger

  nuxtApp.hook('app:created', () => {
    nuxtApp.$fetch.onRequest(async (ctx) => {
      ctx.options.headers.set('X-Custom-Headers', 'custom-value')
      logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
    })

    nuxtApp.$fetch.onResponse(async (ctx) => {
      logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
    })
  })
})

// plugins/sanctum-interceptors.ts
export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const logger = useLogger() // or import your logger

  nuxtApp.hook('app:created', () => {
    nuxtApp.$fetch.onRequest(async (ctx) => {
      ctx.options.headers.set('X-Custom-Headers', 'custom-value')
      logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
    })

    nuxtApp.$fetch.onResponse(async (ctx) => {
      logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
    })
  })
})

This approach uses the useNuxtApp (https://nuxt.com/docs/api/composables/use-nuxt-app) composable implicitly through the defineNuxtPlugin function, which provides the nuxtApp instance as an argument. 2. If you need to keep some configuration in app.config.ts, you can do so without using runtime types:

// app.config.ts
export default defineAppConfig({
  sanctum: {
    customHeaderValue: 'custom-value'
  }
})

// app.config.ts
export default defineAppConfig({
  sanctum: {
    customHeaderValue: 'custom-value'
  }
})

Then, in your plugin, you can access this configuration:

// plugins/sanctum-interceptors.ts
export default defineNuxtPlugin((nuxtApp) => {
  const appConfig = useAppConfig()
  const logger = useLogger() // or import your logger

  nuxtApp.hook('app:created', () => {
    nuxtApp.$fetch.onRequest(async (ctx) => {
      ctx.options.headers.set('X-Custom-Headers', appConfig.sanctum.customHeaderValue)
      logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
    })

    // ... rest of your interceptor logic
  })
})

// plugins/sanctum-interceptors.ts
export default defineNuxtPlugin((nuxtApp) => {
  const appConfig = useAppConfig()
  const logger = useLogger() // or import your logger

  nuxtApp.hook('app:created', () => {
    nuxtApp.$fetch.onRequest(async (ctx) => {
      ctx.options.headers.set('X-Custom-Headers', appConfig.sanctum.customHeaderValue)
      logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
    })

    // ... rest of your interceptor logic
  })
})

This approach separates the static configuration (in app.config.ts) from the runtime logic (in the plugin), which is more in line with Nuxt's architecture and avoids the limitations of app.config.ts. Remember, the app.config.ts file is meant for static configuration, while plugins are better suited for runtime logic and interceptors. By moving your interceptor logic to a plugin, you'll be able to use the NuxtApp type and other runtime features without issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@260534435915628554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PolakOP•2mo ago

@kapa.ai I get error "nuxtApp.$fetch is of type unknown

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand you're encountering an error stating that "nuxtApp.$fetch is of type unknown". This issue is related to TypeScript type inference in Nuxt 3. Let's address this problem with a proper solution. The error occurs because TypeScript doesn't automatically recognize the type of $fetch on the nuxtApp object. To resolve this, we need to properly type the $fetch property. Here's how you can fix it: 1. First, import the necessary types from Nuxt:

import type { $Fetch } from 'nitropack'

import type { $Fetch } from 'nitropack'

2. Then, modify your plugin code to explicitly type $fetch:

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const logger = useLogger() // or import your logger

  nuxtApp.hook('app:created', () => {
    const $fetch = nuxtApp.$fetch as $Fetch

    $fetch.onRequest(async (ctx) => {
      ctx.options.headers.set('X-Custom-Headers', 'custom-value')
      logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
    })

    $fetch.onResponse(async (ctx) => {
      logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
    })
  })
})

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig()
  const logger = useLogger() // or import your logger

  nuxtApp.hook('app:created', () => {
    const $fetch = nuxtApp.$fetch as $Fetch

    $fetch.onRequest(async (ctx) => {
      ctx.options.headers.set('X-Custom-Headers', 'custom-value')
      logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
    })

    $fetch.onResponse(async (ctx) => {
      logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
    })
  })
})

This approach explicitly casts nuxtApp.$fetch to the $Fetch type, which should resolve the "unknown type" error. If you're still facing issues, you might want to consider using the useRequestFetch composable, which is designed to work with Nuxt 3's typing system:

export default defineNuxtPlugin(() => {
  const logger = useLogger() // or import your logger

  const $fetch = useRequestFetch()

  $fetch.onRequest(async (ctx) => {
    ctx.options.headers.set('X-Custom-Headers', 'custom-value')
    logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
  })

  $fetch.onResponse(async (ctx) => {
    logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
  })
})

export default defineNuxtPlugin(() => {
  const logger = useLogger() // or import your logger

  const $fetch = useRequestFetch()

  $fetch.onRequest(async (ctx) => {
    ctx.options.headers.set('X-Custom-Headers', 'custom-value')
    logger.debug(`[onRequest] custom interceptor (${ctx.request})`)
  })

  $fetch.onResponse(async (ctx) => {
    logger.debug(`[onResponse] custom interceptor (${ctx.request})`)
  })
})

This approach uses the useRequestFetch (https://nuxt.com/docs/api/composables/use-request-fetch) composable, which should provide proper typing for the $fetch instance. Remember, these interceptors will be applied globally to all $fetch requests in your Nuxt application. If you only want to apply these interceptors to specific requests, you might want to create a custom instance of $fetch instead. Nuxt Documentation on $fetch (https://nuxt.com/docs/api/utils/dollarfetch) provides more information on how to use and customize $fetch in Nuxt 3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@260534435915628554> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Has anyone played around with "nuxt-auth-sanctum"? I have some issues.

Did you find this page helpful?