add headers and middleware

composables/useGreeting.ts

@@ -0,0 +1,4 @@
+export default function useGreeting(text: string) {
+  const { $client } = useNuxtApp();
+  return $client.hello.useQuery({ text });
+}

pages/index.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-const { $client } = useNuxtApp();
+const { data } = useGreeting("chef");
-
-const { data } = await $client.hello.useQuery({ text: "chef" });
 </script>
 
 <template>

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,
+          };
+        },
       }),
     ],
   });

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>;

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>;

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);