Adding OAuth Providers (Google, GitHub) in Lovable Auth Flow

Why OAuth setup breaks without proper redirect configuration in Lovable

OAuth login (Sign in with Google, Sign in with GitHub) works by redirecting the user to the provider's consent screen, then back to your app with an authorization code. This redirect chain involves three URLs that must all be configured correctly, or the flow breaks silently. First, the OAuth provider (Google or GitHub) needs to know which URLs are allowed to receive the redirect. If your Supabase callback URL is not in the provider's authorized redirect URI list, the provider blocks the redirect entirely. Second, Supabase needs the provider's client ID and secret to exchange the authorization code for user data. Third, your Lovable app needs to tell Supabase where to redirect the user after Supabase processes the OAuth callback. The most common failure is a URL mismatch. Users configure the OAuth provider with their lovable.app preview URL but then publish to a custom domain — the redirect fails because the published domain is not in the allowed list. Another frequent issue is forgetting to update the Supabase Site URL from the default localhost:3000 to the actual app URL, which causes Supabase to redirect back to localhost after the OAuth flow.

• Supabase callback URL not added to the OAuth provider's authorized redirect URIs
• Client ID or client secret entered incorrectly in Supabase Dashboard → Authentication → Providers
• Supabase Site URL still set to localhost:3000 instead of the actual app domain
• Preview domain and published domain both need to be in the redirect URLs list but only one is configured
• Missing redirectTo parameter in the signInWithOAuth call, causing Supabase to redirect to the Site URL default

Error messages you might see

Before you start

• A Lovable project with Supabase Auth enabled (via Cloud tab → Database)
• A Google Cloud Console account (for Google OAuth) or a GitHub account (for GitHub OAuth)
• Your Supabase project URL (found in Cloud tab → Secrets or Supabase Dashboard → Project Settings → API)
• Your published Lovable app URL (the lovable.app domain or custom domain where users access your app)

How to fix it

// Login page without OAuth — only email/password
<Button onClick={handleEmailLogin}>Sign In</Button>

// Login page with Google and GitHub OAuth buttons
const handleGoogleLogin = async () => {
  await supabase.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: `${window.location.origin}/dashboard`,
    },
  });
};
const handleGitHubLogin = async () => {
  await supabase.auth.signInWithOAuth({
    provider: "github",
    options: {
      redirectTo: `${window.location.origin}/dashboard`,
    },
  });
};
// In the JSX:
<div className="space-y-3">
  <Button onClick={handleGoogleLogin} variant="outline" className="w-full">
    Sign in with Google
  </Button>
  <Button onClick={handleGitHubLogin} variant="outline" className="w-full">
    Sign in with GitHub
  </Button>
</div>

Complete code example

1import { useState } from "react";
2import { useNavigate } from "react-router-dom";
3import { Button } from "@/components/ui/button";
4import { Input } from "@/components/ui/input";
5import { Label } from "@/components/ui/label";
6import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
7import { Separator } from "@/components/ui/separator";
8import { useToast } from "@/hooks/use-toast";
9import { supabase } from "@/integrations/supabase/client";
10
11const Login = () => {
12  const [email, setEmail] = useState("");
13  const [password, setPassword] = useState("");
14  const [loading, setLoading] = useState(false);
15  const navigate = useNavigate();
16  const { toast } = useToast();
17
18  const handleOAuth = async (provider: "google" | "github") => {
19    const { error } = await supabase.auth.signInWithOAuth({
20      provider,
21      options: {
22        redirectTo: `${window.location.origin}/dashboard`,
23      },
24    });
25    if (error) {
26      toast({ title: "Login failed", description: error.message, variant: "destructive" });
27    }
28  };
29
30  const handleEmailLogin = async (e: React.FormEvent) => {
31    e.preventDefault();
32    setLoading(true);
33    const { error } = await supabase.auth.signInWithPassword({ email, password });
34    if (error) {
35      toast({ title: "Login failed", description: error.message, variant: "destructive" });
36    } else {
37      navigate("/dashboard");
38    }
39    setLoading(false);
40  };
41
42  return (
43    <div className="min-h-screen flex items-center justify-center p-4">
44      <Card className="w-full max-w-sm">
45        <CardHeader>
46          <CardTitle>Sign In</CardTitle>
47        </CardHeader>
48        <CardContent className="space-y-4">
49          <Button onClick={() => handleOAuth("google")} variant="outline" className="w-full">
50            Sign in with Google
51          </Button>
52          <Button onClick={() => handleOAuth("github")} variant="outline" className="w-full">
53            Sign in with GitHub
54          </Button>
55          <Separator />
56          <form onSubmit={handleEmailLogin} className="space-y-3">
57            <div>
58              <Label htmlFor="email">Email</Label>
59              <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
60            </div>
61            <div>
62              <Label htmlFor="password">Password</Label>
63              <Input id="password" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
64            </div>
65            <Button type="submit" className="w-full" disabled={loading}>
66              {loading ? "Signing in..." : "Sign in with Email"}
67            </Button>
68          </form>
69        </CardContent>
70      </Card>
71    </div>
72  );
73};
74
75export default Login;

Best practices to prevent this

• Always add the Supabase callback URL (https://[project-ref].supabase.co/auth/v1/callback) to the OAuth provider's allowed redirect URIs
• Set the Supabase Site URL to your actual published app domain, not localhost
• Add all deployment URLs (preview, published, custom domain) to Supabase Redirect URLs with /** wildcards
• Use window.location.origin in the redirectTo parameter so the redirect works on any deployment domain automatically
• Test the full OAuth flow in an incognito window to avoid cached sessions from previous login attempts
• After adding a new OAuth provider, test on both preview and published environments since redirect URLs differ
• Keep your client secret in Supabase Dashboard only — never hardcode it in your Lovable project code
• Add error handling to the signInWithOAuth call to show a toast if the OAuth redirect fails

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns