Using Supabase Authentication in Lovable Without Errors

1import { useState } from "react";
2import { useNavigate } from "react-router-dom";
3import { supabase } from "@/integrations/supabase/client";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6
7const Login = () => {
8  const [email, setEmail] = useState("");
9  const [password, setPassword] = useState("");
10  const [isSignUp, setIsSignUp] = useState(false);
11  const [loading, setLoading] = useState(false);
12  const [error, setError] = useState("");
13  const navigate = useNavigate();
14
15  const handleEmailAuth = async (e: React.FormEvent) => {
16    e.preventDefault();
17    setLoading(true);
18    setError("");
19
20    const { error } = isSignUp
21      ? await supabase.auth.signUp({ email, password })
22      : await supabase.auth.signInWithPassword({ email, password });
23
24    if (error) {
25      setError(error.message);
26    } else {
27      navigate("/dashboard");
28    }
29    setLoading(false);
30  };
31
32  const handleGoogleSignIn = async () => {
33    await supabase.auth.signInWithOAuth({
34      provider: "google",
35      options: {
36        redirectTo: `${window.location.origin}/auth/callback`,
37      },
38    });
39  };
40
41  return (
42    <div className="flex items-center justify-center min-h-screen">
43      <div className="w-full max-w-sm space-y-6 p-6">
44        <h1 className="text-2xl font-bold text-center">
45          {isSignUp ? "Create Account" : "Sign In"}
46        </h1>
47
48        <form onSubmit={handleEmailAuth} className="space-y-4">
49          <Input type="email" placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} />
50          <Input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} />
51          {error && <p className="text-sm text-destructive">{error}</p>}
52          <Button type="submit" className="w-full" disabled={loading}>
53            {loading ? "Loading..." : isSignUp ? "Sign Up" : "Sign In"}
54          </Button>
55        </form>
56
57        <Button variant="outline" className="w-full" onClick={handleGoogleSignIn}>
58          Continue with Google
59        </Button>
60
61        <p className="text-sm text-center text-muted-foreground">
62          {isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
63          <button className="text-primary underline" onClick={() => setIsSignUp(!isSignUp)}>
64            {isSignUp ? "Sign In" : "Sign Up"}
65          </button>
66        </p>
67      </div>
68    </div>
69  );
70};
71
72export default Login;