Fix debuggles

src/app/debug/page.tsx

@@ -1,10 +1,16 @@
 import { Button } from "@/components/ui/button";
 import React from "react";
+import HeadersPrinter from "@/components/debug/headers-printer";
+import { SecureDebugDetails } from "@/components/debug/secure-debug-details";
 
 const DebugPage = () => {
   return (
     <div className="p-8">
       <Button variant="default">I am button</Button>
+      <div className="flex flex-col space-y-2 px-2">
+        <HeadersPrinter />
+        <SecureDebugDetails />
+      </div>
     </div>
   );
 };

src/components/debug/headers-printer.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import React from "react";
+import { headers } from "next/headers";
+import { getRequestHeaders } from "@/lib/helpers/headers";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+
+const HeadersPrinter = () => {
+  const header = headers();
+
+  const request = getRequestHeaders(header);
+  return (
+    <Card>
+      <CardHeader>Request Headers</CardHeader>
+      <CardContent>{request}</CardContent>
+    </Card>
+  );
+};
+export default HeadersPrinter;

src/components/debug/secure-debug-details.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import PrintEnv from "@/components/widgets/print-env";
+import { authOptions } from "@/server/auth";
+import { getServerSession } from "next-auth";
+import { headers } from "next/headers";
+
+export const SecureDebugDetails = async () => {
+  const session = await getServerSession(authOptions);
+  const request = headers();
+  return <PrintEnv session={session} request={request} />;
+};