From 1ea22df2f7ccd837a059bd8d31529fa981835d0e Mon Sep 17 00:00:00 2001
From: Hardik <shardik99@gmail.com>
Date: Fri, 22 May 2026 17:14:21 +0530
Subject: [PATCH] fix(auth): stabilize login page rendering

---
 App/app/(auth)/login/login-form.tsx | 91 ++++++++++++++++++++++++++++
 App/app/(auth)/login/page.tsx       | 94 +++--------------------------
 App/auth.ts                         |  1 +
 3 files changed, 100 insertions(+), 86 deletions(-)
 create mode 100644 App/app/(auth)/login/login-form.tsx

diff --git a/App/app/(auth)/login/login-form.tsx b/App/app/(auth)/login/login-form.tsx
new file mode 100644
index 0000000..cfea2b5
--- /dev/null
+++ b/App/app/(auth)/login/login-form.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useState } from "react";
+import { signIn } from "next-auth/react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+export function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    const result = await signIn("credentials", {
+      email,
+      password,
+      redirect: false,
+    });
+
+    if (result?.error) {
+      setError("Invalid email or password. Please try again.");
+      setLoading(false);
+    } else {
+      router.push(callbackUrl);
+      router.refresh();
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label
+          htmlFor="email"
+          className="block text-sm font-medium text-neutral-700 mb-1.5"
+        >
+          Email address
+        </label>
+        <input
+          id="email"
+          type="email"
+          autoComplete="email"
+          required
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          className="w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+          placeholder="you@company.com"
+        />
+      </div>
+
+      <div>
+        <label
+          htmlFor="password"
+          className="block text-sm font-medium text-neutral-700 mb-1.5"
+        >
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          autoComplete="current-password"
+          required
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+          placeholder="••••••••"
+        />
+      </div>
+
+      {error && (
+        <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={loading}
+        className="w-full rounded-lg bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
+      >
+        {loading ? "Signing in…" : "Sign in"}
+      </button>
+    </form>
+  );
+}
diff --git a/App/app/(auth)/login/page.tsx b/App/app/(auth)/login/page.tsx
index 125ece0..657422c 100644
--- a/App/app/(auth)/login/page.tsx
+++ b/App/app/(auth)/login/page.tsx
@@ -1,39 +1,11 @@
-"use client";
-
-import { useState } from "react";
-import { signIn } from "next-auth/react";
-import { useRouter, useSearchParams } from "next/navigation";
+import { Suspense } from "react";
 import { Anchor } from "lucide-react";
+import { LoginForm } from "./login-form";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = { title: "Sign in" };
 
 export default function LoginPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
-  const [loading, setLoading] = useState(false);
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const callbackUrl = searchParams.get("callbackUrl") ?? "/dashboard";
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setLoading(true);
-    setError("");
-
-    const result = await signIn("credentials", {
-      email,
-      password,
-      redirect: false,
-    });
-
-    if (result?.error) {
-      setError("Invalid email or password. Please try again.");
-      setLoading(false);
-    } else {
-      router.push(callbackUrl);
-      router.refresh();
-    }
-  }
-
   return (
     <div className="min-h-screen bg-neutral-50 flex items-center justify-center p-4">
       <div className="w-full max-w-sm">
@@ -51,59 +23,9 @@ export default function LoginPage() {
 
           <h2 className="text-xl font-semibold text-neutral-900 mb-6">Sign in</h2>
 
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label
-                htmlFor="email"
-                className="block text-sm font-medium text-neutral-700 mb-1.5"
-              >
-                Email address
-              </label>
-              <input
-                id="email"
-                type="email"
-                autoComplete="email"
-                required
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                className="w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
-                placeholder="you@company.com"
-              />
-            </div>
-
-            <div>
-              <label
-                htmlFor="password"
-                className="block text-sm font-medium text-neutral-700 mb-1.5"
-              >
-                Password
-              </label>
-              <input
-                id="password"
-                type="password"
-                autoComplete="current-password"
-                required
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                className="w-full rounded-lg border border-neutral-300 px-3 py-2.5 text-sm text-neutral-900 placeholder:text-neutral-400 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
-                placeholder="••••••••"
-              />
-            </div>
-
-            {error && (
-              <p className="text-sm text-danger-700 bg-danger-50 rounded-lg px-3 py-2">
-                {error}
-              </p>
-            )}
-
-            <button
-              type="submit"
-              disabled={loading}
-              className="w-full rounded-lg bg-primary-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
-            >
-              {loading ? "Signing in…" : "Sign in"}
-            </button>
-          </form>
+          <Suspense>
+            <LoginForm />
+          </Suspense>
         </div>
 
         <p className="mt-4 text-center text-xs text-neutral-400">
diff --git a/App/auth.ts b/App/auth.ts
index 7170e34..5c77f56 100644
--- a/App/auth.ts
+++ b/App/auth.ts
@@ -6,6 +6,7 @@ import { loginSchema } from "@/lib/validations/user";
 import type { Role } from "@prisma/client";
 
 export const { handlers, auth, signIn, signOut } = NextAuth({
+  trustHost: true,
   session: { strategy: "jwt" },
   pages: {
     signIn: "/login",