First commit

app/(auth)/auth/callback/route.ts

@@ -0,0 +1,15 @@
+import { NextResponse } from "next/server";
+import { supabaseServer } from "@/lib/supabase/server";
+
+export async function GET(request: Request) {
+  const requestUrl = new URL(request.url);
+  const code = requestUrl.searchParams.get("code");
+  const redirectTo = requestUrl.searchParams.get("redirectTo") ?? "/courses";
+
+  const supabase = await supabaseServer();
+  if (code && supabase) {
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  return NextResponse.redirect(new URL(redirectTo, requestUrl.origin));
+}

app/(auth)/auth/login/page.tsx

@@ -0,0 +1,15 @@
+import LoginForm from "@/components/auth/LoginForm";
+
+type LoginPageProps = {
+  searchParams: Promise<{
+    redirectTo?: string | string[];
+  }>;
+};
+
+export default async function LoginPage({ searchParams }: LoginPageProps) {
+  const params = await searchParams;
+  const redirectValue = params.redirectTo;
+  const redirectTo = Array.isArray(redirectValue) ? redirectValue[0] : redirectValue;
+
+  return <LoginForm redirectTo={redirectTo ?? "/courses"} />;
+}

app/(auth)/auth/signup/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { FormEvent, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { supabaseBrowser } from "@/lib/supabase/browser";
+
+export default function SignupPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const onSubmit = async (event: FormEvent) => {
+    event.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    const client = supabaseBrowser();
+    if (!client) {
+      setLoading(false);
+      setError("Supabase is not configured. Add NEXT_PUBLIC_SUPABASE_* to .env.local.");
+      return;
+    }
+
+    const { error: signUpError } = await client.auth.signUp({ email, password });
+    setLoading(false);
+
+    if (signUpError) {
+      setError(signUpError.message);
+      return;
+    }
+
+    router.push("/courses");
+  };
+
+  return (
+    <div className="acve-panel mx-auto w-full max-w-md p-6">
+      <h1 className="acve-heading text-4xl">Sign up</h1>
+      <p className="mt-1 text-base text-slate-600">Create your account to unlock course player and practice.</p>
+
+      <form className="mt-5 space-y-4" onSubmit={onSubmit}>
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Email</span>
+          <input
+            className="w-full rounded-xl border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            onChange={(event) => setEmail(event.target.value)}
+            required
+            type="email"
+            value={email}
+          />
+        </label>
+
+        <label className="block">
+          <span className="mb-1 block text-sm text-slate-700">Password</span>
+          <input
+            className="w-full rounded-xl border border-slate-300 px-3 py-2 outline-none focus:border-brand"
+            minLength={6}
+            onChange={(event) => setPassword(event.target.value)}
+            required
+            type="password"
+            value={password}
+          />
+        </label>
+
+        {error ? <p className="text-sm text-red-600">{error}</p> : null}
+
+        <button
+          className="acve-button-primary w-full px-4 py-2 font-semibold hover:brightness-105 disabled:opacity-60"
+          disabled={loading}
+          type="submit"
+        >
+          {loading ? "Creating account..." : "Create account"}
+        </button>
+      </form>
+
+      <p className="mt-4 text-sm text-slate-600">
+        Already have an account?{" "}
+        <Link className="font-semibold text-brand" href="/auth/login">
+          Login
+        </Link>
+      </p>
+    </div>
+  );
+}