Firebase auth "auth/operation-not-supported-in-this-environment"

[AmitMY]

[REQUIRED] Describe your environment

• Operating System version: Windows 10
• Firebase SDK version: ^4.11.0
• Firebase Product: auth

[REQUIRED] Describe the problem

On the stencil environment, doing:

import firebase from 'firebase';

firebase.initializeApp({ ... config ... });
firebase.auth().signInWithPopup(new firebase.auth.GoogleAuthProvider());

causes:

code: "auth/operation-not-supported-in-this-environment"
message: "This operation is not supported in the environment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled."

The environment is HTTP, on localhost, and Storage is defined.

Relevant Code:

See: https://github.com/AmitMY/firebase-stencil-issue
The last commit (firebase issue) is the code I added to the starter.

[bojeil-google]

Please provide information about your environment. For Ionic mobile apps, you need to follow the documentation provided at: https://firebase.google.com/docs/auth/web/cordova

[AmitMY]

As mentioned, my environment is a stencil server, on Windows 10.

Chrome: "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36"

THIS IS NOT CORDOVA, nor is it really ionic. it is a new thing being released soon.

[bojeil-google]

I see. Unfortunately, I have no knowledge of this new environment. If it does not support web storage (localStorage or indexedDB), is not an http/https environment or does not support DOM, then operations like signInWithPopup|Redirect will not work. This currently only works in a browser, chrome extension and Cordova/Ionic environment. What you can do instead is use an OAuth library that is supported by this environment to get an OAuth access token and then use APIs like
firebase.auth().signInWIthCredential(firebase.auth.FacebookAuthProvider.credential(fbAccessToken));
to complete sign-in to Firebase.
You can label this as a feature request to support this new environment.

[AmitMY]

I might have been unclear, let me rephrase.

• The environment is an http-server serving static files from local disk, much similar to http-server
• The app is opened in Google Chrome (an environment that does support all of the above), in http protocol, on http://localhost:3333

It shouldn't be too different than any HTTP server, and I would really appreciate if you just clone the repository and npm i && npm start to see what I mean.

[AmitMY]

[Scottoca]

I am getting this error, but I am testing something work. As it stands I literally just wrote a HTML file with JS. The var config and <script> info has been copied from the firebase console 'add firebase to your webapp'. I don't get, a few week ago this worked perfectly in testing.

[NessD1]

I get the same error, but I'm using Vue with firebase authentication, this occurs when I use:

const provider = new firebase.auth.GoogleAuthProvider()
firebase.auth().signInWithPopup(provider)

-> Sorry the problem is that I don't serve the HTML page. In my case, I used "Preview on Web Server" extension on VS Code and works great.

[grodgersAtlas]

I also just received this error on an iOS device running a Progressive Web App built using Stencil. Specifically, the app does work if running directly in the browser, but once the app is saved to the "Home Screen" (one of the main benefits of building a PWA), that's when the problem occurs. I'm pretty sure in my case, then, that it has something to do with how iOS runs the PWA when not in the browser.

[SouradeepMisra]

I also faced this issue. I faced this issue because of plugin version. try to update your 'webview' plugin version. It is work for me.

[SouradeepMisra]

I also faced this issue. I faced this issue because of plugin version. try to update your 'webview' plugin version. It is work for me.

[mblackbourne]

I get the same error. I a running windows 10, building in VS code and using Electron.

`function googleLogin(){
const provider = new firebase.auth.GoogleAuthProvider();

firebase.auth().signInWithPopup(provider)
    .then(result => {
        const user = result.user;
        document.write(`Hello ${user.displayName}`);
        console.log(user)
    })
    .catch(console.log);

}`

This is the function for the button, it operates from a different JS file, than where I have the app creds, however that should not matter.

[rthm93]

Any updates on this? I am facing this on Microsoft Edge InPrivate mode as well.
I am using firebase javascript sdk version 5.7.2

[bojeil-google]

The Microsoft edge private mode issue is different than the other environment issues. For popup/redirect flows, 3rd party cookies/data have to be enabled. Otherwise, the operation will fail. This is true for Safari private mode browsing, and other private mode browsing. With the limited information provided, I speculate this is the cause of the error.

[MeghaB]

Closing - no additional information provided since @bojeil-google's last update. Please re-open if there are specific repro steps.