How to Add Google Login to a Lovable Application

For a Lovable Cloud app, ask Lovable to add Google sign-in and enable Google in the Users authentication settings. The default managed option does not require you to create a Google Cloud OAuth client. Use your own credentials when you need to control Google consent-screen branding or manage the OAuth configuration yourself.

What you will learn and need

You will choose the right setup, add the button and test the return to your app. You need a Cloud-backed project and a Google account for testing. For a new project, Join Lovable. An external backend has its own provider configuration; do not apply Cloud’s managed settings to it.

1. Keep the existing account flow

Google is an additional sign-in method, not a reason to remove email login, recovery or account settings. Define where new users should land and what returning users should see. If you require terms acceptance, plan it as an explicit app registration step; Google’s permission screen is not acceptance of your website’s terms.

2. Add Google and enable the provider

Add Continue with Google using Lovable Cloud’s supported authentication flow. Keep existing email login and sign-out working. Follow Google’s sign-in branding. Return to a public same-origin callback or homepage, wait for the authenticated session, then continue to the intended private page. Handle cancellation and errors clearly. Do not use a private dashboard as the OAuth callback.

Open More → Users and Google authentication settings. The documentation may label the path Settings → Google; some interfaces use Auth settings. Confirm Google is enabled and choose the managed option for the simplest setup.

3. Use your own credentials only when needed

For consent-screen control, choose Your own credentials in the Google settings. In your own Google Cloud project, configure the OAuth consent screen and create a Web application OAuth client. Copy the exact callback or redirect URI provided by Lovable into Google’s authorized redirect URIs. Enter the client ID and secret in Lovable’s secure provider settings and save.

Do not confuse the callback URI with an authorized JavaScript origin: an origin is the scheme and hostname, while the callback can include a path. Use the actual values shown in your configuration, not an example backend URL from someone else’s tutorial. Never put a client secret in frontend code or project chat.

4. Verify both preview and published sign-in

Click Continue with Google, choose an account and confirm you return with a usable session. Open a private page, reload it, then sign out and check access is denied. Also test a cancelled Google flow and the published custom domain. A button reaching Google does not prove the callback successfully signs the user into your app.

Troubleshooting and FAQs

Google says the redirect URI does not match

Compare the full configured callback with Google’s authorized URI: scheme, host, path and trailing slash must match the required value. Check you edited the OAuth client actually in use.

The provider is unsupported or disabled

Confirm Google is enabled in the project’s authentication settings, not just visible as a button.

Will Google merge with an existing account?

Do not assume accounts with different email addresses merge. Test the supported linking flow and returning-user behavior without creating an unintended second account.

Does managed login let me edit Google branding?

For control of your own consent screen, use your own OAuth credentials. Keep that distinction separate from how the app’s sign-in button looks.

Official sources and next steps

Read Google authentication, email authentication and Cloud. Continue with the live account and private-data tutorials below, then practise on a remixable project.