Add Google authentication to your app

1. 1

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

   Lovable-managed is simpler and recommended unless you need specific control over branding or advanced settings. Your own credentials give you full control over the Google consent screen and custom settings.

2. 2

   If you chose 'Managed by Lovable', paste the provided prompt into your Lovable project chat.

   This tells Lovable to automatically set up Google authentication, including the backend configuration and user interface components.

3. 3

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

   This creates the necessary credentials in Google Cloud that your Lovable app will use for authentication.

4. 4

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

   This connects your Lovable app to the Google Cloud credentials you just created.

5. 5

   If you chose 'Your own credentials', add every redirect URI displayed in Lovable (e.g., your default Lovable domain, custom domains) as an 'Authorized redirect URI' in your Google Cloud OAuth client settings.

   This tells Google where it's allowed to send users back to after they approve access, preventing errors.

6. 6

   If you chose 'Your own credentials', return to Lovable, select the redirect URIs you just authorized in Google Cloud, and click 'Save'.

   This confirms to Lovable which domains are authorized in your Google OAuth client, ensuring the sign-in process works correctly.

7. 7

   If you chose 'Your own credentials', paste the provided prompt into your Lovable project chat to add the Google sign-in button to your app.

   This generates the user interface for Google sign-in using your custom credentials.

8. 8

   Test the Google sign-in flow in your app to ensure the button appears, users are redirected to Google, they can sign in, and return to your app successfully.

   This verifies that Google authentication is working as expected before your app goes live.

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

OAuth 2.0

A secure way for apps to get limited access to a user's information from another service (like Google) without needing their password. It's like giving an app a temporary key to a specific part of your Google account.

Client ID

A public identifier for your app, telling Google which app is asking for access.

Client secret

A secret key that only your app and Google know, used to prove your app's identity and keep communications secure.

Redirect URLs

Specific web addresses where Google sends users back to after they've successfully signed in or approved access to their account. These must be pre-approved by Google.

Consent screen

The page Google shows users asking them if they agree to let your app access certain information from their Google account (like their email address).

OAuth scopes

Specific permissions your app requests from Google, like access to a user's email address or basic profile information. You can ask for more specific data if needed.

• Using Google authentication without Lovable's built-in backend (Cloud) requires a manual setup outside of Lovable, which is not covered by this guide.
• For 'Your own credentials' setup, failing to add every redirect URL from Lovable to your Google Cloud 'Authorized redirect URIs' will cause sign-in errors.
• For 'Your own credentials' setup, not matching the redirect URIs exactly (scheme, domain, path, and trailing slashes) between Lovable and Google Cloud will cause errors.
• Using an incorrect OAuth client type (e.g., Mobile or Desktop instead of Web application) in Google Cloud for 'Your own credentials' setup will prevent authentication from working.
• For 'Your own credentials' setup, forgetting to select the authorized redirect URIs in Lovable after adding them in Google Cloud will cause issues.
• Not configuring the OAuth consent screen correctly in Google Cloud or adding test users for an unpublished app can lead to consent screen issues.