✨ feat: add Google and Apple OAuth via better-auth socialProviders

src/app/auth/signin/page.tsx

@@ -1,74 +1,10 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { CalendarDays, Loader2 } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { signIn, useSession } from "@/lib/auth-client";
+// Server Component — reads env vars and passes provider list to the client UI
+import { getSignInProviders } from "@/lib/get-sign-in-providers";
+import { SignInForm } from "./sign-in-form";
 
 export default function SignInPage() {
-	const { data: session, isPending } = useSession();
-	const router = useRouter();
-	const [isLoading, setIsLoading] = useState(false);
-
-	useEffect(() => {
-		if (session?.user) {
-			router.push("/");
-		}
-	}, [session, router]);
-
-	const handleSignIn = async () => {
-		setIsLoading(true);
-		try {
-			await signIn.oauth2({
-				providerId: "authentik",
-				callbackURL: "/",
-			});
-		} catch {
-			toast.error("Failed to sign in. Please try again.");
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	if (isPending || session?.user) {
-		return null;
-	}
-
-	return (
-		<div className="min-h-screen flex items-center justify-center p-4">
-			<motion.div
-				initial={{ opacity: 0, y: 16 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.3 }}
-				className="glass-strong p-8 max-w-sm w-full text-center"
-			>
-				<div className="flex items-center justify-center gap-2 mb-6">
-					<CalendarDays className="h-6 w-6 text-primary" />
-					<h1 className="text-xl font-semibold tracking-tight">Local iCal</h1>
-				</div>
-
-				<p className="text-sm text-muted-foreground mb-6">
-					Sign in to unlock AI-powered event creation
-				</p>
-
-				<Button onClick={handleSignIn} className="w-full" disabled={isLoading}>
-					{isLoading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
-					{isLoading ? "Signing in..." : "Continue with Authentik"}
-				</Button>
-
-				<div className="mt-4">
-					<Link
-						href="/"
-						className="text-xs text-muted-foreground hover:text-foreground transition-colors"
-					>
-						Continue without signing in
-					</Link>
-				</div>
-			</motion.div>
-		</div>
+	const providers = getSignInProviders(
+		process.env as Record<string, string | undefined>,
 	);
+	return <SignInForm providers={providers} />;
 }