Merge pull request #110 from upstash/DX-960

Add enable-protection example

Author: CahidArda

Diff for: examples/cloudflare-workers/README.md

@@ -1,7 +1,13 @@
 
 ## Local Development
 
-For testing the app locally, set the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` environment variables after creating an Upstash Redis.
+For testing the app locally, start by creating an Upstash Redis. Next, create the `.dev.vars` file under `cloudflare-workers` directory and set the `UPSTASH_REDIS_REST_URL` and `UPSTASH_REDIS_REST_TOKEN` environment variables:
+
+```
+// .dev.vars
+UPSTASH_REDIS_REST_URL="****"
+UPSTASH_REDIS_REST_TOKEN="****"
+```
 
 Then, simply run:
 

Diff for: examples/enable-protection/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

Diff for: examples/enable-protection/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

Diff for: examples/enable-protection/README.md

@@ -0,0 +1,45 @@
+# Using deny list by enabling protection
+
+To use enable list, simply set the `enableProtection` parameter to true when
+initializing the Upstash Redis client.
+
+```tsx
+const ratelimit = new Ratelimit({
+  redis: Redis.fromEnv(),
+  limiter: Ratelimit.slidingWindow(10, "10 s"),
+  prefix: "@upstash/ratelimit",
+  analytics: true,
+  enableProtection: true
+});
+```
+
+When this parameter is enabled, redis client will check the identifier and
+other parameters against a dent list managed through [Ratelimit Dashboard](https://console.upstash.com/ratelimit).
+
+When analytics is set to true, requests blocked with the deny list are
+logged under Denied and shown in the dashboard.
+
+In addition to passing an identifier, you can pass IP address, user agent
+and country in the `limit` method. If any of these values is in the deny
+list, the request will be denied.
+
+```tsx
+const { success, limit, remaining, pending, reason } = await ratelimit.limit(
+  identifier, {
+    ip: ipAddress,
+    userAgent: userAgent,
+    country: country
+  }
+);
+```
+
+With this change, we also introduce the reason parameter, which denotes
+whether a request passed with timeout or rejected with caching or deny list.
+
+# Running the example locally
+
+To run the example, simply create a Redis instance from Upstash
+console and save the URL and the token to this directory under a
+`.env` file.
+
+Then run `npm run dev`.

Diff for: examples/enable-protection/app/api/route.ts

@@ -0,0 +1,38 @@
+export const runtime = 'edge';
+
+export const dynamic = 'force-dynamic';
+
+import { waitUntil } from '@vercel/functions';
+import { Ratelimit } from "@upstash/ratelimit";
+import { Redis } from "@upstash/redis";
+
+// Create a new ratelimiter
+const ratelimit = new Ratelimit({
+  redis: Redis.fromEnv(),
+  limiter: Ratelimit.slidingWindow(10, "10 s"),
+  prefix: "@upstash/ratelimit",
+  analytics: true,
+  enableProtection: true
+});
+
+export async function POST(request: Request) {
+
+  const content = await request.json()
+  
+  const { success, limit, remaining, pending, reason } = await ratelimit.limit(
+    content, {ip: "10"});
+  const response = {
+    success: success,
+    limit: limit, 
+    remaining: remaining
+  }
+  console.log(success, reason)
+
+  // pending is a promise for handling the analytics submission
+  waitUntil(pending)
+    
+  if (!success) {
+    return new Response(JSON.stringify(response), { status: 429 });
+  }
+  return new Response(JSON.stringify(response));
+}

Diff for: examples/enable-protection/app/favicon.ico

@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 249,250,250;
+  --background-end-rgb: 236,238,238;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}

Diff for: examples/enable-protection/app/globals.css

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

Diff for: examples/enable-protection/app/layout.tsx

@@ -0,0 +1,69 @@
+"use client";
+import React, { useState } from "react";
+
+export default function Home() {
+  const [status, setStatus] = useState({
+    success: true,
+    limit: 10,
+    remaining: 10
+  });
+  const [message, setMessage] = useState("");
+  const [identifier, setIdentifier] = useState("userId");
+
+  const handleClick = async () => {
+    try {
+      const response = await fetch(`/api`, {body: JSON.stringify(identifier), method: "POST"});
+      const data = await response.text();
+      setStatus(JSON.parse(data));
+    } catch (error) {
+      console.error("Error fetching data:", error);
+      setStatus({
+        success: false,
+        limit: -1,
+        remaining: -1
+      });
+      setMessage(`Error fetching data. Make sure that env variables are set as explained in the README file.`,)
+    }
+  };
+  const handleFormSubmit = (identifier: string) => {
+    console.log('Form submitted with identifier:', identifier);
+    // Add your logic to handle the form submission
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="absolute top-1/3 text-center">
+        <p className="text-lg">This app is an example of rate limiting an API on Vercel Edge.</p>
+        <p className="text-lg">Click the button below to call the API and get the rate limit status.</p>
+        <p className="text-lg pt-5">{message}</p>
+      </div>
+
+      <div className="absolute top-1/2 grid grid-cols-3 gap-8 justify-center transform -translate-y-1/2">
+        {Object.entries(status).map(([key, value]) => (
+          <div key={key} className="text-center">
+            <div className="font-semibold">{key}</div>
+            <div>{JSON.stringify(value)}</div>
+          </div>
+        ))}
+      </div>
+      <div className="absolute bottom-1/3 flex flex-row gap-10 items-center">
+        <form
+          className="flex flex-row gap-3"
+          onSubmit={() => {handleFormSubmit(identifier)}}
+        >
+          <label>
+            Identifier:
+            <input
+              type="text"
+              value={identifier}
+              onChange={(e) => setIdentifier(e.target.value)}
+            />
+          </label>
+        </form>
+        <button onClick={handleClick} className="bg-[#dee2e3] hover:bg-[#9aa6a9] transition border-black text-[#5a6769] font-semibold py-2 px-4 rounded-lg">
+          Test Rate Limit
+        </button>
+      </div>
+    </div>
+  );
+}

Diff for: examples/enable-protection/app/page.tsx

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

Diff for: examples/enable-protection/next.config.mjs

@@ -0,0 +1,28 @@
+{
+  "name": "vercel-edge",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@upstash/ratelimit": "^1.2.0-canary",
+    "@vercel/functions": "^1.0.2",
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

Diff for: examples/enable-protection/package.json

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

Diff for: examples/enable-protection/postcss.config.mjs

@@ -0,0 +1,20 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

Diff for: examples/enable-protection/public/next.svg

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}