Kolo-Org · Queenode · Jul 23, 2026 · Jul 19, 2026 · Jul 21, 2026
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
@@ -1,3 +1,10 @@
+import { Suspense } from "react";
+import { AuthForm } from "@/components/auth/AuthForm";
+
 export default function Login() {
-  return <div>Login Page</div>;
+  return (
+    <Suspense>
+      <AuthForm mode="login" />
+    </Suspense>
+  );
 }
diff --git a/src/app/(auth)/register/page.tsx b/src/app/(auth)/register/page.tsx
@@ -1,3 +1,10 @@
+import { Suspense } from "react";
+import { AuthForm } from "@/components/auth/AuthForm";
+
 export default function Register() {
-  return <div>Register Page</div>;
+  return (
+    <Suspense>
+      <AuthForm mode="register" />
+    </Suspense>
+  );
 }
diff --git a/src/app/(dashboard)/groups/page.tsx b/src/app/(dashboard)/groups/page.tsx
@@ -1,3 +1,50 @@
-export default function Groups() {
-  return <div>Groups Page</div>;
+import { groupsService } from "@/services/api/groups";
+import { InviteButton } from "@/components/groups/InviteButton";
+
+export default async function Groups() {
+  const groups = await groupsService.listGroups();
+
+  return (
+    <main className="mx-auto max-w-3xl px-4 py-10 sm:px-6 lg:px-8">
+      <header className="mb-8">
+        <h1 className="font-display text-2xl font-bold text-slate-900">
+          Your Groups
+        </h1>
+        <p className="mt-1 text-sm text-slate-500">
+          Manage your savings circles and invite new members.
+        </p>
+      </header>
+
+      <ul className="space-y-4">
+        {groups.map((group) => (
+          <li
+            key={group.id}
+            className="rounded-2xl border border-slate-100 bg-white p-5 shadow-sm"
+          >
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <h2 className="font-display text-lg font-semibold text-slate-900">
+                  {group.name}
+                </h2>
+                {group.description && (
+                  <p className="mt-1 text-sm text-slate-500">
+                    {group.description}
+                  </p>
+                )}
+                {typeof group.memberCount === "number" && (
+                  <p className="mt-2 text-xs font-medium text-slate-400">
+                    {group.memberCount} members
+                  </p>
+                )}
+              </div>
+            </div>
+
+            <div className="mt-4 border-t border-slate-100 pt-4">
+              <InviteButton group={group} />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
 }
diff --git a/src/app/invite/[code]/page.tsx b/src/app/invite/[code]/page.tsx
@@ -0,0 +1,11 @@
+import { InviteConfirm } from "@/components/groups/InviteConfirm";
+
+// In Next.js 16, dynamic route `params` is a Promise and must be awaited.
+export default async function InvitePage({
+  params,
+}: {
+  params: Promise<{ code: string }>;
+}) {
+  const { code } = await params;
+  return <InviteConfirm code={code} />;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter, Space_Grotesk } from "next/font/google";
 import "../styles/globals.css";
+import { AuthProvider } from "@/context/AuthContext";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -30,7 +31,7 @@ export default function RootLayout({
       <body
         className={`${inter.variable} ${spaceGrotesk.variable} antialiased`}
       >
-        {children}
+        <AuthProvider>{children}</AuthProvider>
       </body>
     </html>
   );

diff --git a/src/components/auth/AuthForm/AuthForm.tsx b/src/components/auth/AuthForm/AuthForm.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useAuth } from "@/hooks/useAuth";
+
+interface AuthFormProps {
+  mode: "register" | "login";
+}
+
+/**
+ * Mock signup / login form.
+ *
+ * On submit it starts a mock session and honours a `?redirect=` query param so
+ * invite deep links return the user to the group Join confirmation after
+ * onboarding. Replace `login()` with a real auth call when auth lands.
+ *
+ * Reads `useSearchParams`, so it must be rendered inside a <Suspense> boundary
+ * (a Next.js requirement).
+ */
+export function AuthForm({ mode }: AuthFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { login } = useAuth();
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const isRegister = mode === "register";
+  const redirect = safeRedirect(searchParams.get("redirect"));
+
+  function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    login({
+      name: name.trim() || undefined,
+      email: email.trim() || undefined,
+    });
+    router.replace(redirect ?? "/dashboard");
+  }
+
+  const otherHref = isRegister ? "/login" : "/register";
+  const otherLabel = isRegister ? "Log in" : "Sign up";
+  // Preserve the invite context when switching between login and signup.
+  const otherHrefWithRedirect = redirect
+    ? `${otherHref}?redirect=${encodeURIComponent(redirect)}`
+    : otherHref;
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10">
+      <div className="w-full max-w-md rounded-2xl border border-slate-100 bg-white p-8 shadow-sm">
+        <h1 className="font-display text-2xl font-bold text-slate-900">
+          {isRegister ? "Create your account" : "Welcome back"}
+        </h1>
+        <p className="mt-1 text-sm text-slate-500">
+          {isRegister
+            ? "Join Kolo and start saving with your community."
+            : "Log in to continue saving with your groups."}
+        </p>
+
+        <form onSubmit={handleSubmit} className="mt-6 space-y-4">
+          {isRegister && (
+            <Field
+              id="name"
+              label="Full name"
+              type="text"
+              value={name}
+              onChange={setName}
+              autoComplete="name"
+            />
+          )}
+          <Field
+            id="email"
+            label="Email"
+            type="email"
+            value={email}
+            onChange={setEmail}
+            autoComplete="email"
+            required
+          />
+          <Field
+            id="password"
+            label="Password"
+            type="password"
+            value={password}
+            onChange={setPassword}
+            autoComplete={isRegister ? "new-password" : "current-password"}
+            required
+          />
+
+          <button
+            type="submit"
+            className="w-full rounded-lg bg-emerald-500 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-emerald-600"
+          >
+            {isRegister ? "Sign up" : "Log in"}
+          </button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-slate-500">
+          {isRegister ? "Already have an account? " : "New to Kolo? "}
+          <Link
+            href={otherHrefWithRedirect}
+            className="font-semibold text-emerald-600 hover:text-emerald-700"
+          >
+            {otherLabel}
+          </Link>
+        </p>
+      </div>
+    </main>
+  );
+}
+
+/** Only allow same-site relative redirects to avoid open-redirect issues. */
+function safeRedirect(value: string | null): string | null {
+  if (!value) return null;
+  // Must be a single-slash absolute path. Reject protocol-relative ("//") and
+  // backslash-based ("/\evil.com") forms, both of which browsers resolve to an
+  // external origin once handed to router.replace.
+  if (!value.startsWith("/") || value.startsWith("//")) return null;
+  if (value.includes("\\")) return null;
+  return value;
+}
+
+interface FieldProps {
+  id: string;
+  label: string;
+  type: string;
+  value: string;
+  onChange: (value: string) => void;
+  autoComplete?: string;
+  required?: boolean;
+}
+
+function Field({
+  id,
+  label,
+  type,
+  value,
+  onChange,
+  autoComplete,
+  required,
+}: FieldProps) {
+  return (
+    <div>
+      <label
+        htmlFor={id}
+        className="mb-1 block text-sm font-medium text-slate-700"
+      >
+        {label}
+      </label>
+      <input
+        id={id}
+        type={type}
+        value={value}
+        required={required}
+        autoComplete={autoComplete}
+        onChange={(event) => onChange(event.target.value)}
+        className="w-full rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm text-slate-900 outline-none transition-colors focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+      />
+    </div>
+  );
+}
diff --git a/src/components/auth/AuthForm/index.ts b/src/components/auth/AuthForm/index.ts
@@ -0,0 +1 @@
+export * from "./AuthForm";