feat: transition to google-only authentication and streamline UI

dev.log

@@ -2,36 +2,56 @@
 > vault@0.1.0 dev
 > next dev --turbopack
 
- ⚠ Mismatching @next/swc version, detected: 15.5.7 while Next.js is on 15.5.11. Please ensure these match
 [@sentry/nextjs] DEPRECATION WARNING: automaticVercelMonitors is deprecated and will be removed in a future version. Use webpack.automaticVercelMonitors instead. (Not supported with Turbopack.)
 [@sentry/nextjs] DEPRECATION WARNING: reactComponentAnnotation is deprecated and will be removed in a future version. Use webpack.reactComponentAnnotation instead. (Not supported with Turbopack.)
- ⚠ Mismatching @next/swc version, detected: 15.5.7 while Next.js is on 15.5.11. Please ensure these match
 [@sentry/nextjs] DEPRECATION WARNING: automaticVercelMonitors is deprecated and will be removed in a future version. Use webpack.automaticVercelMonitors instead. (Not supported with Turbopack.)
 [@sentry/nextjs] DEPRECATION WARNING: reactComponentAnnotation is deprecated and will be removed in a future version. Use webpack.reactComponentAnnotation instead. (Not supported with Turbopack.)
-   ▲ Next.js 15.5.11 (Turbopack)
+   ▲ Next.js 15.5.12 (Turbopack)
    - Local:        http://localhost:3000
-   - Network:      http://192.168.1.226:3000
+   - Network:      http://192.168.1.225:3000
    - Environments: .env.local
    - Experiments (use with caution):
+     · serverActions
      · clientTraceMetadata
 
  ✓ Starting...
