Angularfire: Uncaught Error: "location.protocol" must be http or https when building to device using Ionic 2 & Angular 2

[nickkenens]

Error in question:
This operation is not supported in the environment this application is running on. "location.protocol" must be http or https.

This error only occurs when the app is built & running on a device. In the browser it works great (which is logical).

Maybe there's a way to manually set the location.protocol on a cordova app using Ionic 2?

[aaronksaunders]

here is a project where I am running into issues - https://github.com/aaronksaunders/ionic2-angularfire-sample/tree/firebase3-support

Issue appears to be around anything that you need to subscrbe to, I am creating a very basic app to demonstrate the issue.

I am getting errors thrown around this.af.auth.subscribe()

I created a smaller project that shows the issue without all the extras: https://github.com/aaronksaunders/basicaf2

[Chuckv01]

Has anyone found a way around this error? Seems like this error is making angularfire useless for cordova apps.

[aamir1995]

Facing same issue !

[nickkenens]

As @aaronksaunders said, it has to do with .subscribe().

Whenever you subscribe to a method from firebase, this is including their FirebaseListObservable's this location.protocol issue occurs.

and yeah, @Chuckv01 having the same issue here, switched my app to use localStorage for & probably going to use another Authentication provider or service unless they fix this issue rapidly (easy to switch services).

[mithunvp]

Can use previous versions of AngularFire to avoid this issue? Need to wait until they fix it.

[aamir1995]

@mithunvp yes, you can use previous version of AngularFire 2 with Firebase SDK v2.4.2, Until they fix this issue.

[mithunvp]

With Firebase SDK 2.4.2, I will have to use legacy Firebase site not the new firebase.google.com site, I am little confused here?

[aamir1995]

