feat: Add Google and GitHub social login to the login page and centralize Supabase client configuration with authentication options.

Author: Bharath-code

src/app/login/page.tsx

@@ -6,19 +6,15 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import Link from "next/link";
-import { ArrowLeft, Mail, CheckCircle2 } from "lucide-react";
-import { createClient } from "@supabase/supabase-js";
-
-const supabase = createClient(
-    process.env.NEXT_PUBLIC_SUPABASE_URL!,
-    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY!
-);
+import { ArrowLeft, Mail, CheckCircle2, Loader2 } from "lucide-react";
+import { supabase } from "@/lib/supabase";
 
 export default function LoginPage() {
     const [email, setEmail] = useState("");
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [isSubmitted, setIsSubmitted] = useState(false);
     const [error, setError] = useState<string | null>(null);
+    const [socialLoading, setSocialLoading] = useState<string | null>(null);
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
@@ -42,6 +38,23 @@ export default function LoginPage() {
         setIsSubmitted(true);
     };
 
+    const handleSocialLogin = async (provider: "google" | "github") => {
+        setSocialLoading(provider);
+        setError(null);
+
+        const { error: authError } = await supabase.auth.signInWithOAuth({
+            provider,
+            options: {
+                redirectTo: `${window.location.origin}/auth/callback`,
+            },
+        });
+
+        if (authError) {
+            setError(authError.message);
+            setSocialLoading(null);
+        }
+    };
+
     return (
         <div className="min-h-screen flex flex-col items-center justify-center px-6 dot-grid">
             <Link
@@ -100,7 +113,7 @@ export default function LoginPage() {
                     ) : (
                         <form onSubmit={handleSubmit} className="space-y-4">
                             <div className="space-y-2">
-                                <Label htmlFor="email">Email address</Label>
+                                <Label htmlFor="email">Work email</Label>
                                 <div className="relative">
                                     <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                                     <Input
@@ -113,8 +126,15 @@ export default function LoginPage() {
                                         required
                                     />
                                 </div>
+                                <p className="text-[11px] text-muted-foreground">
+                                    Work email preferred — helps us personalize your intel
+                                </p>
                             </div>
 
+                            {error && (
+                                <p className="text-sm text-red-500 text-center">{error}</p>
+                            )}
+
                             <Button
                                 type="submit"
                                 className="w-full"
@@ -123,6 +143,67 @@ export default function LoginPage() {
                                 {isSubmitting ? "Sending link..." : "Send Magic Link"}
                             </Button>
 
+                            {/* Divider */}
+                            <div className="relative my-6">
+                                <div className="absolute inset-0 flex items-center">
+                                    <span className="w-full border-t border-border" />
+                                </div>
+                                <div className="relative flex justify-center text-xs uppercase">
+                                    <span className="bg-card px-2 text-muted-foreground">Or continue with</span>
+                                </div>
+                            </div>
+
+                            {/* Social Login Buttons */}
+                            <div className="grid grid-cols-2 gap-3">
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={() => handleSocialLogin("google")}
+                                    disabled={socialLoading !== null}
+                                    className="gap-2"
+                                >
+                                    {socialLoading === "google" ? (
+                                        <Loader2 className="w-4 h-4 animate-spin" />
+                                    ) : (
+                                        <svg className="w-4 h-4" viewBox="0 0 24 24">
+                                            <path
+                                                fill="currentColor"
+                                                d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                                            />
+                                            <path
+                                                fill="currentColor"
+                                                d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                                            />
+                                            <path
+                                                fill="currentColor"
+                                                d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                                            />
+                                            <path
+                                                fill="currentColor"
+                                                d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                                            />
+                                        </svg>
+                                    )}
+                                    Google
+                                </Button>
+                                <Button
+                                    type="button"
+                                    variant="outline"
+                                    onClick={() => handleSocialLogin("github")}
+                                    disabled={socialLoading !== null}
+                                    className="gap-2"
+                                >
+                                    {socialLoading === "github" ? (
+                                        <Loader2 className="w-4 h-4 animate-spin" />
+                                    ) : (
+                                        <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                                        </svg>
+                                    )}
+                                    GitHub
+                                </Button>
+                            </div>
+
                             <p className="text-xs text-center text-muted-foreground">
                                 By signing in, you agree to our{" "}
                                 <Link href="/terms" className="text-emerald-400 hover:underline">

src/app/page.tsx

@@ -37,13 +37,13 @@ export default function Home() {
           {/* Headline */}
           <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl text-foreground leading-[1.1] mb-6">
             Your competitors just changed pricing. <br />
-            <span className="text-emerald-400 italic">You found out first.</span>
+            <span className="text-emerald-400 italic">You knew 6 hours ago.</span>
           </h1>
 
           {/* Subheadline */}
           <p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed">
-            RivalEye monitors competitor pricing pages from 8 global regions.
-            When they move, you get an <span className="text-foreground font-medium">AI-powered tactical brief</span> — not just an alert.
+            RivalEye monitors competitor pricing pages across 4 global regions.
+            When they move, you get an <span className="text-foreground font-medium">AI tactical brief</span> — not just a notification.
           </p>
 
           {/* CTAs */}
@@ -63,7 +63,7 @@ export default function Home() {
 
           {/* Trust Signal */}
           <p className="text-sm text-muted-foreground mt-8">
-            Free forever for 1 competitor • Setup in 30 seconds
+            Free forever for 1 competitor • Setup in 30 seconds • No credit card
           </p>
         </div>
       </section>
@@ -73,15 +73,19 @@ export default function Home() {
         <div className="max-w-4xl mx-auto flex flex-wrap items-center justify-center gap-12 text-muted-foreground text-sm font-medium">
           <div className="flex items-center gap-2">
             <Check className="w-4 h-4 text-emerald-400" />
-            <span>Detects changes in &lt;24 hours</span>
+            <span>Daily automated scans</span>
           </div>
           <div className="flex items-center gap-2">
             <Globe2 className="w-4 h-4 text-emerald-400" />
-            <span>4 key global regions</span>
+            <span>4 global pricing regions</span>
           </div>
           <div className="flex items-center gap-2">
             <Sparkles className="w-4 h-4 text-emerald-400" />
-            <span>AI explains the "Why"</span>
+            <span>AI explains the strategy shift</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Bell className="w-4 h-4 text-emerald-400" />
+            <span>Slack + Email alerts</span>
           </div>
         </div>
       </section>
@@ -272,12 +276,12 @@ export default function Home() {
 
             <p className="text-muted-foreground mb-8 leading-relaxed relative z-10">
               Competitors use IP-based pricing to hide localized strategies.
-              RivalEye deployments monitor from 8 global regions simultaneously,
+              RivalEye monitors from 4 key regions simultaneously,
               uncovering hidden discounts and regional test-pricing.
             </p>
 
-            <div className="grid grid-cols-4 sm:grid-cols-8 gap-3 relative z-10">
-              {["🇺🇸 US", "🇬🇧 UK", "🇩🇪 DE", "🇫🇷 FR", "🇮🇳 IN", "🇦🇺 AU", "🇧🇷 BR", "🇯🇵 JP"].map(
+            <div className="grid grid-cols-4 gap-3 relative z-10">
+              {["🇺🇸 United States", "🇪🇺 Europe", "🇮🇳 India", "🌍 Global"].map(
                 (region) => (
                   <div
                     key={region}
@@ -314,11 +318,11 @@ export default function Home() {
 
               <ul className="space-y-4 text-sm text-muted-foreground mb-10">
                 {[
-                  "1 competitor sensor",
-                  "Daily trajectory scans",
-                  "Standard email alerts",
-                  "Basic diff detection",
-                  "7-day history storage",
+                  "1 competitor tracking",
+                  "Daily automated scans",
+                  "Email alerts",
+                  "Basic change detection",
+                  "7-day history",
                 ].map((item, i) => (
                   <li key={i} className="flex items-center gap-3">
                     <Check className="w-4 h-4 text-emerald-500/50" />
@@ -348,13 +352,14 @@ export default function Home() {
 
               <ul className="space-y-4 text-sm mb-10">
                 {[
-                  { text: "5 competitor sensors", highlight: false },
-                  { text: "Unlimited page depth", highlight: false },
-                  { text: "Frequent monitoring scans", highlight: false },
-                  { text: "4 Regional sensors (US, EU, IN)", highlight: true },
-                  { text: "AI Tactical Briefs", highlight: true },
-                  { text: "Visual verification (SVG/Images)", highlight: true },
-                  { text: "Unlimited delta history", highlight: false },
+                  { text: "5 competitors", highlight: false },
+                  { text: "Unlimited pages per competitor", highlight: false },
+                  { text: "Daily + on-demand scans", highlight: false },
+                  { text: "4 regional pricing sensors (US, EU, IN, Global)", highlight: true },
+                  { text: "AI tactical briefs", highlight: true },
+                  { text: "Visual snapshots for verification", highlight: true },
+                  { text: "Slack + Email alerts", highlight: true },
+                  { text: "Unlimited history", highlight: false },
                 ].map((item, i) => (
                   <li
                     key={i}
@@ -394,8 +399,8 @@ export default function Home() {
             <span className="text-emerald-400">Do you have a response?</span>
           </h2>
           <p className="text-lg text-muted-foreground mb-10 leading-relaxed max-w-xl mx-auto">
-            Every day you&apos;re not monitoring, you&apos;re flying blind.
-            Start free — it takes 30 seconds.
+            Every day you&apos;re not monitoring, your sales team is flying blind.
+            Start free — takes 30 seconds.
           </p>
           <Link href="/login">
             <Button size="lg" className="glow-emerald text-base px-10 py-8 gap-3">

src/lib/supabase.ts

@@ -8,9 +8,26 @@ if (!process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY) {
     throw new Error("Missing NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY environment variable");
 }
 
+/**
+ * Client-side Supabase client
+ * 
+ * Configured with:
+ * - autoRefreshToken: true (automatically refresh tokens before expiry)
+ * - persistSession: true (store session in localStorage)
+ * - detectSessionInUrl: true (handle OAuth callbacks)
+ */
 export const supabase = createClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL,
-    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY
+    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY,
+    {
+        auth: {
+            autoRefreshToken: true,
+            persistSession: true,
+            detectSessionInUrl: true,
+            storageKey: "rivaleye-auth",
+            flowType: "pkce",
+        },
+    }
 );
 
 // Server-side client with service role key (for API routes/server actions)