- ○ Compiling instrumentation Node.js ...
- ✓ Compiled instrumentation Node.js in 750ms
- ✓ Compiled instrumentation Edge in 203ms
- ✓ Compiled middleware in 112ms
- ✓ Ready in 2.4s
- ○ Compiling /register ...
- ✓ Compiled /register in 1870ms
- HEAD /register   Reload env:    Reload e ✓ Compiled instrumentation Node.js in 29ms
- ✓ Compiled instrumentation Edge in 4ms
-[Error: ENOENT: no such file or directory, open '/Users/vijaykrishnan/Dev/Vault/.next/static/development/_buildManifest.js.tmp.88n5sr8e3hb'] {
-  errno: -2,
-  code: 'ENOENT',
-  syscall: 'open',
-  path: '/Users/vijaykrishnan/Dev/Vault/.next/static/development/_buildManifest.js.tmp.88n5sr8e3hb'
-}
-[?25h
-mx'
-}
-[?25h
+ ✓ Compiled instrumentation Node.js in 473ms
+ ✓ Compiled instrumentation Edge in 151ms
+ ✓ Compiled middleware in 80ms
+ ✓ Ready in 1849ms
+ ○ Compiling /login ...
+ ✓ Compiled /login in 2.3s
+ GET /login 200 in 2700ms
+ ✓ Compiled /favicon.ico in 166ms
+ GET /favicon.ico?favicon.0b3bf435.ico 200 in 428ms
+ ○ Compiling /api/auth/[...all] ...
+ ✓ Compiled /api/auth/[...all] in 715ms
+ POST /api/auth/sign-in/social 200 in 2621ms
+ GET /api/auth/callback/google?state=1ytLvxWE8WL44ljrBpjooa5ktCWdMu0l&code=4/0ASc3gC0LWU5y8kD2WHo1zGejy6ln-RUjUSLcGVGrYUEC6xo84ddALNF_6LzH2IEXKsm2Yg&scope=email%20profile%20https://www.googleapis.com/auth/youtube.readonly%20https://www.googleapis.com/auth/userinfo.profile%20https://www.googleapis.com/auth/userinfo.email%20openid&authuser=0&prompt=consent 302 in 2140ms
+ GET /api/auth/get-session 200 in 634ms
+ ○ Compiling /dashboard ...
+ ✓ Compiled /dashboard in 990ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /dashboard 200 in 3728ms
+ GET /favicon.ico?favicon.0b3bf435.ico 200 in 234ms
+ GET /api/auth/get-session 200 in 619ms
+ GET /api/auth/get-session 200 in 1383ms
+ POST /dashboard 200 in 1568ms
+ GET /api/auth/get-session 200 in 587ms
+ POST /dashboard 200 in 604ms
+ ✓ Compiled in 76ms
+ GET /api/auth/get-session 200 in 1479ms
+ ✓ Compiled /dashboard in 29ms
+ GET /api/auth/get-session 200 in 653ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /dashboard 200 in 2634ms
+ GET /dashboard 200 in 2544ms
+ ✓ Compiled in 171ms
+ GET /api/auth/get-session 200 in 599ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /dashboard 200 in 769ms
+ ✓ Compiled in 259ms
+ GET /api/auth/get-session 200 in 557ms
+[DashboardPage] userId: pvcRv8Ruf0FqiKwPLSUYjpMhBkTnyhJw
+ GET /dashboard 200 in 820ms

src/app/dashboard/page.tsx

@@ -14,6 +14,8 @@ import { KeyMetricsRow } from "@/features/analytics/components/key-metrics-row";
 import { TopEvergreenVideos } from "@/features/analytics/components/top-evergreen-videos";
 import { QuickAnalyzeTool } from "@/features/vault/components/quick-analyze-tool";
 import { UserNav } from "@/components/auth/user-nav";
+import { AutoClaimer } from "@/components/auth/auto-claimer";
+import { Suspense } from "react";
 
 export default async function DashboardPage({
     searchParams,
@@ -130,6 +132,9 @@ export default async function DashboardPage({
 
     return (
         <div className="max-w-7xl mx-auto px-4 py-8 space-y-8 animate-in fade-in duration-500">
+            <Suspense fallback={null}>
+                <AutoClaimer />
+            </Suspense>
             <div className="flex justify-between items-start">
                 <div className="space-y-1">
                     <Link href="/" className="inline-block text-primary font-bold text-xl tracking-tight mb-1">Vault</Link>

src/app/login/page.tsx

@@ -9,7 +9,7 @@ export default function LoginPage() {
                 <div className="space-y-2 text-center">
                     <Link href="/" className="inline-block text-primary font-bold text-xl tracking-tight mb-2">Vault</Link>
                     <h1 className="text-3xl font-bold">Login</h1>
-                    <p className="text-gray-500 dark:text-gray-400">Enter your email below to login to your account</p>
+                    <p className="text-gray-500 dark:text-gray-400">Continue with your Google account to access your vault</p>
                 </div>
                 <Suspense fallback={<div className="h-64 flex items-center justify-center">Loading...</div>}>
                     <SignInForm />

src/app/register/page.tsx

@@ -9,7 +9,7 @@ export default function RegisterPage() {
                 <div className="space-y-2 text-center">
                     <Link href="/" className="inline-block text-primary font-bold text-xl tracking-tight mb-2">Vault</Link>
                     <h1 className="text-3xl font-bold">Sign Up</h1>
-                    <p className="text-gray-500 dark:text-gray-400">Enter your information to create an account</p>
+                    <p className="text-gray-500 dark:text-gray-400">Sign up with your Google account to start your vault</p>
                 </div>
                 <Suspense fallback={<div className="h-64 flex items-center justify-center">Loading...</div>}>
                     <SignUpForm />

src/components/auth/auto-claimer.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import { claimVideo } from "@/actions/claim-video";
+import { toast } from "sonner";
+
+export function AutoClaimer() {
+    const searchParams = useSearchParams();
+    const videoId = searchParams.get("videoId");
+    const [processed, setProcessed] = useState(false);
+
+    useEffect(() => {
+        if (videoId && !processed) {
+            console.log(`[AutoClaimer] Found videoId ${videoId} in URL, attempting to claim...`);
+            setProcessed(true);
+
+            const performClaim = async () => {
+                try {
+                    const result = await claimVideo(videoId);
+                    if (result.success) {
+                        toast.success("Video successfully claimed!");
+                    } else {
+                        console.error("[AutoClaimer] Claim failed:", result.error);
+                        toast.error(result.error || "Failed to claim video");
+                    }
+                } catch (err) {
+                    console.error("[AutoClaimer] Error claiming video:", err);
+                    toast.error("An unexpected error occurred while claiming your video");
+                }
+            };
+
+            performClaim();
+        }
+    }, [videoId, processed]);
+
+    return null;
+}

src/components/auth/sign-in-form.tsx

@@ -3,48 +3,25 @@
 import { useState } from "react";
 import { signIn } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
-import { claimVideo } from "@/actions/claim-video";
 
 export function SignInForm() {
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
-    const router = useRouter();
     const searchParams = useSearchParams();
     const videoId = searchParams.get("videoId");
 
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
+    const handleGoogleSignIn = async () => {
         setLoading(true);
         setError("");
-        await signIn.email({
-            email,
-            password,
-            callbackURL: "/dashboard",
+        await signIn.social({
+            provider: "google",
+            callbackURL: videoId ? `/dashboard?videoId=${videoId}` : "/dashboard",
         }, {
             onRequest: () => {
                 setLoading(true);
             },
-            onSuccess: async () => {
-                console.log("[SignInForm] Login success");
-                if (videoId) {
-                    console.log(`[SignInForm] Found videoId ${videoId}, claiming...`);
-                    try {
-                        const result = await claimVideo(videoId);
-                        console.log(`[SignInForm] Claim result:`, result);
-                    } catch (err) {
-                        console.error("[SignInForm] Claim failed:", err);
-                    }
-                }
-                setLoading(false);
-                router.push("/dashboard");
-            },
             onError: (ctx) => {
                 setLoading(false);
                 setError(ctx.error.message);
@@ -54,41 +31,28 @@ export function SignInForm() {
 
     return (
         <div className="grid gap-6">
-            <form onSubmit={handleSubmit}>
-                <div className="grid gap-4">
-                    <div className="grid gap-2">
-                        <Label htmlFor="email">Email</Label>
-                        <Input
-                            id="email"
-                            placeholder="name@example.com"
-                            type="email"
-                            autoCapitalize="none"
-                            autoComplete="email"
-                            autoCorrect="off"
-                            required
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                        />
-                    </div>
-                    <div className="grid gap-2">
-                        <Label htmlFor="password">Password</Label>
-                        <Input
-                            id="password"
-                            type="password"
-                            required
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                        />
-                    </div>
-                    {error && <p className="text-sm text-red-500">{error}</p>}
-                    <Button disabled={loading}>
-                        {loading && (
-                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        )}
-                        Sign In
-                    </Button>
+            {error && (
+                <div className="bg-destructive/15 text-destructive text-sm p-3 rounded-lg border border-destructive/20 mb-2">
+                    {error}
                 </div>
-            </form>
+            )}
+
+            <Button
+                variant="outline"
+                type="button"
+                disabled={loading}
+                onClick={handleGoogleSignIn}
+                className="w-full h-11 text-base glass border-white/10 hover:bg-white/5 transition-all duration-300"
+            >
+                {loading ? (
+                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                ) : (
+                    <svg className="mr-2 h-5 w-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
+                        <path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path>
+                    </svg>
+                )}
+                Continue with Google
+            </Button>
         </div>
     );
 }

src/components/auth/sign-up-form.tsx

@@ -1,51 +1,27 @@
 "use client";
 
 import { useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { signUp } from "@/lib/auth-client";
+import { signIn } from "@/lib/auth-client";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Loader2 } from "lucide-react";
+import { useSearchParams } from "next/navigation";
 
 export function SignUpForm() {
-    const [name, setName] = useState("");
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
-    const router = useRouter();
     const searchParams = useSearchParams();
     const videoId = searchParams.get("videoId");
 
-    console.log(`[SignUpForm] Rendered. videoId from URL: ${videoId}`);
-
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
+    const handleGoogleSignIn = async () => {
         setLoading(true);
         setError("");
-        await signUp.email({
-            email,
-            password,
-            name,
+        await signIn.social({
+            provider: "google",
+            callbackURL: videoId ? `/dashboard?videoId=${videoId}` : "/dashboard",
         }, {
             onRequest: () => {
                 setLoading(true);
             },
-            onSuccess: async () => {
-                if (videoId) {
-                    console.log(`[SignUpForm] Success. Triggering claim for videoId: ${videoId}`);
-                    try {
-                        const { claimVideo } = await import("@/actions/claim-video");
-                        const result = await claimVideo(videoId);
-                        console.log(`[SignUpForm] Claim result:`, result);
-                    } catch (err) {
-                        console.error("Failed to claim video:", err);
-                    }
-                }
-                setLoading(false);
-                router.push("/dashboard");
-            },
             onError: (ctx) => {
                 setLoading(false);
                 setError(ctx.error.message);
@@ -55,51 +31,28 @@ export function SignUpForm() {
 
     return (
         <div className="grid gap-6">
-            <form onSubmit={handleSubmit}>
-                <div className="grid gap-4">
-                    <div className="grid gap-2">
-                        <Label htmlFor="name">Name</Label>
-                        <Input
-                            id="name"
-                            placeholder="John Doe"
-                            required
-                            value={name}
-                            onChange={(e) => setName(e.target.value)}
-                        />
-                    </div>
-                    <div className="grid gap-2">
-                        <Label htmlFor="email">Email</Label>
-                        <Input
-                            id="email"
-                            placeholder="name@example.com"
-                            type="email"
-                            autoCapitalize="none"
-                            autoComplete="email"
-                            autoCorrect="off"
-                            required
-                            value={email}
-                            onChange={(e) => setEmail(e.target.value)}
-                        />
-                    </div>
-                    <div className="grid gap-2">
-                        <Label htmlFor="password">Password</Label>
-                        <Input
-                            id="password"
-                            type="password"
-                            required
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                        />
-                    </div>
-                    {error && <p className="text-sm text-red-500">{error}</p>}
-                    <Button disabled={loading}>
-                        {loading && (
-                            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                        )}
-                        Sign Up
-                    </Button>
+            {error && (
+                <div className="bg-destructive/15 text-destructive text-sm p-3 rounded-lg border border-destructive/20 mb-2">
+                    {error}
                 </div>
-            </form>
+            )}
+
+            <Button
+                variant="outline"
+                type="button"
+                disabled={loading}
+                onClick={handleGoogleSignIn}
+                className="w-full h-11 text-base glass border-white/10 hover:bg-white/5 transition-all duration-300"
+            >
+                {loading ? (
+                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
+                ) : (
+                    <svg className="mr-2 h-5 w-5" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="google" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 488 512">
+                        <path fill="currentColor" d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"></path>
+                    </svg>
+                )}
+                Continue with Google
+            </Button>
         </div>
     );
 }

src/lib/auth.ts

@@ -1,11 +1,11 @@
 import { betterAuth } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
-import { db } from "./db"; // Adjust path if necessary
+import { db } from "./db";
 import * as schema from "./db/schema";
 
 export const auth = betterAuth({
     database: drizzleAdapter(db, {
-        provider: "pg", // or "mysql", "sqlite"
+        provider: "pg",
         schema: {
             user: schema.users,
             session: schema.sessions,
@@ -14,10 +14,15 @@ export const auth = betterAuth({
         },
     }),
     account: {
+        accountLinking: {
+            enabled: true,
+            trustedProviders: ["google"],
+        },
         encryptOAuthTokens: false,
     },
+    // Transitioning to Google-only authentication
     emailAndPassword: {
-        enabled: true,
+        enabled: false,
     },
     socialProviders: {
         google: {
@@ -31,5 +36,10 @@ export const auth = betterAuth({
                 }
             }
         }
-    }
+    },
+    advanced: {
+        // Help resolve state mismatch on localhost
+        useSecureCookies: false, // Ensure cookies work on HTTP localhost
+    },
+    trustedOrigins: ["http://localhost:3000", "http://127.0.0.1:3000"]
 });