From 767471f2bb649e3f6517b405720601de7099a87c Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Thu, 12 Dec 2024 23:49:52 +0100
Subject: [PATCH] add headers and middleware

---
 composables/useGreeting.ts   |  4 ++++
 pages/index.vue              |  4 +---
 plugins/client.ts            |  8 ++++++++
 server/trpc/context.ts       | 15 ++++++++++++++-
 server/trpc/routers/index.ts |  7 +++++--
 server/trpc/trpc.ts          | 14 ++++++++++++++
 6 files changed, 46 insertions(+), 6 deletions(-)
 create mode 100644 composables/useGreeting.ts

diff --git a/composables/useGreeting.ts b/composables/useGreeting.ts
new file mode 100644
index 0000000..f15c9c2
--- /dev/null
+++ b/composables/useGreeting.ts
@@ -0,0 +1,4 @@
+export default function useGreeting(text: string) {
+  const { $client } = useNuxtApp();
+  return $client.hello.useQuery({ text });
+}
diff --git a/pages/index.vue b/pages/index.vue
index d69696d..4691f6e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-const { $client } = useNuxtApp();
-
-const { data } = await $client.hello.useQuery({ text: "chef" });
+const { data } = useGreeting("chef");
 </script>
 
 <template>
diff --git a/plugins/client.ts b/plugins/client.ts
index 4ff7015..ec32bb1 100644
--- a/plugins/client.ts
+++ b/plugins/client.ts
@@ -2,6 +2,7 @@ import { createTRPCNuxtClient, httpBatchLink } from "trpc-nuxt/client";
 import type { AppRouter } from "~/server/trpc/routers";
 
 export default defineNuxtPlugin(() => {
+  const headers = useRequestHeaders();
   /**
    * createTRPCNuxtClient adds a `useQuery` composable
    * built on top of `useAsyncData`.
@@ -10,6 +11,13 @@ export default defineNuxtPlugin(() => {
     links: [
       httpBatchLink({
         url: "/api/trpc",
+        headers() {
+          // add custom headers here
+          return {
+            Authorization: "Bearer token",
+            ...headers,
+          };
+        },
       }),
     ],
   });
diff --git a/server/trpc/context.ts b/server/trpc/context.ts
index a143234..44dfea8 100644
--- a/server/trpc/context.ts
+++ b/server/trpc/context.ts
@@ -4,6 +4,19 @@ import type { inferAsyncReturnType } from "@trpc/server";
  * Creates context for an incoming request
  * @link https://trpc.io/docs/context
  */
-export const createContext = () => ({});
+export async function createContext(event: H3Event) {
+  const authorization = getRequestHeader(event, "authorization");
+  async function getUserFromHeader() {
+    if (authorization) {
+      console.log("authorization:", authorization);
+      return { isAdmin: true };
+    }
+    return null;
+  }
+  const user = await getUserFromHeader();
+  return {
+    user,
+  };
+}
 
 export type Context = inferAsyncReturnType<typeof createContext>;
diff --git a/server/trpc/routers/index.ts b/server/trpc/routers/index.ts
index f68f912..32a4473 100644
--- a/server/trpc/routers/index.ts
+++ b/server/trpc/routers/index.ts
@@ -1,8 +1,10 @@
+import type { inferRouterOutputs } from "@trpc/server";
 import { z } from "zod";
-import { publicProcedure, router } from "../trpc";
+import { publicProcedure, privateProcedure, router } from "../trpc";
 
 export const appRouter = router({
-  hello: publicProcedure
+  // hello: publicProcedure
+  hello: privateProcedure
     .input(
       z.object({
         text: z.string().nullish(),
@@ -17,3 +19,4 @@ export const appRouter = router({
 
 // export type definition of API
 export type AppRouter = typeof appRouter;
+export type RouterOutput = inferRouterOutputs<AppRouter>;
diff --git a/server/trpc/trpc.ts b/server/trpc/trpc.ts
index 314ec1a..c7cf93a 100644
--- a/server/trpc/trpc.ts
+++ b/server/trpc/trpc.ts
@@ -1,5 +1,7 @@
 import { initTRPC } from "@trpc/server";
 import type { Context } from "~/server/trpc/context";
+import { TRPCError } from "@trpc/server";
+// import { authMiddleware } from "~/server/trpc/middleware";
 
 const t = initTRPC.context<Context>().create();
 
@@ -9,3 +11,15 @@ const t = initTRPC.context<Context>().create();
 export const publicProcedure = t.procedure;
 export const router = t.router;
 export const middleware = t.middleware;
+
+export const authMiddleware = middleware(({ next, ctx }) => {
+  if (!ctx.user?.isAdmin) {
+    throw new TRPCError({ code: "UNAUTHORIZED" });
+  }
+  return next({
+    ctx: {
+      user: ctx.user,
+    },
+  });
+});
+export const privateProcedure = t.procedure.use(authMiddleware);