Unable to add Firebase Authentication to app with firebase studio app prototyping

General
1

I built a basic solitaire game. now i wanted to include authentication and the ai is just running in circles to make it work.
signing up works fine, there is a user now in the firebase project, but logging in doesnt work.
Gemini is always suggesting something like this:

Okay, the logs confirm the core issue: the AuthContext --- onAuthStateChanged CALLBACK FIRED log is not appearing on the homepage after login. This means the client-side Firebase SDK is not detecting the authenticated session that was successfully established on the server.

Since alert() is blocked in your Firebase Studio environment, we’ll remove that. The critical check remains the firebaseConfig in src/lib/firebase.ts. Even the smallest mismatch (apiKey, authDomain, projectId) between what the client SDK uses and the Firebase project where the server-side authentication occurred will prevent the client from recognizing the session.

I will refine the logging:

  1. In src/lib/firebase.ts, remove the alert() but keep the console.error if the API key looks like a placeholder.
  2. In src/context/AuthContext.tsx, make the logging for onAuthStateChanged very clear, including whether it’s the initial call or a subsequent one.
  3. In src/components/AuthButton.tsx, I’ll re-add a useEffect to directly check auth.currentUser after the component mounts on the homepage, as this provides a direct insight into the state of the auth object itself.
    File changes.

After these changes, please:

  1. Crucially, double-check your firebaseConfig in src/lib/firebase.ts. Compare every single value (apiKey, authDomain, projectId, etc.) with the values from your Firebase project settings (Project settings > General > Your apps > Web app > SDK setup and configuration). If the CRITICAL FIREBASE WARNING appears in your console, that’s your main problem.
  2. Open your browser console.
  3. Attempt to log in.
  4. When you are redirected to the homepage, carefully examine the console logs.

We are looking for:

  • The AuthContext --- INITIAL onAuthStateChanged CALLBACK FIRED --- User: null (or similar) on first load.
  • After login and redirect to homepage:
    • Ideally, AuthContext --- SUBSEQUENT onAuthStateChanged CALLBACK FIRED --- User: <your_user_id>.
    • If not, what do the AuthButton useEffect logs show for auth.currentUser?

This should give us the clearest picture yet. The fact that server-side login is successful and client-side is not picking it up, despite explicit persistence attempts, points very strongly to a client-side initialization/config issue or a very restrictive sandbox environment for persistence.

Then i give it the logs and its the same all over again.
Anyone managed to implement authentication with firebase studio and gemini?

2

Hmmm yes, I have got it working on some of the apps I’ve played around with, so it should be possible. The fact that it created a user seems promising, though. I did have to adjust my Firestore rules to get everything working, but I basically just pasted in the error I was getting to the prototyper chat, and it gave me the rules to paste in. Did you check the console logs like it suggested? Are you seeing any errors at all, or does it just fail to log in when you enter a username and password?

1 Like
3

Hey thank you for your reply.
I havent got to the point to implement firestore yet, just that after “login” the ui button should change and it shows “logout” instead of “login”. So the security rules apply only once i have firestore running i guess?
I have gone through a couple of iterations of checking browser log (using f12) and server/idx output logs (where i could see something is happening during login because i could see my userid), pasting them to gemini. But it just doesnt work.
Gemini strongly thinks that my apikey in the firebaseConfig.ts file is wrong, but i copied it exactly from the settings in the firebase project and how else would i habe been able to create a user in the first place?
I will try to get authentication running on a new project, to see if i can get it working at all.