feat/api middleware

app/lib/middleware.ts

@@ -0,0 +1,46 @@
+import {
+  unstable_createContext,
+  type unstable_MiddlewareFunction,
+} from "react-router";
+import { getUserFromJwt } from "./jwt";
+import { type User } from "~/schema";
+
+/**
+ * Adds JSON response headers to a request
+ */
+export const jsonResponseHeaders: unstable_MiddlewareFunction<
+  Response
+> = async (args, next) => {
+  const response = await next();
+  response.headers.set("Content-Type", "application/json; charset=utf-8");
+  return response;
+};
+
+/**
+ * Context for routes that need authorization/ authentication
+ */
+export const authContext = unstable_createContext<User>();
+
+/**
+ * Checks a request for authentication/ authorization
+ * via jwt and sets the {@link authContext}
+ * to contain the user object
+ */
+export const jwtAuth: unstable_MiddlewareFunction<Response> = async ({
+  request,
+  context,
+}) => {
+  const jwtResponse = await getUserFromJwt(request);
+  if (typeof jwtResponse === "string")
+    return Response.json(
+      {
+        code: "Forbidden",
+        message: "Invalid JWT authorization. Please sign in to obtain new JWT.",
+      },
+      {
+        status: 403,
+      },
+    );
+
+  context.set(authContext, jwtResponse);
+};

app/routes/api.stats.ts

@@ -1,4 +1,8 @@
-import { type LoaderFunctionArgs } from "react-router";
+import {
+  type unstable_MiddlewareFunction,
+  type LoaderFunctionArgs,
+} from "react-router";
+import { jsonResponseHeaders } from "~/lib/middleware";
 import { getStatistics } from "~/lib/statistics-service.server";
 
 export async function loader({ request }: LoaderFunctionArgs) {
@@ -20,9 +24,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
         },
         {
           status: 400,
-          headers: {
-            "Content-Type": "application/json; charset=utf-8",
-          },
         },
       );
 
@@ -31,9 +32,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
     const stats = await getStatistics(humanReadable);
     return Response.json(stats, {
       status: 200,
-      headers: {
-        "Content-Type": "application/json; charset=utf-8",
-      },
     });
   } catch (e) {
     console.warn(e);
@@ -45,10 +43,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
       },
       {
         status: 500,
-        headers: {
-          "Content-Type": "application/json; charset=utf-8",
-        },
       },
     );
   }
 }
+
+export const unstable_middleware: unstable_MiddlewareFunction<Response>[] = [
+  jsonResponseHeaders,
+];

app/routes/api.users.me.boxes.ts

@@ -1,26 +1,12 @@
-import { type LoaderFunction, type LoaderFunctionArgs } from "react-router";
-import { getUserFromJwt } from "~/lib/jwt";
+import { type unstable_MiddlewareFunction } from "react-router";
+import { type Route } from "./+types/api.users.me.boxes";
+import { authContext, jsonResponseHeaders, jwtAuth } from "~/lib/middleware";
 import { getUserDevices } from "~/models/device.server";
 
-export const loader: LoaderFunction = async ({
-  request,
-}: LoaderFunctionArgs) => {
+export const loader = async ({ context }: Route.LoaderArgs) => {
   try {
-    const jwtResponse = await getUserFromJwt(request);
-
-    if (typeof jwtResponse === "string")
-      return Response.json(
-        {
-          code: "Forbidden",
-          message:
-            "Invalid JWT authorization. Please sign in to obtain new JWT.",
-        },
-        {
-          status: 403,
-        },
-      );
-
-    const userBoxes = await getUserDevices(jwtResponse.id);
+    const user = context.get(authContext);
+    const userBoxes = await getUserDevices(user.id);
 
     return Response.json(
       {
@@ -33,7 +19,6 @@ export const loader: LoaderFunction = async ({
       },
       {
         status: 200,
-        headers: { "Content-Type": "application/json; charset=utf-8" },
       },
     );
   } catch (err) {
@@ -50,3 +35,8 @@ export const loader: LoaderFunction = async ({
     );
   }
 };
+
+export const unstable_middleware: unstable_MiddlewareFunction<Response>[] = [
+  jsonResponseHeaders,
+  jwtAuth,
+];

app/routes/api.users.ts

@@ -133,7 +133,7 @@ const DEFAULT_LANGUAGE: "de_DE" | "en_US" = "en_US";
  *             schema:
  *               type: string
  *               example: "Internal Server Error"
- * 
+ *
  * components:
  *   schemas:
  *     User: