Feature Request: Support for Interceptors in API Calls

[Velman04]

Hello, and thanks for your great work on this module!

I’ve been using nuxt-sanctum-authentication in my Nuxt 3 project and I find it very helpful. However, I noticed that some other similar modules (e.g., nuxt-auth-sanctum) provide support for request/response interceptors in API calls.

Interceptors allow for additional flexibility, such as:

• Adding custom headers dynamically (e.g., X-Localization, Accept-Language)
• Implementing logging or telemetry for API requests/responses
• Modifying request payloads before sending

Here is an example of how this is implemented in nuxt-auth-sanctum via app.config.ts:

export default defineAppConfig({
  sanctum: {
    interceptors: {
      onRequest: async (app, ctx, logger) => {
        ctx.options.headers.set('X-Custom-Headers', 'custom-value');
        logger.debug(`[onRequest] custom interceptor (${ctx.request})`);
      },
      onResponse: async (app, ctx, logger) => {
        logger.debug(`[onResponse] custom interceptor (${ctx.request})`);
      },
    },
  },
});

Would you consider adding a similar interceptor system to nuxt-sanctum-authentication? This would allow developers to customize their API requests more efficiently.

Thanks in advance for your time and consideration! 🚀

[hkp22]

@Velman04

Thanks so much for your kind words and thoughtful feedback. I’m really glad you’ve found the nuxt-sanctum-authentication module helpful for your Nuxt 3 project.

Regarding your request for request/response interceptors—good news! The module already provides flexibility for such customizations through useSanctumFetch(), which is a pre-configured ofetch client tailored specifically for Laravel Sanctum.

How to Use useSanctumFetch for Interceptors

Since it behaves just like the standard ofetch client, you can use it to define custom headers, request/response handlers, and more. Here are some examples to get you started:

1. Adding Custom Headers Dynamically

await useSanctumFetch("/movies", {
  headers: {
    Accept: "application/json",
    "Cache-Control": "no-cache",
  },
});

2. Using Request/Response Interceptors

await useSanctumFetch("/movies", {
  onRequest: async (app, ctx, logger) => {
    ctx.options.headers.set("X-Custom-Headers", "custom-value");
    logger.debug(`[onRequest] custom interceptor (${ctx.request})`);
  },
  onResponse: async (app, ctx, logger) => {
    logger.debug(`[onResponse] custom interceptor (${ctx.request})`);
  },
});

3. Custom Headers in login() Function

await login(userCredentials, {
  headers: {
    "custom-header": "value",
  },
});

4. Handling Headers in Form Submissions

const form = useSanctumForm("post", "api/users", {
  name: "",
  email: "",
});

  form.submit({
    headers: {
      "custom-header": "value",
    },
  });

These options provide flexibility for developers to dynamically handle API requests and responses as needed.

Let me know if you have any more suggestions or run into any issues. Thanks again for your support and great feedback! 🚀

[Velman04]

Hi @hkp22, thanks for your response!

I appreciate the flexibility provided by useSanctumFetch(), but my original request was specifically about global interceptors rather than defining them per request.

In some other Sanctum authentication modules (e.g., nuxt-auth-sanctum by @manchenkoff), it is possible to configure global request/response interceptors in app.config.ts, like this:

export default defineAppConfig({
  sanctum: {
    interceptors: {
      onRequest: async (app, ctx) => {
        ctx.options.headers.set('X-Localization', app.$i18n.localeProperties.value.code);
      },
    },
  },
});

This allows developers to automatically apply custom headers, logging, or request modifications without adding onRequest and onResponse in every useSanctumFetch() call. Example: https://manchenkoff.gitbook.io/nuxt-auth-sanctum/advanced/interceptors

Would you consider adding support for this approach? It would greatly improve developer experience and keep API calls cleaner.

[hkp22]

@Velman04 That's a great suggestion, and I truly appreciate the thoughtful insight. Support for global interceptors in app.config.ts would improve the developer experience and streamline API calls.

I've noted this feature request and will consider it for a future update. At the moment, I have some other priority tasks to handle. However, I'll definitely look into adding this feature once I get free time.

Thanks again for your valuable feedback and support! 🚀

[Velman04]

@qirolab Thanks for your response! 🚀

I really appreciate your consideration of this feature. Since I found it quite useful, I decided to implement it myself.

I have developed and tested the support for global interceptors in app.config.ts, and everything works as expected. You can check out the implementation in my Pull Request:
🔗 PR #9

Let me know if you have any feedback or suggestions! Looking forward to your review. 🚀