Angularfire: auth.login() Error "location.protocol" must be http or https

[Chuckv01]

auth.login() has an error when attempting to authenticate with Google or Facebook on an iOS or Android device using Cordova.

Here is a code sample:

this.af.auth.login({
  provider: AuthProviders.Google,
  method: AuthMethods.Popup
}).then((value) => {
  //success
}).catch((error) => {
  console.log(error);
});

Running version 2.0.0-beta.3-0930330 of angularfire2.

When run in a Cordova app the error callback will be called with this message:

[quentinchap]

Same that #270

[jeffbcross]

Yikes, seems like signInWithPopup() has the same protocol check as getRedirectResult(). https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signInWithPopup

I'm a little out of my depth here on what the right way to solve this is...

[jeffbcross]

@davideast can you ask around about this?

[quentinchap]

signInWithRedirect seems to have the same issue than signInWithPopup()

[quentinchap]

Same issue with credential method and cordova-plugin-facebook4 (http://stackoverflow.com/questions/37768313/using-firebase-auth-with-facebook)

 if (this.platform.is('ios') || this.platform.is('android')) {

        Facebook.login(['public_profile']).then(function (result) {

          console.log("Facebook success: " + JSON.stringify(result));
           authGlob.login(result.authResponse.accessToken, { provider: AuthProviders.Facebook })
            .then((success) => {
              console.log("Firebase success: " + JSON.stringify(success));
            })
            .catch((error) => {
              console.log("Firebase failure: " + JSON.stringify(error));
            });
        })

Facebook success: {"status":"connected","authResponse":{"accessToken":"...","expiresIn":"5110794","session_key":true,"sig":"...","userID":"..."}}

app.bundle.js:500 Firebase failure: {"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 or https."}

[quentinchap]

After some correction I find a work around. I propose some add to the documentation #287

[jlsuarezs]

Any way to make it work?
Thank you.

[ciekawy]

looks like some PR is needed for either firebase 3 or angularfire2. also seems that the difficulty now is to specify the area of responsibility which is now a pingpong between firebase, angularfire2 and also the ionic. Actually I'm little confused which is (and if there is any) github repo for JS firebase 3 as firebase package on npmjs.com points to firebase.google.com

So as a first step it would be great to have clear if it is acceptable that i.e. file:// protocol is supposed to be handled, and then if the patch is required on the firebase or angularfire2.

Any suggestions or even better PRs will be very valuable.

[ciekawy]

does it make sense to add some Help Wanted! or other label to raise the importance/severity? looks like this is actually a blocker for ionic/phonegap apps.

[jlsuarezs]

Yes, you're right.

Any news about this?

[Chuckv01]

I haven't seen any activity on this in awhile. I don't know if cordova support is a priority for the angularfire team at this point.

[ciekawy]

I guess that it's not about the cordova but about a use case of app loaded from file - there is rather no reason why it should not be supported. And also this was working with firebase 2 (togheter with i.e. https://github.com/ciekawy/angular2-firebase) so this is kind of regression for people moving to new recommended firebase 3 SDK

[idesignpixels]

Since upgrading to firebase 3 in my ionic app I have had many major breaking issues I'm about a month behind :( are there any temporary fixes?

[cnothegger]

I don't know who is developing AngularFire2 but the problem is on the Firebase side.

I contact the Firebase team and this the answer:
Are you using popup / redirect sign in methods in Firebase 3.x.x? If so, these methods are currently not supported in native Ionic/Cordova apps. Sorry about that.
As a workaround, I recommend to use a library for OAuth such as ngCordova(in Cordova and Ionic apps) and then use auth().signInWithCredential(...) to sign your users in.

[idesignpixels]

@cnothegger Could you elaborate on the fix, I don't understand how using sign in with credentials can login oauth firebase users. Is this something that needs to be pushed to ionic to fix? thanks

[aaronksaunders]

I think this thread is mixing issues, you can login to firebase using a plugin to get the oauth credentials and pass them through. Yes it is as neatly integrated in to angular fire, but there is a work around

[jlsuarezs]

Solved using Firebase only.

Check this:
Advanced: Handle the sign-in flow manually
https://firebase.google.com/docs/auth/web/facebook-login

[jgw96]

This seems to be fixed in a cordova environment (specifically Ionic 2) with angularFire2@next but i can't seem to get any auth information. If you subscribe to AngularFire.auth() it never actually fires when the user logs in. Works fine in Chrome. Im guessing this issue is related to this line https://github.com/angular/angularfire2/blob/master/src/auth/auth.ts#L45. Unfortunately that looks like the line that fixed auth.login() not working.

[aaronksaunders]

@Lindstrom1989 @jgw96 This solution using ionic-native facebook plugin to get the accessToken, creates the credential and then successfully logs in using angularFire2
https://github.com/aaronksaunders/basicaf2

[nelsonad]

@aaronksaunders Thank you for the complete working project!

I kept getting typescript build errors til I saw your declare var firebase: any trick.

[mateusmcg]

@aaronksaunders thanks for the solution, but in my project here i'm not able to use facebook auth only the google one.

So i need to use google authentication that firebase offers with ionic2.
There is a workaround for that? (i'm getting that "location.protocol" must be http or https error on login)

[Chuckv01]

@mateusmcg I believe you can use the Google Plus plugin for Google oAuth then pass the token to FB the same way: http://ionicframework.com/docs/v2/native/google-plus/

[mateusmcg]

@Chuckv01 thx for the quick reply.

I was not able to make this plugin working with ionic 2. I've only found examples that uses angular 1 not angular 2, so i was not able to import the right module to get the plugin to work.

If someone manage to get ionic2 working with angularfire2/firebase google auth and could post a little piece of code, i would appreciate it

[gvkhna]

We ended up using this code:

https://github.com/timdream/google-oauth2-web-client/blob/master/src/google-oauth2.js

NOTE: we had to change the way the popup passes the token back to the calling context, to use localStorage instead

It does the popup to get the access token.

At which point we pass to firebase like so (after validation of the token at: https://www.googleapis.com/oauth2/v3/tokeninfo?access_token=)

const googleConfig = {
  method: AuthMethods.OAuthToken,
  provider: AuthProviders.Google
};
const creds = (firebase.auth.GoogleAuthProvider as any).credential(null, token);
this.af.auth.login(creds, googleConfig)

ALSO: add this to your providers to get rid of the 'location.protocol must be http'

import { WindowLocation } from "angularfire2";

provide(WindowLocation, {
    useValue: {
      hash: '',
      search: '',
      pathname: '/',
      port: '',
      hostname: 'localhost',
      host: 'localhost',
      protocol: 'https',
      origin: 'localhost',
      href: 'https://localhost/'
    }
  })

NOTE: have to run npm install angularfire2@next --save-dev

[ciekawy]

also here similat approach using plugins for facebook and google and also pure web google login option
https://github.com/rodrigoreal/ionic2-angularfire-login

[srikantk]

I found a quicker approach, used authwithredirect apis from firebase and local-webserver plugin from cordova this works on IOS.

[nunoarruda]

Still an issue in an Ionic 2 app, even with npm install angularfire2@next --save:

[RubnC]

Some news?
For me it's working fine on Chrome but not on android neither ios.

[katowulf]

Since this is an issue with the Firebase Authentication SDK, and not related to the AngularFire2 project, the best workaround will continue to be using native auth methods and redirect, as @ciekawy and @gauravk92 have illustrated.

[richarddiogo]

Some news?

[valterh4ck3r]

Some news?

[hernanbruno97]

some news?

[valterh4ck3r]

I sent a email from support firebase,

They answer me with the email :

When you're building an ionic/cordova app (or any app that is running in an environment outside of a browser), then using any of these operations: signInWithPopup(), signInWithRedirect(), linkWithPopup(), and linkWithRedirect() will not work because they do not have a real domain name. Currently the solution to this is to use an OAuth library and then use signInWithCredential(). You can view a similar example here for implementing twitter login.

Hope that helps.

Best Regards,
Aye

I can't implement signInWithCredential with google, then i used the facebook auth for my app... This is my workaround...

[hernanbruno97]

https://market.ionic.io/starters/firebase-v3-auth-social-kit-2
This solved my problem completely

[valterh4ck3r]

15$ ?

He uses in-app-browser, with option _system browser, this solution is a javascript approach, don't work in native view...

See about : https://ionicthemes.com/tutorials/about/native-facebook-login-with-ionic-framework

[diegobdev]

I work with Ionic 2.2, Cordova 6.5 and Firebase v3 and have same error using "let provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)" or "let provider = new firebase.auth.FacebookAuthProvider();
return firebase.auth().signInWithPopup(provider)" :
Error: {"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 or https and web storage must be enabled."}

[richarddiogo]

15 $? so hard ;s

I will try :" I can't implement signInWithCredential with google, then i
used the facebook auth for my app... This is my workaround."

2017-01-27 16:33 GMT-02:00 Diego Borges (diegobdev) <
[email protected]>:

I work with Ionic 2.2, Cordova 6.5 and Firebase v3 and have same error
using "let provider = new firebase.auth.GoogleAuthProvider();
firebase.auth().signInWithPopup(provider)" or "let provider = new
firebase.auth.FacebookAuthProvider();
return firebase.auth().signInWithPopup(provider)" :
Error: {"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 or https and web storage must be
enabled."}

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/279#issuecomment-275738722,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AD8sqXThRh1IyUSN_iF_vzR86x7aFZPmks5rWjhogaJpZM4I9Siw
.

[alheranx]

https://market.ionic.io/starters/firebase-v3-auth-social-kit-2
This solved my problem completely

what enviroment do you use?. In the comments sections the author says it not works in ionic view.

[vkniazeu]

@alheranx, I've just tried that demo app within Ionic View and indeed neither FB nor Google login works.
Perhaps, they will work in a standalone iOS and/or Android builds on devices or within emulators, but trying is time intensive.
Have a solution that would work within Ionic View would be a time saver for testing.

[rainabba]

I'm seeing this in QtWeb 3.8.5. It can't even run Gmail, lacks ES6 support (I use Babel to translate to ES5 code), is the same JS engine in the WkhtmlToPdf project (which is HUGELY popular project for converting pages to PDF in a well controlled/formatted manner).

[dpassis]

Solution: the issue was corrected in the latest Firebase JavaScript SDK release (4.1.3)

Firebase JavaScript SDK Release Notes

[edzillion]

@dpassis have you tested it? I haven't been following this issue closely so maybe I am doing something wrong. This works on browser:

this.userService.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()) .then( (success) => { console.log('fb auth success'); this.loading.dismiss(); }).catch( (err) => { console.error(err); });
I get:
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."

I am not _without_ the --prod flag on ionic:

`
global packages:

@ionic/cli-utils : 1.4.0                                          
Cordova CLI      : 7.0.1                                          
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.8                           
@ionic/cli-plugin-cordova       : 1.4.0                           
@ionic/cli-plugin-ionic-angular : 1.3.1                           
Cordova Platforms               : android 6.2.3 browser 4.1.0     
Ionic Framework                 : ionic-angular 3.4.2

System:

Node       : v6.11.0                                              
OS         : Windows 8.1                                          
Xcode      : not installed                                        
ios-deploy : not installed                                        
ios-sim    : not installed                                        
npm        : 4.1.2

`

package.json:
"angularfire2": "^4.0.0-rc.1", "firebase": "^4.1.3",

[dpassis]

@edzillion the method signInWithPopup don't work with cordova/ionic, you should use the signInWithRedirect method.

[mateusmcg]

@dpassis Thanks for the follow up.

I'm running:

• Firebase 4.1.3:
• angularfire2: 4.0.0-rc.1
• ionic-angular: 3.3.0
• angular: 4.1.2

And i tried the following code in a Android Device with both Google and Facebook providers.

this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()).then(result => {
        console.debug(result);
        alert("Success");
      }, error => {
        console.debug(error);
        alert("Failed - " + error.message);
      });

But i keep getting the error:

"This domain (my ip address) is not authorized to run this operation. Add it to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab"

I already have "localhost" and "my app name" added to the list of domains by default. Doesn't make sense to me that i have to add my ip address to that list. But i tried anyway and still failed.

This might be a silly problem to solve but i'm kinda lost.

Any idea what i'm doing wrong?

[dpassis]

@mateusmcg make sure that all windows are open by inappbrowser
Something like that:
function onDeviceReady() {
window.open = cordova.InAppBrowser.open;
}

Also make sure that all configs listed in the tutorial are done.

[mateusmcg]

@dpassis Thanks for the quick response

After removing "--livereload" from the command ionic cordova run android i started to get a few errors asking to install a few cordova plugins, which are:

• cordova-plugin-browsertab
• cordova-plugin-buildinfo
• cordova-universal-links-plugin
• cordova-plugin-inappbrowser

After installing these plugins the google auth page opened normally.

And after chosing my Google Account i'm sent back to the app. But i get no user authenticated within firebase (The promise below returns null):

getAuthenticatedUser() {
    return this.afAuth.authState;
  }

I had to configure a Dynamic Link and a SHA-1 key in the firebase console to get the Google OAuth page to open. Maybe i did something wrong there?

Any idea how to get the authenticated user after selecting the google account and redirecting back to the app?

[dpassis]

@mateusmcg
1)You need create in the firebase console a android app and add the same id below:

<widget **id="com.app"** version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

2)You need create a new dynamic link and relate that with your android app created in the step 1,
so in the config.xml

```

```
p.s.: host name is your authDomain, get this in your firebase snnipet

[mateusmcg]

@dpassis The app is created in firebase and tried to add the universal-links section in the config.xml file like below:

...
<universal-links>
        <host name="https://<my Dynamic Link>" scheme="https" />
        <host name="https://myApp.firebaseapp.com" scheme="https">
            <path url="/__/auth/callback" />
        </host>
</universal-links>
...

But the behavior stayed the same.

Using the code below the success promise is not triggered, instead when i select the google account the app "refreshes" (like opening for the first time) and i get no firebase user authenticated (Went to Firebase Console and there is no user logged in with Google Provider).

this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider()).then(result => {
        console.debug(result);
        alert("Success");
      }, error => {
        console.debug(error);
        alert("Error");
      });

I think the expected behavior should be the user being redirect back to the app (instead the app reloading entirely again) and that success promise triggered with the authenticated user. Am i doing something wrong here?

[fluentwait]

https://javebratt.com/ionic-social-login-firebase/
Follow this guide...It worked for me

[renanss]

@fluentwait it worked :)

[feliperfmarques]

I followed this guide indicated by @fluentwait, in addition to this:

https://firebase.google.com/docs/auth/web/cordova?hl=en-us

In special, this step:

3. To handle the case where the app activity is destroyed before the sign-in operation completes, call getRedirectResult when your app loads.

[bogacg]

When I add <univesal-links> tag in config.xml I'm getting this error during build:

Cannot read property 'manifest' of undefined.

Din't you guys get that error to start with ?

cordova-universal-links-plugin seems to have a problem.

[alkahtani]

https://javebratt.com/ionic-social-login-firebase/
Follow this guide...It worked for me

[ToothpickFactory]

When I switched to

import { firebase } from '@firebase/app';

// import these as needed..
import '@firebase/auth'; 
import '@firebase/database'; 
import '@firebase/firestore';

It worked

[alkahtani]

this artical solved the issue , follow up and let us know.

Ionic Social login