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

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?

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

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

Facing same issue !

@aaronksaunders

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).

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

@mithunvp

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

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?

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

@aaronksaunders

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.

@jeffbcross

@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 notifications@github.com
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
#243 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAcTVxBW6bPbmrn5iIHJ1yf3UMdzRCoUks5qOJezgaJpZM4I5A1i
.

@aaronsaunders

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...

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

Facing the same issue with Ionic v1

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.

@aaronksaunders

@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

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.

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...

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 notifications@github.com
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
#243 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AANjrNTwMW7N6cYSjUNGVtfZtVIOkzbQks5qZdm1gaJpZM4I5A1i
.

Sent from my iPhone

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.

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.

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

Still having issues in Ionic 2.

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.

do we have a fix for this yet? thanks!

anybody to solved this issue?

@jeffbcross

@jeffbcross any updates for this issue?

@jeffbcross

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 (angularfire2@2.0.0-beta.5-preview )

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

@olostan

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

Navigation Menu

Repository navigation

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

27 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

aaronksaunders commented on Jun 19, 2016

Chuckv01 commented on Jun 21, 2016

aamir1995 commented on Jun 21, 2016

redolds commented on Jun 21, 2016

mithunvp commented on Jun 21, 2016

aamir1995 commented on Jun 21, 2016

mithunvp commented on Jun 21, 2016

aamir1995 commented on Jun 21, 2016

jeffbcross commented on Jun 22, 2016

aaronksaunders commented on Jun 22, 2016

jeffbcross commented on Jun 22, 2016

olostan commented on Jun 22, 2016

olostan commented on Jun 22, 2016

alexissusset commented on Jun 22, 2016

jeffbcross commented on Jun 22, 2016

27 remaining items

ciekawy commented on Jul 24, 2016

idesignpixels commented on Jul 26, 2016

ciekawy commented on Jul 26, 2016

gvkhna commented on Jul 26, 2016

Adtiv commented on Aug 12, 2016

olostan commented on Aug 13, 2016

LorenzoZaccagnini commented on Aug 15, 2016

candelibas commented on Aug 21, 2016

redolds commented on Aug 22, 2016

santiarias commented on Sep 22, 2016

gollodev commented on Oct 3, 2016

redolds commented on Oct 3, 2016

olostan commented on Oct 3, 2016

katowulf commented on Oct 4, 2016

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions