feat: add login page and auth callback route

- Replace default Next.js home with role-aware root redirect
- Add email/password login form (client component, signInWithPassword)
- Add auth callback route for Supabase code exchange
- Login page at /login, callback at /api/auth/callback

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AWxyMibCuGGtSQSqfajDQ7

app/(auth)/login/page.tsx

@@ -0,0 +1,12 @@
+// app/(auth)/login/page.tsx
+import { LoginForm } from '@/components/auth/login-form'
+
+export default function LoginPage() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-gray-50 p-4">
+      <div className="bg-white rounded-xl shadow-sm border p-8 w-full max-w-sm">
+        <LoginForm />
+      </div>
+    </main>
+  )
+}

app/api/auth/callback/route.ts

@@ -0,0 +1,19 @@
+// app/api/auth/callback/route.ts
+import { createClient } from '@/lib/supabase/server'
+import { NextResponse } from 'next/server'
+
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url)
+  const code = searchParams.get('code')
+  const next = searchParams.get('next') ?? '/'
+
+  if (code) {
+    const supabase = await createClient()
+    const { error } = await supabase.auth.exchangeCodeForSession(code)
+    if (!error) {
+      return NextResponse.redirect(`${origin}${next}`)
+    }
+  }
+
+  return NextResponse.redirect(`${origin}/login?error=auth_callback_failed`)
+}

app/page.tsx

@@ -1,65 +1,25 @@
-import Image from "next/image";
+// app/page.tsx
+import { redirect } from 'next/navigation'
+import { createClient } from '@/lib/supabase/server'
+import { getRoleHome, isValidRole, type UserRole } from '@/lib/auth/roles'
 
-export default function Home() {
+export default async function RootPage() {
-  return (
+  const supabase = await createClient()
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+  const {
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+    data: { user },
-        <Image
+  } = await supabase.auth.getUser()
-          className="dark:invert"
+
-          src="/next.svg"
+  if (!user) redirect('/login')
-          alt="Next.js logo"
+
-          width={100}
+  const { data: profile } = await supabase
-          height={20}
+    .from('users')
-          priority
+    .select('role')
-        />
+    .eq('id', user.id)
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+    .single()
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+
-            To get started, edit the page.tsx file.
+  if (profile?.role && isValidRole(profile.role)) {
-          </h1>
+    redirect(getRoleHome(profile.role as UserRole))
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+  }
-            Looking for a starting point or more instructions? Head over to{" "}
+
-            <a
+  redirect('/login')
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
-  );
 }

components/auth/login-form.tsx

@@ -0,0 +1,72 @@
+// components/auth/login-form.tsx
+'use client'
+
+import { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { createClient } from '@/lib/supabase/client'
+
+export function LoginForm() {
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setLoading(true)
+    setError(null)
+
+    const supabase = createClient()
+    const { error } = await supabase.auth.signInWithPassword({ email, password })
+
+    if (error) {
+      setError(error.message)
+      setLoading(false)
+      return
+    }
+
+    router.refresh()
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex flex-col gap-4 w-full max-w-sm">
+      <div className="text-center">
+        <h1 className="text-2xl font-bold">IMS</h1>
+        <p className="text-sm text-gray-500 mt-1">HSE Incident Management</p>
+      </div>
+
+      {error && (
+        <p className="bg-red-50 border border-red-200 text-red-700 text-sm rounded px-3 py-2">
+          {error}
+        </p>
+      )}
+
+      <input
+        type="email"
+        placeholder="Email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+        required
+        autoComplete="email"
+        className="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+      <input
+        type="password"
+        placeholder="Password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        required
+        autoComplete="current-password"
+        className="border rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+      />
+      <button
+        type="submit"
+        disabled={loading}
+        className="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 rounded-md disabled:opacity-50 transition-colors"
+      >
+        {loading ? 'Signing in…' : 'Sign in'}
+      </button>
+    </form>
+  )
+}