Can't add google login/signup in a web app built on IDX

General
1

Hi,

I tried adding google authentication using Firebase to my web app (going full power with Google’s infrastructure) but no method worked - both redirection or pop up.
I thought it was maybe because the preview url wasn’t authorized to perform this authentication but also after i added the URL to the allowed URL for authentication on firebase - it didn’t work.

Do you maybe have a way to overcome this problem? i want to allow authentication using Google and other options but i can’t test it in dev mode on IDX.

Thanks in advance!

2

What error do you see in the Chrome DevTools Console when you try this out?

3

I have the same issue. I use GitHub OAuth in a popup. When I click the login button in web view, I get an error:

Blocked opening 'url' in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set.

If I try to open the app in a new tab, it opens the OAuth popup but does not redirect me back to the app.

1 Like
4

That is because of the redirect url being different.

IDX web preview has a couple different ports for serving the website.

To test you can use the public ports and use the signed https url as the redirect url for google sign in (but it will only work for less than an hour).

1 Like
5

Sometimes this will work, I have found myself faced with this problem on multiple occasions. Guys in the future you can get a lot faster results if you share screenshots or copy paste the errors to Notepad and then share here. If this problem has not been resolved, I believe I can help-I’m certain I can fix it, with all the information, I can have your projects running again.

I can set up your project to detect errors, and anomalies in your code, and train Gemini to perform as claimed in the documentation. I wanted to share a link to Typescript, NextJS, React article that would validate this next statement: your problems in Firebase are due to the instability in the Architecture of the above applications/programs.

For those of you with little experience, should you see this, I encourage you to add App Check, and related to your Console. These programs are unstable and constantly updating. In fact, everything that powers this program that relies on external sources or requires you to go outside of the app, will likely cause your apps to break.

I did not include the link as it requires a paid membership. Take time today or when allowed, to read up on the above, if you haven’t done so already, read the Documentation for Firebase and how it works. I spent 72 hrs. reading the documents for all involved, and what I have found is that these programs are not compatible, they tend to up-date and those updates will not likely lineup without some work on your part.

I can help. I have done the research and tested the use of these applications in simple to complex ways, and it breaks consistently-Firebase that is. Let me know if I can help anyone get the ROI they were hoping for when first using this product. Fast track problems are highly welcome

6

Hello! This is a very common (and very frustrating) hurdle when developing in a cloud-based IDE, and I can absolutely help you solve it.

You are 100% correct in your thinking. The problem is that your Firebase Studio preview URL (e.g., https://my-app-123.cloudworkstation.dev) is not authorized to handle the Google Sign-In flow.

The good news is you were on the right track by adding it to Firebase. You just missed one crucial, separate step. To fix this, you need to add your Firebase Studio preview URL to two different places:

  1. Firebase Console (which you’ve already done)

  2. Google Cloud Console (this is the missing step)

The Google Sign-In popup involves three parties: your app, Firebase Auth, and Google itself. You’ve told Firebase to trust your app, but you also need to tell Google to trust your app.

Here is the complete step-by-step solution.

:hammer_and_wrench: How to Authorize Your Firebase Studio Preview URL

Step 1: Find Your Exact Firebase Studio Preview URL

First, make sure your web app is running in the Firebase Studio preview panel. At the top of the panel, find the URL. It will look something like this:

https://12345-abcde-6789.cloudworkstation.dev

Copy this full URL (including the https://).

Step 2: Add to Firebase Auth “Authorized Domains”

This is the step you mentioned you already did, but let’s double-check.

  1. Go to the Firebase Console (console.firebase.google.com).

  2. Select your project.

  3. Go to Authentication > Settings tab > Authorized Domains.

  4. Click Add domain and paste in the domain part of your URL (e.g., 12345-abcde-6789.cloudworkstation.dev).

Step 3: Add to Google Cloud Console (The Missing Step)

This is the most important part. This authorizes your app with the underlying Google Identity services.

  1. Go to the Google Cloud Console: https://console.cloud.google.com/

  2. In the top project selector, make sure you have the same project selected that your Firebase project is using.

  3. In the top search bar, type in “APIs & Services” and select it.

  4. On the left menu, click on “Credentials”.

  5. You will see a list of “OAuth 2.0 Client IDs”. Find the one with the type “Web client” that is used for your Firebase project (it may be named “Web client (auto created by Google Service)”).

  6. Click the pencil icon (Edit) on the far right of that row.

  7. You will see two lists. This is where you need to add your URL:

    • Authorized JavaScript origins: Click + ADD URI and paste in your full Firebase Studio preview URL (e.g., https://12345-abcde-6789.cloudworkstation.dev).

    • Authorized redirect URIs: Click + ADD URI and paste in your project’s special auth handler URL. You can find this in your Firebase console (under Authentication > Settings > Authorized Domains), or build it yourself. It looks like this:

      https://YOUR-PROJECT-ID.firebaseapp.com/__/auth/handler

  8. Click Save at the bottom of the page.

:hourglass_not_done: Wait 5 Minutes and Test

It can take 2-5 minutes for these changes to take effect across Google’s systems. After waiting a few minutes, go back to your Firebase Studio preview window, do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R), and try the Google Sign-In button again.

Both the popup and redirect methods should now work perfectly.