fix: get access token from headers

app/[lang]/webview/test/page.tsx

@@ -1,14 +1,21 @@
+import { cookies, headers } from "next/headers"
+
+import { serverClient } from "@/lib/trpc/server"
+
 import type { Metadata } from "next"
 
 export const metadata: Metadata = {
   title: "Hello World from Webview",
 }
 
-export default function WebViewTestPage() {
+export default async function WebViewTestPage() {
+  const data = await serverClient().user.get()
+
   return (
     <main>
       <header>
         <h1>Hello From WebView Test Page!</h1>
+        <p>{data.firstName}</p>
       </header>
     </main>
   )

middlewares/webView.ts

@@ -37,12 +37,13 @@ export const middleware: NextMiddleware = async (request) => {
       authorization
     )
 
-    // Pass the webview token via cookie to the page
-    return NextResponse.next({
-      headers: {
-        "Set-Cookie": `webviewToken=${decryptedData}; Secure; HttpOnly;`,
-      },
+    const response = NextResponse.next()
+    response.cookies.set("webviewToken", decryptedData, {
+      httpOnly: true,
+      secure: true,
     })
+
+    return response
   } catch (e) {
     if (e instanceof Error) {
       console.error(`${e.name}: ${e.message}`)

server/trpc.ts

@@ -29,8 +29,7 @@ export const contentstackProcedure = t.procedure.use(async function (opts) {
 })
 export const protectedProcedure = t.procedure.use(async function (opts) {
   const authRequired = opts.meta?.authRequired ?? true
-  const session = await opts.ctx.auth()
-
+  const session = await (await opts.ctx).session
   if (!authRequired && env.NODE_ENV === "development") {
     console.info(
       `❌❌❌❌ You are opting out of authorization, if its done on purpose maybe you should use the publicProcedure instead. ❌❌❌❌`