Fixing Firebase Google sign-in in Lovable, Bolt and Cursor apps

Updated Oct 27, 2026 · Pewterkit Guides

An AI builder can write Firebase sign-in code, but it can't change your Firebase project settings, so the usual culprits are outside the code: the preview or published host isn't an authorized domain, the Google provider isn't enabled, or the config points at the wrong project. Run the checklist below, test outside the embedded preview, then paste the prompt at the end into your AI tool so it fixes the code to match.

First, check that your app really uses Firebase

Neither Lovable nor Bolt defaults to Firebase, so "Google login" may have been wired to something else:

  • Lovable: its built-in backend (called Cloud in parts of the product) includes authentication and "utilizes Supabase's open-source foundation." Lovable's managed Google sign-in only works with that built-in backend; for anything else, its docs say Google auth "requires a manual setup outside of Lovable."
  • Bolt.new: Bolt Cloud creates a Bolt Database automatically when a project needs one, and its docs note user authentication "may not be added automatically." Supabase is an option you choose when starting a new project on Pro or Teams plans.
  • Cursor: it's an editor; it uses whatever stack your code uses.

Search the code for firebase/auth. If you find initializeApp, getAuth and signInWithPopup or signInWithRedirect from firebase/auth, this page applies. If sign-in goes through the builder's own backend instead, fix it in that backend's settings, not in Firebase.

Why Firebase Google sign-in fails in AI-built apps

  1. The host isn't authorized. Firebase only allows OAuth from domains on your project's Authorized domains list, and errors with auth/unauthorized-domain otherwise. Builder apps run on several hosts: an editor preview, a shareable preview link, the published address (your-app.lovable.app, *.bolt.host) and any custom domain. With Cursor, the app runs on localhost, which projects created after April 28, 2025 no longer authorize by default.
  2. The Google provider is off. The AI can write sign-in code but can't flip console switches. Result: auth/operation-not-allowed ("The given sign-in provider is disabled for this Firebase project").
  3. Placeholder or mismatched config. "YOUR_API_KEY" left in, or values copied from a different Firebase project, gives auth/invalid-api-key or sign-ins landing in the wrong project.
  4. Popups inside an embedded preview. If a preview is shown in a sandboxed iframe without allow-popups, window.open() fails silently, so clicking the button appears to do nothing.
  5. Redirect flow on a non-Firebase host. If the AI chose signInWithRedirect(), Firebase's redirect best practices say apps not served from firebaseapp.com need extra setup on Chrome M115+, Firefox 109+ and Safari 16.1+. On builder hosts, signInWithPopup() is the simpler choice (popup or redirect?).

Step-by-step fix

1. Collect every host your app runs on

Tool Hosts to collect (as of Oct 2026)
Lovable Click Open in new tab on the preview and copy the host from the address bar (each draft has its own preview address); your published your-app.lovable.app; any custom domain
Bolt.new Open the preview in a new tab and copy its host; your published something.bolt.host (shown under Publish, renameable via Edit domain); any custom domain
Cursor localhost (and 127.0.0.1 if you open the app that way); later, your production domain

Copy the host only: no https://, no port, no path.

2. Configure Firebase

  1. Firebase console > Security > Authentication (older guides: Build > Authentication; the Firebase docs say Security as of Oct 2026) > Sign-in method > enable Google > Save.
  2. Same page > Settings tab > Authorized domains > Add domain for each host from step 1.
  3. Project settings > Your apps > copy the web app's config object.

Firebase's web config is not a secret; Firebase says API keys for Firebase services are OK to include in code. If your project uses Vite (look for a vite.config.* file), only VITE_-prefixed environment variables reach browser code, and they're baked in at build time.

3. Use a minimal, current sign-in module

// src/lib/firebase.js
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider, signInWithPopup, signOut, onAuthStateChanged } from 'firebase/auth';

