Guide to use Rate limiter with NuxtHub

[fayazara]

Is your feature request related to a problem? Please describe.

The current documentation doesn't cover how to properly integrate the rate limiter middleware with NuxtHub's KV storage when deploying to Cloudflare Workers. The default LRU cache driver doesn't work in a stateless environment like Cloudflare Workers, and while the rate limiter supports custom drivers including cloudflare-kv-binding, there's no clear guidance on how to properly configure it with NuxtHub's KV binding.

Describe the solution you'd like

A documentation section or guide that explains:

1. How to configure the rate limiter to work with NuxtHub's KV storage
2. Best practices for using the rate limiter in a Cloudflare Workers environment
3. Example configuration showing the proper integration between nuxt-security's rate limiter and NuxtHub's KV binding

Describe alternatives you've considered

Attempted to use the cloudflare-kv-binding driver directly in the nuxt.config.ts:

routeRules: {
  '/api/**': {
    security: {
      rateLimiter: {
        tokensPerInterval: 50,
        interval: 10000,
        headers: true,
        driver: {
          name: 'cloudflare-kv-binding',
          options: {
            binding: 'KV'
          }
        },
      },
    },
  },
}

However, this configuration doesn't work.

Additional context - TLDR

Using:

• nuxt-security for rate limiting
• @nuxthub/core with KV enabled (hub: { kv: true })
• Deploying to Cloudflare Workers
• Need a stateless-compatible rate limiting solution

[Baroshem]

Hey Buddy,

Thanks for asking this question.

I wonder, if you are already using Cloudflare, do they not provide already a rate limiting solution for their services? The built in rate limiting is suitable mainly for the simple use cases while for more advanced scenarios a better solution would be to use external rate limiting services.

Also, this issue could be helpful -> #372 (comment)

Based on it, could you try cloudflareKvBinding instead of cloudflare-kv-binding?

[GreenmeisterDavid]

I have the ratelimiter setup on NuxtHub also, enabled globally.

nuxt.config.ts;

 security: {
        rateLimiter: {
            tokensPerInterval: 25, // Allows 25 requests within the interval
            interval: 60000, // 1-minute window
            driver: {
                name: 'cloudflare-kv-binding',
                options: {
                    binding: 'KV',
                },
            },
            headers: true
        },

This does work - in the headers I can see the limit decreasing and entries appear in my NuxtHub KV. But it seems that it logs everything to the same IP (maybe cloudlfare's IP?) - shouldn't it be IP-specific?

I misconfigured a reverse proxy on my end, it actually works fine on NuxtHub/CloudFlare out of the box with the above setup. Make sure to configure the driver in the main security-config, instead of on route-level.

[Baroshem]

Thanks for sharing your code sample @GreenmeisterDavid

Regarding the logging of one IP only, I think it could be related to the fact that there is not x-forwarded-for functionality available in h3 yet unjs/h3#504

[GreenmeisterDavid]

Thanks for sharing your code sample @GreenmeisterDavid

Regarding the logging of one IP only, I think it could be related to the fact that there is not x-forwarded-for functionality available in h3 yet unjs/h3#504

Apologies, I just tested it on another project and it actually works fine on Nuxthub/Cloudflare out of the box with the Cloudflare KV driver - I got the wrong IP before because of a misconfiguration with another layer of proxying on my end.

@fayazara, can you try with setting the driver in the global options for the security module, like;

export default defineNuxtConfig({
    ...
    security: {
        rateLimiter: {
            driver: {
                name: 'cloudflareKVBinding',
                options: {
                    binding: 'KV',
                },
            },
        },
    },
    routeRules: {
        '/api/**': {
            security: {
                rateLimiter: {
                    tokensPerInterval: 50,
                    interval: 10000,
                    headers: true,
                },
            },
        },
    },
    ...
});

I tried both cloudflareKVBinding and cloudflare-kv-binding - both work for me.