auth: simplify admin login for local development

apps/web/src/components/sign-in-form.tsx

@@ -2,7 +2,7 @@ import { Button } from "@minmon/ui/components/button";
 import { Input } from "@minmon/ui/components/input";
 import { Label } from "@minmon/ui/components/label";
 import { useForm } from "@tanstack/react-form";
-import { useNavigate } from "@tanstack/react-router";
+import { Link, useNavigate } from "@tanstack/react-router";
 import { toast } from "sonner";
 import z from "zod";
 
@@ -10,7 +10,7 @@ import { authClient } from "@/lib/auth-client";
 
 import Loader from "./loader";
 
-export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: () => void }) {
+export default function SignInForm() {
   const navigate = useNavigate({
     from: "/",
   });
@@ -53,8 +53,14 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
   }
 
   return (
-    <div className="mx-auto w-full mt-10 max-w-md p-6">
+    <div className="mx-auto mt-10 grid w-full max-w-md gap-6 border bg-card p-6">
-      <h1 className="mb-6 text-center text-3xl font-bold">Welcome Back</h1>
+      <div className="space-y-2 text-center">
+        <p className="text-[11px] uppercase tracking-[0.24em] text-muted-foreground">Admin Access</p>
+        <h1 className="text-3xl font-bold tracking-tight">Sign in to minmon</h1>
+        <p className="text-sm text-muted-foreground">
+          Use your administrator account to open the protected monitoring dashboard.
+        </p>
+      </div>
 
       <form
         onSubmit={(e) => {
@@ -78,7 +84,7 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
                   onChange={(e) => field.handleChange(e.target.value)}
                 />
                 {field.state.meta.errors.map((error) => (
-                  <p key={error?.message} className="text-red-500">
+                  <p key={error?.message} className="text-xs text-red-500">
                     {error?.message}
                   </p>
                 ))}
@@ -101,7 +107,7 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
                   onChange={(e) => field.handleChange(e.target.value)}
                 />
                 {field.state.meta.errors.map((error) => (
-                  <p key={error?.message} className="text-red-500">
+                  <p key={error?.message} className="text-xs text-red-500">
                     {error?.message}
                   </p>
                 ))}
@@ -121,14 +127,11 @@ export default function SignInForm({ onSwitchToSignUp }: { onSwitchToSignUp: ()
         </form.Subscribe>
       </form>
 
-      <div className="mt-4 text-center">
+      <div className="grid gap-2 border-t pt-4 text-center text-xs text-muted-foreground">
-        <Button
+        <p>Student demo flow uses administrator sign-in only.</p>
-          variant="link"
+        <Link to="/" className="text-primary underline-offset-4 hover:underline">
-          onClick={onSwitchToSignUp}
+          Return to homepage
-          className="text-indigo-600 hover:text-indigo-800"
+        </Link>
-        >
-          Need an account? Sign Up
-        </Button>
       </div>
     </div>
   );

apps/web/src/routes/login.tsx

@@ -1,19 +1,10 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useState } from "react";
-
 import SignInForm from "@/components/sign-in-form";
-import SignUpForm from "@/components/sign-up-form";
+import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/login")({
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  const [showSignIn, setShowSignIn] = useState(false);
+  return <SignInForm />;
-
-  return showSignIn ? (
-    <SignInForm onSwitchToSignUp={() => setShowSignIn(false)} />
-  ) : (
-    <SignUpForm onSwitchToSignIn={() => setShowSignIn(true)} />
-  );
 }

packages/auth/src/index.ts

@@ -6,6 +6,7 @@ import { drizzleAdapter } from "better-auth/adapters/drizzle";
 
 export function createAuth() {
   const db = createDb();
+  const isProduction = env.NODE_ENV === "production";
 
   return betterAuth({
     database: drizzleAdapter(db, {
@@ -21,8 +22,8 @@ export function createAuth() {
     baseURL: env.BETTER_AUTH_URL,
     advanced: {
       defaultCookieAttributes: {
-        sameSite: "none",
+        sameSite: isProduction ? "none" : "lax",
-        secure: true,
+        secure: isProduction,
         httpOnly: true,
       },
     },