Setting Up Google Login in Lovable – SSO & Auth Step by Step

Why Google Login?

Nobody wants to remember yet another password. Sign in with Google is the de-facto standard for web apps – fast, secure, and familiar. With Lovable, you don't need backend code or manual OAuth library setup.

This guide covers the complete path: From Google Cloud Console through Lovable configuration to a working login page.

Prerequisites

• A Lovable account with an active project
• A Google Cloud account (free)
• About 15 minutes

Architecture Overview

Here's how Google OAuth works with Lovable under the hood:

User clicks "Sign in with Google"
        ↓
Browser redirects to Google OAuth
        ↓
User authorizes the app
        ↓
Google sends token to Lovable Cloud
        ↓
Lovable Cloud creates/links user account
        ↓
User is logged in → app access

Lovable Cloud handles all token management, session handling, and user creation. You only need to configure the Google Cloud Console and the Lovable settings.

Step 1: Enable Lovable Cloud

Before you can use authentication, Lovable Cloud must be active:

1. Open your project in Lovable
2. Click the Cloud icon in the left sidebar
3. Enable Lovable Cloud

💡 Lovable Cloud provides database, auth, storage, and edge functions – all without an external account.

Step 2: Create a Google Cloud Project

2.1 – Create a New Project

1. Open the Google Cloud Console
2. Click the project dropdown at the top → "New Project"
3. Enter a name, e.g., "My Lovable App"
4. Click "Create"

2.2 – Configure the OAuth Consent Screen

1. Navigate to APIs & Services → OAuth consent screen
2. Choose "External" as User Type (so anyone with a Google account can sign in)
3. Fill in the required fields:
   • App name: Your project name
   • User support email: Your email address
   • Developer contact: Your email address
4. Click "Save and Continue"

2.3 – Set Scopes

For a standard login, you only need the basic scopes:

• email – User's email address
• profile – Name and profile picture
• openid – OpenID Connect standard

These are selected by default. Simply click "Save and Continue".

2.4 – Create OAuth Client ID

1. Navigate to APIs & Services → Credentials
2. Click "Create Credentials" → "OAuth client ID"
3. Select application type: Web application
4. Enter a name, e.g., "Lovable App Login"
5. Under "Authorized redirect URIs", add this URL:

https://<YOUR-PROJECT-ID>.supabase.co/auth/v1/callback

⚠️ Important: You can find your project ID in Lovable under Cloud → Settings. Replace <YOUR-PROJECT-ID> with your actual Supabase project ID.

6. Click "Create"
7. Copy the Client ID and Client Secret – you'll need both in the next step

Step 3: Enable Google Provider in Lovable

1. Open your Lovable project
2. Go to Cloud → Authentication → Providers
3. Find Google in the provider list
4. Enable the Google provider
5. Enter:
   • Client ID: The ID from Step 2.4
   • Client Secret: The secret from Step 2.4
6. Save the settings

Step 4: Create the Login Page

Now the easy part – just tell Lovable in the chat what you need:

Add a login page with a "Sign in with Google" button.
Only logged-in users should be able to use the app.
Add a logout button to the navigation.

Lovable automatically generates:

• A login page with a Google button
• Route protection for authenticated areas
• Session management
• Logout functionality

Example: Manual Google Sign-In Button

If you prefer to build the button yourself:

import { supabase } from '@/integrations/supabase/client';

const handleGoogleLogin = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: window.location.origin,
    },
  });
  
  if (error) {
    console.error('Login failed:', error.message);
  }
};

<button 
  onClick={handleGoogleLogin}
  className="flex items-center gap-3 px-6 py-3 bg-white text-gray-700 
             border border-gray-300 rounded-lg hover:bg-gray-50 
             transition-colors font-medium"
>
  <svg viewBox="0 0 24 24" width="20" height="20">
    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/>
    <path fill="#34A853" 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="#FBBC05" 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="#EA4335" 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>
  Sign in with Google
</button>

Step 5: Test

1. Open the live preview in Lovable
2. Click "Sign in with Google"
3. Select your Google account
4. You're redirected back to the app – logged in!

💡 Tip: In development mode, you can sign in with any Google account. For production, you should verify your app in Google Cloud Console to remove the "Not verified" warning.

Step 6: Use User Data

After login, you have access to the user's Google profile data:

import { supabase } from '@/integrations/supabase/client';

// Get current user
const { data: { user } } = await supabase.auth.getUser();

console.log(user?.email);                    // Email
console.log(user?.user_metadata?.full_name); // Full name
console.log(user?.user_metadata?.avatar_url); // Profile picture URL

Watch Auth State

To react to login/logout events:

import { useEffect, useState } from 'react';
import { supabase } from '@/integrations/supabase/client';
import type { User } from '@supabase/supabase-js';

function useAuth() {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Register listener FIRST
    const { data: { subscription } } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setUser(session?.user ?? null);
        setLoading(false);
      }
    );

    // Then get initial session
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null);
      setLoading(false);
    });

    return () => subscription.unsubscribe();
  }, []);

  return { user, loading };
}

Common Errors & Troubleshooting

"redirect_uri_mismatch"

Cause: The redirect URI in Google Console doesn't match the actual URL.

Fix: Check the URI under Google Cloud → APIs & Services → Credentials → Your OAuth Client. It must look exactly like:

https://<PROJECT-ID>.supabase.co/auth/v1/callback

"Access blocked: App not verified"

Cause: Your app hasn't been verified by Google yet.

Fix: For development and testing, this is fine – click "Advanced" → "Go to app (unsafe)". For production, submit your app for verification under OAuth consent screen → Publishing status.

Login works but user isn't created

Cause: The auth provider isn't correctly enabled in Lovable Cloud.

Fix: Check under Cloud → Authentication → Providers that Google is enabled and Client ID + Secret are correctly entered.

Session lost after reload

Cause: onAuthStateChange isn't set up correctly.

Fix: Make sure the listener is registered before getSession() (see code example above).

Security Tips

Next Steps

• Roles & Permissions: Create a user_roles table for admin/user distinction
• Profile Page: Display Google profile picture and name in a user profile page
• More Providers: Add Apple, GitHub, or Microsoft as additional login options
• Protected Routes: Secure sensitive areas with an auth guard component

Conclusion

Setting up Google SSO in Lovable takes less than 15 minutes. The biggest effort is in the Google Cloud Console – the Lovable-side integration is trivial thanks to Lovable Cloud. Once configured, your users get a seamless login experience without password frustration.

Start your project with Google Auth now →