[V0_FILE]typescript:file="utils/supabase.ts" isEdit="true" isMerged="true" import { createClient } from "@supabase/supabase-js" const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY export const isDemo = !supabaseUrl || !supabaseAnonKey let supabase if (isDemo) { // Create a mock client for demo mode supabase = { auth: { signInWithPassword: async () => ({ data: { user: { email: "demo@example.com" } }, error: null }), signUp: async () => ({ data: { user: { email: "demo@example.com" } }, error: null }), signOut: async () => ({ error: null }), getUser: async () => ({ data: { user: { email: "demo@example.com" } } }), }, } } else { supabase = createClient(supabaseUrl!, supabaseAnonKey!, { auth: { persistSession: false, }, }) } export { supabase } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { supabase } from "@/utils/supabase" export default function Home() { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) const router = useRouter() useEffect(() => { const checkUser = async () => { const { data: { user }, } = await supabase.auth.getUser() if (user) { setUser(user) } else { router.push("/login") } setLoading(false) } checkUser() }, [router]) if (loading) { return (

) } if (!user) { return null // This will prevent a flash of content before redirecting } return (

Logged in as {user.email}

) } [V0_FILE]typescript:file="app/layout.tsx" isEdit="true" isMerged="true" import { Toaster } from "@/components/ui/toaster" import { DemoBanner } from "@/components/demo-banner" import "./globals.css" import type React from "react" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/signup-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2 } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import Link from "next/link" import { supabase } from "@/utils/supabase" export default function SignUpForm() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [loading, setLoading] = useState(false) const router = useRouter() const { toast } = useToast() const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) try { const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: `${window.location.origin}/auth/callback`, }, }) if (error) { throw error } toast({ title: "Success", description: "Check your email to confirm your account.", }) } catch (error) { if (error instanceof Error) { toast({ variant: "destructive", title: "Error", description: error.message, }) } else { toast({ variant: "destructive", title: "Error", description: "An unexpected error occurred. Please try again.", }) } console.error("Sign up error:", error) } finally { setLoading(false) } } return (

Create an account

) } [V0_FILE]typescript:file="app/login/page.tsx" isEdit="true" isMerged="true" import LoginForm from "@/components/login-form" export default function LoginPage() { return (

) } [V0_FILE]typescript:file="app/signup/page.tsx" isEdit="true" isMerged="true" import SignUpForm from "@/components/signup-form" export default function SignUpPage() { return (

) } [V0_FILE]typescript:file="components/demo-banner.tsx" isMerged="true" "use client" import { isDemo } from "@/utils/supabase" export function DemoBanner() { if (!isDemo) return null return (

Warning: Running in demo mode. Authentication is simulated.

) } [V0_FILE]typescript:file="components/login-form.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Loader2 } from "lucide-react" import { useToast } from "@/components/ui/use-toast" import Link from "next/link" import { supabase } from "@/utils/supabase" export default function LoginForm() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [loading, setLoading] = useState(false) const router = useRouter() const { toast } = useToast() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) try { const { error } = await supabase.auth.signInWithPassword({ email, password }) if (error) { toast({ variant: "destructive", title: "Error", description: error.message, }) } else { // Successful login: redirect to home page without showing a toast router.push("/") } } catch (error) { toast({ variant: "destructive", title: "Error", description: "An unexpected error occurred. Please try again.", }) } finally { setLoading(false) } } return (

Welcome back

) }