Refactor authentication middleware to use native fetch, update dependencies, and enhance error handling. Add new error boundary component for dashboard and improve user verification UI. Update payment handling and device management components for better user experience. Adjust CSS for error backgrounds and refine input read-only components with validation indicators.

middleware.ts

@@ -1,4 +1,3 @@
-import { betterFetch } from "@better-fetch/fetch";
 import type { Session } from "better-auth/types";
 import { type NextRequest, NextResponse } from "next/server";
 
@@ -6,29 +5,28 @@ export default async function authMiddleware(request: NextRequest) {
 	const protocol = request.headers.get("x-forwarded-proto") || "http";
 	const host = request.headers.get("host") || "localhost:3000";
 
-	console.log(protocol)
-	console.log(host)
-
 	try {
-		const { data: session } = await betterFetch<Session>(
-			"http://localhost:3000/api/auth/get-session",
-			{
-				baseURL: `${protocol}://${host}`,
-				headers: {
-					//get the cookie from the request
-					cookie: request.headers.get("cookie") || "",
-					host: host
-				},
-
+		const response = await fetch(`${protocol}://${host}/api/auth/get-session`, {
+			method: "GET",
+			headers: {
+				cookie: request.headers.get("cookie") || "",
+				host: host,
 			},
-		);
+			next: { revalidate: 600 }, // Cache for 10 minutes (600 seconds)
+		});
+
+		if (!response.ok) {
+			throw new Error("Failed to fetch session");
+		}
+
+		const session: Session = await response.json();
 
 		if (!session) {
 			return NextResponse.redirect(new URL("/login", request.url));
 		}
 		return NextResponse.next();
 	} catch (error) {
-		console.log("Middlewaree", error);
+		console.log("Middleware error", error);
 		return NextResponse.redirect(new URL("/login", request.url));
 	}
 }