True, you have to use legacy Firebase console :( :(, but it's a matter of some days until they figure it out.

[jeffbcross]

I believe this issue is in the Firebase SDK itself, since the AngularFire2 codebase doesn't access location at any point.

@aaronksaunders or @nickkenens can either of you try using the new Firebase SDK without AngularFire2 and see if the problem still occurs?

I'll see if I can run @aaronksaunders project to repro the issue.

[aaronksaunders]

@jeffbcross i just tried it with the just the Firebase SDK and it works fine...

[jeffbcross]

Thanks I wasn't able to get the reproduction running before I left the
office, could someone post a full stack trace here?
On Tue, Jun 21, 2016 at 7:02 PM Aaron K Saunders [email protected]
wrote:

@jeffbcross https://github.com/jeffbcross i just tried it with the just
the Firebase SDK and it works fine...

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/angular/angularfire2/issues/243#issuecomment-227623404,
or mute the thread
https://github.com/notifications/unsubscribe/AAcTVxBW6bPbmrn5iIHJ1yf3UMdzRCoUks5qOJezgaJpZM4I5A1i
.

[olostan]

I have traced up to firebase.js. Seems it is a problem with SDK - it checks protocol to be http or HTTPS and in ionic2 environment protocol is file://

However I did not checked with pure SDK as @aaronsaunders did. Strange - may be we are using different GB SDKs...

[olostan]

This issue also don't allow to use Firebase authentication... It is really critical for my app. Any workarounds?

[alexissusset]

Facing the same issue with Ionic v1

[jeffbcross]

Found the issue: https://firebase.google.com/docs/reference/js/firebase.auth.Auth#getRedirectResult

The error is listed on that page.

Auth is calling that method to see if the app is being loaded as an oauth redirect. We could add a protocol check before calling the method.

[olostan]

I have same error when trying auth with pop-up, not reflect. That should work (and was working on previous SDK) on Ionic2...

[jeffbcross]

@olostan the error occurs as soon as subscribing to auth because AngularFire is calling getRedirectResult() under the covers to check if the request is part of a redirect oauth flow.

[jeffbcross]

I've published a preview of the changes I made in #271 to npm. Can folks here please npm install angularfire2@next and check that this issue is resolved?

Note: this has been published with the next tag on npm, so including the @next is required in order to install the correct version.

[aaronksaunders]

@jeffbcross just checked it and it works

[Chuckv01]

@jeffbcross I updated to angularfire2@next and it looks like the error is fixed on auth.subscribe(). However, the error is still happening on auth.login().

Here is the code where I am seeing the location.protocol error occur on iOS and Android devices:

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

Sorry if I am missing something :)

[aaronksaunders]

@Chuckv01 i think your issue is a related but a separate issue... related to auth methods that require a popup. In the previous versions the inappbrowser was integrated in the lib to support this functionality

[Chuckv01]

@aaronksaunders Hmm, I already have the inappbrowser plugin installed in my project. I also gave it a try using AuthMethods.Redirect, but still got the protocol error.

[nelsonad]

Is there a workaround for this?

[Chuckv01]

@aaronksaunders Would you by chance have this inappbrowser workaround implemented in angularfire2?

[olostan]

@nelsonad as for now, the only workaround I know is to use https://github.com/nraboy/ng2-cordova-oauth and then https://firebase.google.com/docs/auth/web/twitter-login#handle_the_sign-in_flow_manually

[ciekawy]

I'm also still having this issue with [email protected]

[jlsuarezs]

Solved using Firebase only.

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

[Vasanth19]

jsuarezs solution worked. but it requires more effort to handle login and logout. Is there an ETA on when firebase team would allow file:// for ionic?

[MauricioKruijer]

Using [email protected] fixed my "blank page" issue and I'm able to use the email login of firebase. Facebook and google auth are still broken tho :(

[harpreet2602]

@jlsuarezs , Can you add the code snippet that you used for facebook login... I tried to follow the firebase doc but am not successful.

[nelsonad]

@harpreet2602 check out @aaronksaunders solution https://github.com/aaronksaunders/basicaf2

This worked for me.

[ciekawy]

using external auth plugin especially the native one is an interesting option yet this is a workaround and needs additional development especially when the app relays on various auth providers like facebook, google, twitter...

[aaronksaunders]

@ciekawy i think that integrating it directly into angularfire2 is the wrong approach for mobile solutions, I believe the correct approach it to provide integration points, like they have and leave it at that...

[harpreet2602]

Ref: https://github.com/rodrigoreal/ionic2-angularfire-login/issues/4
This is solved here: https://github.com/rodrigoreal/ionic2-angularfire-login

[ciekawy]

@aaronksaunders I fully agree that from architectural point of view it is better to provide external integrations. However one of the factors to use firebase for my ionic project especially in the early stage was that the authentication (an for a number of providers) was given out of the box.

@harpreet2602 I was able to configure Facebook app to use the approach, yet this is still not a real solution but rather workaround or a replacement - it works just for Facebook (I've managed to make a google plus as well - will try to prepare a PR for that) and requires additional plugin.

still main point is that the real issue concerns firebase SDK

[idesignpixels]

Is a permanent fix in the works? I only use af for the typings and still get this issue. I don't really want to add more complexity by having more libraries handling auth.

[ciekawy]

the response I got from firebase support

I figured it out that Popup/Redirect sign in methods in Firebase 3 are currently not supported in native Ionic/Cordova apps. We are still working on supporting these methods. However, there's no definite timeline on when will this be available.

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.

I guess it's worth asking for the access to firebase SDK sources...

[gvkhna]

There's a commit not too far back in the tests about a provider for
WindowLocation you have to add to the bootstrap providers to get rid of the
location.protocol error.

It seems firebase is checking aspects of the location object but is doing
so incorrectly causing errors to be thrown. I was looking through the
compiled firebase code and in some cases it checks location.protocol ===
"http" or "https", but then other times where "http:" or "https:" with a
colon in the string.

Because of these inconsistent checks I think proceeding with firebase or
angular fire for auth isn't a good idea. We've gone the manual route and
pass the oauth access token to firebase, it works well, they should add
some updates to the setup about the provider for Window location to fix
this error.

(Wrote from phone)
On Tue, Jul 26, 2016 at 2:56 AM Szymon Stasik [email protected]
wrote:

the response I got from firebase support

I figured it out that Popup/Redirect sign in methods in Firebase 3 are
currently not supported in native Ionic/Cordova apps. We are still working
on supporting these methods. However, there's no definite timeline on when
will this be available.

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.

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

Sent from my iPhone

[Adtiv]

Any word on a real fix yet besides the work around??? This issue's been open for a while now and I've seen it come up a lot of other places on the web.

[olostan]

As far as I know, no. In Gitter and other chats, this issue is one of top referenced, but there is no any good workaround or fix.

[LorenzoZaccagnini]

I got the same issue with Electron, Ionic 1 and Ionic 2.

[candelibas]

Still having issues in Ionic 2.

[nickkenens]

Seems like a serious ongoing issue, have been in love with the library as I've been working with it but it's sad that we can't use it in Electron or Ionic 2 style apps.

[santiarias]

do we have a fix for this yet? thanks!

[gollodev]

anybody to solved this issue?

[nickkenens]

@jeffbcross any updates for this issue?

[olostan]

Just tested on latest angularfire2, Still it is not posible to use Firebase3 Auth with angularfire2 on ionic 2 Got 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.

using angularfire2@next ([email protected] )

@jeffbcross @davideast should I create new issue or this one could be re-opened?

[katowulf]

Hi Folks. This is an issue with the Firebase SDK and how it handles location. It's also, to some extent, a limitation as browsers sandbox local (i.e. file://) resources. Thus, handling Ionic's implementation would require an Ionic-specific SDK, or at lest some sort of adapter specifically to address this.

So, long story short: It's complicated and it's not in AngularFire's purview to solve this. With that in mind, I'm locking this thread to prevent further "is this fixed yet" questions.

For quick reference, here are the key discussions from this thread and possible solutions:

@olostan correctly suggests that some of the auth problems can by bypassed by using nraboy/ng2-cordova-auth and then calling signInWithCredential() as shown in this example.

@jlzuarezs correctly points out that one can bypass some of the redirect issues and auth methods by calling the OAuth methods directly as described here

@aaronksaunders suggests aaronksaunders/basicaf2

@harpreet2602 suggests rodrigoreal/ionic2-angularfire-login