Google Authentication pop-up is blocked by the browser because the 'allow-popups' request header is missing

[Asiyil-K-Alaswad]

Can we access your project?

• [X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

• during Run mode
• When Trying to Sign up / Sign in using google authentication (through firebase of course)
• the google sign in pop-up does not show
• an informaitonal message pops up from the bottom side of the app. Which reads : "Error: Unable to establish a connection with the popup. It may have been blocked by the browser"

Expected Behavior

• pop-ups are allowed for all sites in the browser's settings
• the debugging, Run mode and other related urls are all added to the autherized domain in the firebase authentication settings
• an error message is printed in the console. It reads : " locked opening *Request Url* in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set. "

Steps to Reproduce

1. Create Blank Project
2. follow the Firebase connection steps provided by Flutterflow
3. setup and enable authentication in firebase and flutterflow
4. create a button
5. add the 'create account' or 'log in' authentication action to the button
6. run program and click the button

Reproducible from Blank

• [X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITEelsn1z4pNj7xZ1ZP6Y/lFgQMxQUB+bZ0vlO1FGE0YNb2uBJoteMnuaXddUt+kelZHMFSJhmUGpsLuhobDJ8E6OTStY6V607tTFj3weD2iVbaRELuKY3FRHdpMBUy0yruFnxQnGOpYWHdn73GLcq3qNleeY8aSfxBlZ7vfcPo=

Visual documentation

Environment

- FlutterFlow version: v4.1.60+ released June 14, 2024
- Flutter version is 3.19.1
- Platform: Web
- Browser name and version: Google Chrome Version 126.0.6478.62
- Operating system and version affected: Windows 10 64 bit version 22H2 (OS Build 19045.4529)

Additional Information

additional triage I have done :

• tried on different browsers on the same machine : chrome , opera and firefox
• tried on a different machine ( windows 11 )

[Sejal-svg]

I am also facing similar issue . Did you find any solution ?

[Asiyil-K-Alaswad]

I am also facing similar issue . Did you find any solution ?

No. it is still persistant.

[mlagus]

I have the same issue Already added all urls to allow in the browser and it still persists

[paulperez-dev]

Hi @Sejal-svg @Asiyil-K-Alaswad. Can you please share a capture of how these settings looks like?

[mlagus]

[paulperez-dev]

@mlagus which browser are you using?

[mlagus]

@paulperez-dev which browser are you using?

Chrome Version 125.0.6422.142 (Official Build) (arm64)

[paulperez-dev]

@mlagus please click on 'Site settings', and share a capture of the configuration.

[mlagus]

@paulperez-dev why? what u wanna see? The list is long in there

[paulperez-dev]

@mlagus the popup permissions specifically for the FF site.

[mlagus]

@paulperez-dev the popups and redirects are allowed

[mlagus]

In run mode i get this wierd icons generated. In test mode ther look correct with apple and google logo. Dont know if its connecting to the same problem

[Asiyil-K-Alaswad]

Hi @Sejal-svg @Asiyil-K-Alaswad. Can you please share a capture of how these settings looks like?

[mlagus]

I rebooted computer, tried to access flutter flow. it was just black! I emptied cashe and reloaded and got this in console "Third-party cookie will be blocked in future Chrome versions as part of Privacy Sandbox." I found this thread: https://stackoverflow.com/questions/78011724/warning-third-party-cookie-will-be-blocked-learn-more-in-the-issues-tab Could it be belonging to that problem?

[mlagus]

I got this from google console: "

The error "Blocked opening ... in a new window because the request was made in a sandboxed frame whose 'allow-popups' permission is not set" indicates that your web application is trying to open a popup window (likely for authentication with Firebase) from within an iframe or a context that has sandbox restrictions. Browsers enforce these restrictions to prevent potentially malicious behavior from embedded content.
Here's a breakdown of the issue and how to fix it:
Understanding the Error
Sandboxed Frames: When you embed content in an iframe, you can apply the sandbox attribute with various restrictions. One of these restrictions is allow-popups, which controls whether the iframe is allowed to open new windows.
Security Measure: This is a security feature to prevent embedded content from opening unwanted popups, which could be used for phishing or other malicious purposes.
Solutions
Adjust Sandbox Attribute: If you control the iframe where your code is running, modify the sandbox attribute to include allow-popups:

<iframe src="your_app_url" sandbox="allow-scripts allow-same-origin allow-popups"></iframe>

Open Popup from Top-Level Window: If you can't modify the sandbox attribute, restructure your code to initiate the popup opening from the top-level window (the main browser window, not within an iframe). This might involve using postMessage communication between the iframe and the parent window.
Alternative Authentication Methods: Consider using authentication methods that don't rely on popups, such as:
Redirect-based flow: Firebase Authentication supports redirect-based flows where the user is redirected to a login page and then back to your application after authentication.
In-page authentication: Implement a login form directly within your application's page.
Code Analysis
Looking at your provided code snippet, the issue likely stems from the window.open call. If this code is executed within a sandboxed iframe without the allow-popups permission, the browser will block the popup.
Debugging Tips
Check Console: Open your browser's developer console to see if there are any additional error messages or warnings related to the popup blocking.
Inspect Sandbox Attribute: If your code is within an iframe, inspect the iframe element in the developer tools to see if the sandbox attribute is present and what restrictions are applied.
Important Considerations
User Experience: Popups can be disruptive to the user experience. Consider whether alternative authentication methods might provide a smoother flow.
Security: Always prioritize security when implementing authentication. Carefully evaluate the risks and benefits of different approaches.
If you can provide more context about how your application is structured (e.g., whether it's embedded in an iframe, how the authentication flow is initiated), I can give more specific guidance.
Data used to understand this message

[mlagus]

Jump in here and upvote this problem https://community.flutterflow.io/ask-the-community/post/unable-to-authenticate-using-google-hYFpowS2i2LRDzx

[mlagus]

@Asiyil-K-Alaswad Have you been able to fix it?

[Asiyil-K-Alaswad]

@Asiyil-K-Alaswad Have you been able to fix it?

No luck. The only other thing I haven't tried is running it on a safari browser to see if the problem is solely from chrome, but I don't have access to a Mac/IOS device.

[paulperez-dev]

Hi @Asiyil-K-Alaswad! Can you please share a capture of the domains added to Firebase Auth?

[Asiyil-K-Alaswad]

@paulperez-dev

[mlagus]

@paulperez-dev i have the same settings as @Asiyil-K-Alaswad its all set according to instructions. Why does FF test mode work but not run mode?

[mlagus]

Its work fine with testing it here, so it must be specific to flutter flow or firebase settings https://gal-demo.withgoogle.com/

[karolpaw85]

I also have the same issue but in RUN mode. When I use desctop Flutterflow it works. A bit frustrating... BTW, it was working before and one day it stopped... I do not recall any changes I made to my system, browser or project.

[Tyg-g]

This issue probably has to do with that the permissions in an <iframe> has to be explicitly allowed in HTML using the attribute allow='...'. The site settings alone are not enough. The same thing why the camera and microphone don't work in debug mode.

[Asiyil-K-Alaswad]

@Tyg-g Yeah it's definitely that. The issue is controlling an elements attribute in FlutterFlows UI is not really something the developer could do.

[abhibalani]

Having the same issue. Google auth pop up not showing up.

In test mode it says, this url is not added as authorized domains which it is. And in run mode it says unable to establish connection with pop up, browser may have blocked the pop up.

Any work around for this?

I want to use razorpay. For razorpay FF required firebase auth.

[karolpaw85]

Well. the problem is that for the last 4 months i was using RUN mode about 200 times to test my app, and it was working. and one day it stopped. I did not change anything in login page at all... Although there was a new flutter update... So concluding, is there anything I can do solve it or shall we wait for FF people to fix it?

[Tyg-g]

In test mode it says, this url is not added as authorized domains which it is. And in run mode it says unable to establish connection with pop up, browser may have blocked the pop up.

Any work around for this?

Test mode: you have to add the URL from the