const firebaseConfig = {
  apiKey: '...',
  authDomain: 'YOUR-PROJECT.firebaseapp.com', // keep the default
  projectId: 'YOUR-PROJECT',
  appId: '...',
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

export async function signInWithGoogle() {
  try {
    const result = await signInWithPopup(auth, new GoogleAuthProvider());
    return result.user;
  } catch (error) {
    console.error(error.code, error.message); // e.g. auth/unauthorized-domain
    throw error;
  }
}

export const signOutUser = () => signOut(auth);
export const watchUser = (callback) => onAuthStateChanged(auth, callback);

Call signInWithGoogle() directly from the button's click handler. A popup has to be triggered from a UI event handler, and that user activation expires after a timeout, so don't put slow awaited work in front of it.

4. Test outside the editor

Open the preview in its own tab (or open the published URL), click the button, pick an account. Fix any error code you see before asking the AI for more changes.

5. Paste this prompt into Lovable, Bolt or Cursor

Fix Google sign-in in this app. Requirements:
1. Use Firebase Authentication with the modular Firebase JS SDK (v9+ syntax: imports from "firebase/app" and "firebase/auth"). Do not switch to another auth provider or backend.
2. Initialize Firebase exactly once in a single module (e.g. src/lib/firebase.*) and export `auth`. Remove any duplicate initializeApp calls.
3. Use this config and keep authDomain as "<YOUR-PROJECT>.firebaseapp.com": <PASTE CONFIG OBJECT HERE>
4. Sign in with signInWithPopup(auth, new GoogleAuthProvider()) called directly inside the button's click handler. Do not use signInWithRedirect.
5. Track the user with onAuthStateChanged and show signed-in / signed-out UI from it.
6. In the catch block, log error.code and show a short message in the UI. Do not swallow errors.
7. Do not change anything in the Firebase console and do not invent environment variables; if a value is missing, ask me.
After the change, list the files you edited.

For Cursor, you can save the same rules as a project rule in .cursor/rules/firebase-auth.mdc (or in AGENTS.md) so later edits keep them. Firebase also publishes an MCP server and a Cursor Marketplace plugin; its firebase_get_sdk_config tool returns your registered app's config, which avoids copy-paste mistakes.

How to confirm it worked

  1. The Google account chooser opens in a popup, closes after you pick an account, and your UI switches to signed in.
  2. Reload: onAuthStateChanged reports the same user without another sign-in.
  3. In the Firebase console, your Google account appears on the Authentication Users tab.
  4. Repeat on the published URL and each custom domain.

FAQ

Does Lovable support Firebase Google login?

Lovable's documented Google sign-in runs on its built-in backend, which is based on Supabase. You can still have Lovable write Firebase code, but you set up the Firebase project, provider and authorized domains yourself.

Does Bolt.new use Supabase or Firebase for auth?

Bolt's docs say Bolt Cloud creates a Bolt Database by default and authentication may not be added automatically; Supabase is an opt-in choice for new Pro or Teams projects. Firebase isn't mentioned, so Firebase Auth means adding the SDK and configuring the Firebase console yourself.

Why does clicking "Sign in with Google" do nothing in the preview?

A preview shown in a sandboxed iframe without allow-popups makes window.open() fail silently. Open the preview in a new tab or test the published URL.

Is it safe to leave the Firebase config in code the AI generated?

Firebase says API keys for Firebase services are OK in code; what protects your data is Security Rules and API key restrictions. Never let the AI put service-account keys or other server secrets in frontend files.

How do I set up Firebase in Cursor?

Write the code with the modular SDK, run the app on localhost, and add localhost to authorized domains. Optionally install Firebase's Cursor Marketplace plugin, which configures the Firebase MCP server.

Sources

  1. Lovable Docs: Built-in backend
  2. Lovable Docs: Authentication
  3. Lovable Docs: Google authentication
  4. Lovable Docs: Preview
  5. Lovable Docs: Glossary
  6. Bolt Help Center: Database
  7. Bolt Help Center: Publish
  8. Bolt Help Center: Preview issues
  9. Cursor Docs: Rules
  10. Firebase: Firebase MCP server
  11. Firebase: Integrate Firebase services using AI assistance
  12. Firebase: Authenticate Using Google with JavaScript
  13. Firebase: Authenticate with Firebase Using Email Link in JavaScript (authorized domains path, localhost default)
  14. Firebase: Best practices for using signInWithRedirect on browsers that block third-party storage access
  15. Firebase: Learn about using and managing API keys
  16. Firebase: Get Started with Firebase Authentication on Websites
  17. Firebase JS SDK source: auth error messages
  18. MDN: Transient activation
  19. MDN: The Inline Frame element (sandbox attribute)
  20. Vite: Env Variables and Modes

How this page was made: drafted with AI from the sources listed, reviewed by Pewterkit. Docs checked Oct 27, 2026. Spotted something out of date? Tell us.

Related guides