Add rate limiter to middleware example (#188)

Author: simon-johansson

README.md

@@ -38,7 +38,7 @@ E.g. `encore app create my-app --example=ts/hello-world`
 | [ts/hello-world](ts/hello-world)                                 | REST API Starter                                                                                                         | APIs                                                                   |
 | [ts/ai-chat](ts/ai-chat)                                         | LLM chat application which let's you create and chat with personalized bots. Integrates with OpenAI, Anthropic and Slack | Microservices, APIs, SQL Database, Pub/Sub, External Requests, Configs |
 | [ts/streaming](ts/streaming)                                     | Examples of the different WebSocket Streaming APIs                                                                       | Streaming API, Static Endpoint, Frontend                               |
-| [ts/react-starter](ts/react-starter)                             | Encore + React Web App Starter                                                                                           | APIs, Frontend                                          |
+| [ts/react-starter](ts/react-starter)                             | Encore + React Web App Starter                                                                                           | APIs, Frontend                                                         |
 | [ts/nextjs-starter](ts/nextjs-starter)                           | Encore + Next.js Web App Starter                                                                                         | Microservices, APIs, Frontend                                          |
 | [https://github.com/encoredev/nextjs-starter/](nextjs-starter) † | Encore + Next.js Web App Starter (separate dependencies)                                                                 | Microservices, APIs, Frontend                                          |
 | [ts/graphql](ts/graphql)                                         | Apollo GraphQL Server Starter                                                                                            | APIs, GraphQL                                                          |
@@ -60,6 +60,7 @@ E.g. `encore app create my-app --example=ts/hello-world`
 | [ts/expressjs-migration](ts/expressjs-migration)                 | Express.js migration guide examples                                                                                      | APIs, Raw Endpoints, Auth, Databases                                   |
 | [ts/file-upload](ts/file-upload)                                 | Upload files from frontend example                                                                                       | Raw Endpoints                                                          |
 | [ts/static-files](ts/static-files)                               | Serving static files example                                                                                             | Static Endpoints                                                       |
+| [ts/middleware](ts/middleware)                                   | Rate limiting and Authorization middleware examples                                                                      | APIs, Auth, Middleware                                                           |
 | [ts/template-engine](ts/template-engine)                         | Using a templating engine                                                                                                | Raw Endpoints, Static Endpoints                                        |
 
 ### Go starters

ts/middleware-demo/user/encore.service.ts

@@ -0,0 +1,6 @@
+.encore
+encore.gen.go
+encore.gen.cue
+/.encore
+node_modules
+/encore.gen

ts/middleware/.gitignore

@@ -1,8 +1,12 @@
-# Middleware Demo
+# Middleware in Encore.ts
 
-This is the code example used in the middleware demo [stream](https://www.youtube.com/watch?v=qInxenZVDJs). It demonstrates how to implement a simple authorization middleware that only allows users to update themselves while still being able to view other users in the system.
+This examples contains two middleware examples: rate limiting and authorization. The rate limiting middleware limits the number of requests a user can make to auth endpoints and the authorization middleware only allows users to update themselves while still being able to view other users in the system. 
 
-All endpoints require authentication, pass the string `userid:1` in the authorization header to login as user with id 1. Replace 1 with any number.
+Video tutorial of implementing the authorization middleware: https://www.youtube.com/watch?v=qInxenZVDJs
+
+All endpoints require authentication, pass the string `userid:1` in the authorization header to login as user with id 1. Replace 1 with any number. Try making two request within 5 seconds to see the rate limiting middleware in action.
+
+Both middleware are defined in the `encore.service.ts` file.
 
 **Endpoints:**
 
@@ -12,7 +16,6 @@ All endpoints require authentication, pass the string `userid:1` in the authoriz
 - `/users/:id` (PUT) - Update user by id
 - `/users/:id` (DELETE) - delete user by id
 
-
 ## Developing locally
 
 ### Prerequisite: Installing Encore
@@ -27,7 +30,7 @@ environment. Use the appropriate command for your system:
 When you have installed Encore, run:
 
 ```bash
-encore app create --example=ts/middleware-demo
+encore app create --example=ts/middleware
 ```
 
 ## Running locally
@@ -44,6 +47,12 @@ You can also access Encore's [local developer dashboard](https://encore.dev/docs
 
 ## Deployment
 
+### Self-hosting
+
+See the [self-hosting instructions](https://encore.dev/docs/ts/self-host/build) for how to use `encore build docker` to create a Docker image and configure it.
+
+### Encore Cloud Platform
+
 Deploy your application to a staging environment in Encore's free development cloud:
 
 ```bash
@@ -57,10 +66,3 @@ Then head over to the [Cloud Dashboard](https://app.encore.dev) to monitor your
 From there you can also connect your own AWS or GCP account to use for deployment.
 
 Now off you go into the clouds!
-
-## Testing
-
-```bash
-encore test
-```
-

ts/middleware-demo/README.md renamed to ts/middleware/README.md

@@ -14,7 +14,8 @@
     "vitest": "^1.5.0"
   },
   "dependencies": {
-    "encore.dev": "^1.44.10"
+    "encore.dev": "^1.44.10",
+    "rate-limiter-flexible": "^5.0.4"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.13.0"

ts/middleware-demo/encore.app renamed to ts/middleware/encore.app

@@ -0,0 +1,81 @@
+import { APICallMeta } from "encore.dev";
+import { APIError, middleware } from "encore.dev/api";
+import { Service } from "encore.dev/service";
+import { RateLimiterMemory } from "rate-limiter-flexible";
+import { getAuthData } from "~encore/auth";
+
+const opts = {
+  points: 1,
+  duration: 5, // per second
+};
+
+const rateLimiter = new RateLimiterMemory(opts);
+
+// Rate limiting middleware.
+const rateLimiterMiddleware = middleware(
+  // Should be applied to all endpoints that require authentication.
+  { target: { auth: true } },
+  async (req, next) => {
+    const userID = getAuthData()!.userID;
+
+    return rateLimiter
+      .consume(userID)
+      .then(async (rateLimiterRes) => {
+        const res = await next(req);
+
+        res.header.set(
+          "Retry-After",
+          (rateLimiterRes.msBeforeNext / 1000).toString(),
+        );
+        res.header.set("X-RateLimit-Limit", opts.points.toString());
+        res.header.set(
+          "X-RateLimit-Remaining",
+          rateLimiterRes.remainingPoints.toString(),
+        );
+        res.header.set(
+          "X-RateLimit-Reset",
+          new Date(Date.now() + rateLimiterRes.msBeforeNext).toISOString(),
+        );
+
+        return res;
+      })
+      .catch((e) => {
+        if (e instanceof APIError) throw e;
+        throw APIError.resourceExhausted("Too Many Requests");
+      });
+  },
+);
+
+// Authorization middleware that only allows users to make modifications on themselves.
+const permissionMiddleware = middleware(
+  { target: { auth: true } },
+  async (req, next) => {
+    const apiCallMeta = req.requestMeta as APICallMeta;
+
+    // check if this is a modifying request (PUT, POST, DELETE etc)
+    if (apiCallMeta.method === "GET") {
+      return await next(req);
+    }
+
+    // check if this is an endpoint with a id in its path params (e.g /users/:id)
+    if (apiCallMeta.pathParams.id === undefined) {
+      return await next(req);
+    }
+
+    const authedUser = getAuthData()!;
+
+    // check if the logged in user is the same as the user being modified.
+    if (authedUser.userID != apiCallMeta.pathParams.id) {
+      throw APIError.permissionDenied(
+        `user ${authedUser.userID} is not permitted to modify user ${apiCallMeta.pathParams.id}`,
+      );
+    }
+
+    // run the handler
+    return await next(req);
+  },
+);
+
+export default new Service("user", {
+  middlewares: [rateLimiterMiddleware, permissionMiddleware],
+});