Improve debug page

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "NODE_ENV=development next dev -p 3002 & local-ssl-proxy --config ./ssl-proxy.json"
+    }
+  ]
+}

src/app/(debug)/debug/page.tsx

@@ -1,10 +1,18 @@
 import { SecureDebugDetails } from "@/components/debug/SecureDebugDetails";
+import React from "react";
+import HeadersPrinter from "@/components/debug/HeadersPrinter";
 
 const DebugPage = async () => {
   return (
-    <div>
-      {/* <SecureDebugDetails /> */}
+    <>
+      <h1 className="hidden text-center text-3xl font-bold leading-tight tracking-tighter md:block md:text-6xl lg:leading-[1.1]">
+        This is what we know
+      </h1>
+      <div className="flex flex-col space-y-2 px-2">
+        <HeadersPrinter />
+        <SecureDebugDetails />
       </div>
+    </>
   );
 };
 export default DebugPage;

src/components/debug/HeadersPrinter.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/SecureDebugDetails.tsx

@@ -7,11 +7,5 @@ import { headers } from "next/headers";
 export const SecureDebugDetails = async () => {
   const session = await getServerSession(authOptions);
   const request = headers();
-  return (
-    <div>
-      <div className="p-6">
-        <PrintEnv session={session} request={request} />
-      </div>
-    </div>
-  );
+  return <PrintEnv session={session} request={request} />;
 };

src/components/widgets/print-env.tsx

@@ -11,7 +11,7 @@ type PrintEnvProps = {
 
 const PrintEnv: React.FC<PrintEnvProps> = ({ session, request }) => {
   return (
-    <div className="flex flex-col space-x-2 space-y-2">
+    <div className="flex flex-col space-y-4">
       {session && (
         <Card>
           <CardHeader>Session</CardHeader>

src/env.js

@@ -1,5 +1,5 @@
-import { createEnv } from "@t3-oss/env-nextjs";
-import { z } from "zod";
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
 
 export const env = createEnv({
   /**
@@ -11,14 +11,14 @@ export const env = createEnv({
       .string()
       .url()
       .refine(
-        (str) => !str.includes("YOUR_PG_URL_HERE"),
-        "You forgot to change the default URL",
+        (str) => !str.includes('YOUR_PG_URL_HERE'),
+        'You forgot to change the default URL',
       ),
     NODE_ENV: z
-      .enum(["development", "test", "production"])
-      .default("development"),
+      .enum(['development', 'test', 'production'])
+      .default('development'),
     NEXTAUTH_SECRET:
-      process.env.NODE_ENV === "production"
+      process.env.NODE_ENV === 'production'
         ? z.string()
         : z.string().optional(),
     NEXTAUTH_URL: z.preprocess(
@@ -30,6 +30,7 @@ export const env = createEnv({
     ),
     GOOGLE_CLIENT_ID: z.string(),
     GOOGLE_CLIENT_SECRET: z.string(),
+    ALLOWED_DEBUG_IP: z.string().optional(),
   },
 
   /**
@@ -52,6 +53,7 @@ export const env = createEnv({
     NEXTAUTH_URL: process.env.NEXTAUTH_URL,
     GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
     GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
+    ALLOWED_DEBUG_IP: process.env.ALLOWED_DEBUG_IP,
   },
   /**
    * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially

src/lib/helpers/headers.tsx

@@ -0,0 +1,16 @@
+import { type ReadonlyHeaders } from "next/dist/server/web/spec-extension/adapters/headers";
+import { type ReactElement } from "react";
+
+export const getRequestHeaders = (headers: ReadonlyHeaders) => {
+  const result: ReactElement[] = [];
+
+  for (const pair of headers.entries()) {
+    result.push(
+      <div>
+        {pair[0]}: {pair[1]}
+      </div>,
+    );
+  }
+
+  return result;
+};