Hi,
I use Firebase to allow users to log in with Facebook / Google / Email. Everything works just fine in my browser with “ionic serve -l”, and everything is still ok when I run the app on a iOS / android device (“ionic cordova run android/ios”). But when i build a release of my app, and install the apk on my android device, neither Facebook nor Google Auth work… The popups just don’t show.
The email auth works perfectly.
Do you know where the issue could come from plz ? Or at least how I could debug this plz ?
Thanks !
P.S. :
Node version : v8.9.1
Cordova version : v7.1.0
Ionic version : v3.19.0
Ok a quick update : I found the error description. I get this 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.
This error appears only on android device when running or installed from apk. It doesn’t appear on iOS device, nor on android with “run -l” (liveview).
The code where the error appears :
return this.afAuth.auth.signInWithRedirect(provider)
.then((credential) => {
this.authState = credential.user;
this.updateUserData()
})
.catch(error => {this.error = error;console.log(error.message)});
How are you importing AngularFireAuth? And what version of AngularFire2 are you using?
import { AngularFireAuth } from 'angularfire2/auth';
[...]
constructor(public afAuth: AngularFireAuth, [...]){[...]}
[...]
private socialSignInRedirect(provider) {
return this.afAuth.auth.signInWithRedirect(provider)
.then((credential) => {
this.authState = credential.user;
this.updateUserData()
})
.catch(error => {this.error = error;console.log(error.message)});
}
angularfire2@5.0.0-rc.4
How do you define provider?
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase';
import { Injectable } from '@angular/core';
import {AngularFireDatabase } from 'angularfire2/database';
import { Subject } from '../../models/subject';
@Injectable()
export class AuthServiceProvider {
providerGg: firebase.auth.GoogleAuthProvider;
providerFb: firebase.auth.FacebookAuthProvider;
[...]
constructor(public afAuth: AngularFireAuth, public _data: AngularFireDatabase) {
this.providerGg = new firebase.auth.GoogleAuthProvider();
this.providerFb = new firebase.auth.FacebookAuthProvider();
}
loginWithGoogle() : Promise<void> {
const provider = new firebase.auth.GoogleAuthProvider()
return this.socialSignInRedirect(provider);
}
loginWithFacebook() : Promise<void> {
const provider = new firebase.auth.FacebookAuthProvider()
return this.socialSignInRedirect(provider);
}
private socialSignInRedirect(provider) {
return this.afAuth.auth.signInWithRedirect(provider)
.then((credential) => {
this.authState = credential.user;
this.updateUserData()
})
.catch(error => {this.error = error;console.log(error.message)});
}
[...]
This probably won’t solve your problem, but you get better tree shaking if you import firebase from firebase/app. I’d change that first and see if it has any effect.
Ok I just did, but nothing changes 
Your code looks good. It might be a bug. I’d try to isolate this. Log in with the firebase SDK (no AngularFire). If there’s still a problem, you probably need to file a bug report at the Firebase GitHub. If it’s fine, then there’s probably something wrong with the AF wrapper, and you should open an issue there. I don’t think this has anything to do with Ionic. I’d be interested to hear about next steps though.
(update) Well I tried to do something different by copy-pasting the Firebase doc, but the result is the same…
loginFacebookFirebase() {
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL)
.then(() => {
var provider = new firebase.auth.FacebookAuthProvider();
firebase.auth().signInWithRedirect(provider).then(function() {
return firebase.auth().getRedirectResult();
}).then((result) => {
//var token = result.credential.accessToken;
var user = result.user;
}).catch((error) => {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorCode, errorMessage);
});
})
.catch((error) => {
// Handle Errors here.
this.promptAlert(error);
console.log(error);
});
}
I could be wrong, but as far as I know .signInWithRedirect() doesn’t work on build releases because of the location protocol, you need to use the “native” way.
I haven’t updated my posts in a while, but these should work or at least give you a good idea of the workflow:
Facebook Login with Ionic Native.
Google Login with Ionic Native.
3 Likes
Thank you so much 
Following your post, the Facebook pb is solved ! Even though there is one missing instruction for Facebook login : a hash key is required on the Fb developer’s site. You can find it by entering the following command :
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64
But the Google login still doesn’t work… I get to choose the account to log into, but when it comes back to my app I got an error (it’s JSON.stringify : “The operation couldn’t be completed. (com.google.HTTPStatus error 400)”).
The problem is both on iOS and Android, and it seems to happen in run or build… Do you have any idea where it comes from plz ?
I thought that it could come from an issue with my SHA-1 key, but as I understood there is no need of that key for iOS login ? Or is there ? on the google console, I can only put one SHA-1 key, so I have to choose between my debug key and my build key… Is there a way to enter both of them ?
Thanks again !
1 Like
Thank you for the link. In my opinion the first issue came from a problem with the bundle identifier (had a bad one in my Firebase apps). I changed it, but I still can’t login with Google. The error has changed : now it’s a problem with the Google Id_token…
On my iOS device :
the Google id_token is not allowed to be used with this application. Its audience (OAuth 2.0 client ID) is <XXXX>.apps.googleusercontent.com, which is not authorized to be used in the project with project_number:
The strangest thing : the client ID XXXX is not the reversed ID I installed google-plus with, but the WebClient ID that appears in my code :
return this.googlePlus.login({
'webClientId': '<XXXX>.apps.googleusercontent.com',
'offline': true
})
which is supposed to be for android only !
I’m afraid I’m stuck once more 
Update : I did wrong with my two google accounts, when logged into console developers I added to the wrong account (so to a wrong app).
Anyway now that it’s fixed x’) The link for allowing Google Auth (in the google console) contained in your article is no longer necessary ; when we pick a Firebase app, we are redirected to Firebase console, so everything is to be done there (including the SHA keys).
The Google login now works from iOS, but still not from Android device. Almost there ^^
Aaaaannnnd fixed !
The lasts issue, with Android, was the webClientId, which I entered wrong because at first it didn’t appear in my Google Developer Console. But after some minutes, it finally appeared, and I entered the right one in my code.
And the connections on both iOS and Android to both FB and Google in both Run and Build version Thank you once again !
1 Like
Hi @Perspecto
For google signed In,
did you changed SHA-1 key for debug and prod mode?
Regards!
if you still having the issue, please follow this link , it works , i have tested and works great
Ionic Social Login using Firebase
Hello @alkahtani What Ionic version did you use it with?
sorry for being too late to reply , i am using ionic1 , the problem now with IOS , Safari returen “invalid address” after facebook or any social login , it works great in android with no issues