Add Google authentication to your app

1. 1

   Decide if you want Lovable to manage the Google setup for you, or if you want to use your own Google Cloud account.

   Lovable managing it is simpler and recommended unless you need specific control over branding or advanced settings.

2. 2

   If you chose 'Managed by Lovable', ask Lovable to add Google login to your app.

   This automatically sets up Google authentication in the background and adds the necessary 'Sign in with Google' button to your app.

3. 3

   If you chose 'Your own credentials', first go to Google Cloud Console to create an OAuth Client ID of type 'Web application' and configure an OAuth consent screen.

   This gives you control over your app's branding and security settings within Google's system.

4. 4

   If using 'Your own credentials', go to 'Cloud tab → Users → Auth settings → Google' in Lovable, enable Google sign-in, select 'Your own credentials', and enter your Client ID and Client secret from Google Cloud.

   This connects your Lovable app to your specific Google Cloud project for authentication.

5. 5

   If using 'Your own credentials', add all the redirect URLs Lovable shows you (like your app's default and custom domains) to the 'Authorized redirect URIs' section in your Google Cloud OAuth client settings.

   This tells Google where to safely send users back to after they've approved access to your app.

6. 6

   If using 'Your own credentials', return to Lovable's 'Cloud tab → Users → Auth settings → Google' and select the redirect URIs that you have authorized in Google Cloud.

   This confirms to Lovable which domains are allowed for your Google sign-in flow.

7. 7

   If using 'Your own credentials', save your Google sign-in settings in Lovable.

   This applies all the changes you've made.

8. 8

   If using 'Your own credentials', ask Lovable to add the Google sign-in UI to your app.

   This will add the 'Sign in with Google' button to your app, using your custom Google OAuth settings.

9. 9

   Test the Google sign-in flow in your app.

   You need to make sure the 'Sign in with Google' button appears, users are redirected correctly, the consent screen works as expected, and users can successfully sign in and out.

Add Google login to my app so that users can sign in with their Google account.

OAuth

A secure way for apps to get limited access to user information from services like Google, without needing the user's password. It's like giving a valet a key to park your car, but not your house keys.

Client ID

A public identifier for your app, like a name tag, that Google uses to recognize your application.

Client secret

A secret key, like a password, that your app uses to prove its identity to Google. It must be kept confidential.

Redirect URLs

Specific web addresses where Google sends users back to after they've successfully logged in or approved your app's access. These URLs must be pre-approved by Google for security.

Consent screen

A page shown by Google to users, asking if they agree to let your app access certain information from their Google account (like their email or basic profile).

OAuth scopes

Specific permissions your app requests from a user's Google account, such as access to their email address or basic profile information. It defines what data your app can see or do.

• Using Google authentication without Lovable's built-in backend (Cloud) requires a manual setup outside of Lovable, which is not covered by this guide.
• Not using 'Managed by Lovable' when you don't need custom branding or advanced OAuth scopes, making the setup more complex than necessary.
• Forgetting to add all required redirect URIs to Google Cloud Console, or having them not match exactly (including scheme, domain, path, and trailing slashes), which causes sign-in errors.
• Not selecting the correct authorized redirect URIs in Lovable after configuring them in Google Cloud.
• Using the wrong OAuth client type (e.g., mobile or desktop instead of 'Web application') in Google Cloud.
• Not configuring the OAuth consent screen correctly in Google Cloud, or not adding your account as a test user if the app isn't published, leading to consent screen issues.