Integrate @upstash/ratelimit into Astro

Prerequisites

• Add @upstash/ratelimit and @upstash/redis
• Enable SSR mode, setting output key to server or hybrid in your Astro config file

Code

import { Redis } from '@upstash/redis'
import { Ratelimit } from '@upstash/ratelimit'

const redis = Redis.fromEnv();

export const ratelimit = {
  ip: new Ratelimit({
    redis,
    limiter: Ratelimit.slidingWindow(10, '30 s'),
    ephemeralCache: new Map(),
    analytics: true
  })
}

export const checkIpRateLimit = async (ip: string) => {
  const key = `ip:${ip}`
  const { success } = await ratelimit.ip.limit(key)
  return success
}

import { defineMiddleware } from "astro:middleware"

export const onRequest = defineMiddleware(async (context, next) => {
  const { request } = context
  const pathname = new URL(request.url).pathname

  if (pathname.startsWith("/api")) {
    const { clientAddress } = context
    const { checkIpRateLimit } = await import("~lib/redis")
    const success = await checkIpRateLimit(clientAddress)

    if (!success) {
      return new Response(
        JSON.stringify({
          error: "Rate limit exceeded"
        }),
        { status: 429 }
      )
    }
  }

  return next()
})

Enviroments

To use the ratelimit feature, we must set the UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN environment variables.

• To check if ratelimit works, create an .env.local file locally.
• For it to work in production, add these variables to your hosting platform, like Cloudflare Pages.

Conclusions

If you spot any mistakes in the article, or if you have any questions, don’t hesitate to drop me a message on Twitter.

I’m working on polishing my English writing. I’d be thankful if you could spot any parts that don’t quite match a native speaker’s touch. Just like this sentence.

Let’s stay connected.