[Firebase] firebase.auth().signInWithPopup

Ionic Framework ionic-v3
1

I’m using ionic v 3
There is a error using the firebase.auth().signInWithPopup on mobile
devices. The popup appears for a quick second and then disappears. But it’s work smoothly when running in browser.

Code I used in Auth.ts

signInWithGoogle(): firebase.Promise<any> {
    return this.afAuth.auth.signInWithRedirect(new firebase.auth.GoogleAuthProvider());
  }

  signInWithTwitter(): firebase.Promise<any> {
    return this.afAuth.auth.signInWithRedirect(new firebase.auth.TwitterAuthProvider_Instance());
  }

Code I used in Login,

loginGoogle() {
    this.authData.signInWithGoogle().then(() => {
      this.navCtrl.push(TabsPage);
    }, error => {
      this.presentToast("Invalid user details");
    });
  }
2

Don’t sign in with popup on a mobile device. Sign in with redirect. That’s what the Firebase docs recommend for mobile.

3

Could you please give a sample of code? and a bit explanation about the different between redirect and popup.
Thank you!

4

https://firebase.google.com/docs/auth/web/facebook-login

5

Please tell me how do I want to change the above code for it.

6

Your OP confuses me. You mention popup, but your code uses redirect. So I guessed that the code you were using was different from the code you posted. This often happens – people say their code isn’t working, and then they don’t post the part of their code that doesn’t work.

You can almost copypaste the code in the link I provided.

Beyond that, I’m not sure what you’re asking.

1 Like
7

Is it possible to use for ionic v3?

8

Yes, I have it working in an Ionic 3 project.

9

Here the code that I used for Signup with Google button,

loginGoogle() {
    let provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    firebase.auth().signInWithRedirect(provider);
    firebase.auth().getRedirectResult().then(function (authData) {
      this.navCtrl.push(TabsPage);
    }).catch(function (error) {
      console.log(error);
    });
  }

In mobile device nothing happens after click that button.

10

Why are you doing it differently from the documentation I linked you to?

11

Nothing happens when click the button, in browser it redirect to a blank white screen, in mobile nothing happens,

loginGoogle() {
    var provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    firebase.auth().signInWithRedirect(provider);
    firebase.auth().getRedirectResult().then(function (result) {
      if (result.credential) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // ...
      }
      // The signed-in user info.
      var user = result.user;
    }).catch(function (error) {
      
    });
  }
12

Now it perfectly redirect to the google account selector, but when select it give me a white screen with this sentence,
mobile app identifier is not registered for the current project

1 Like
13

image
WhatsApp Image 2017-05-24 at 9.48.46 AM.jpeg720×1280 26.7 KB

1 Like
14

You need to set up your app within the firbase console. This is the full tutorial on how to do that.

15

Have you found a solution? I am still trying to get that code to work for android mobile browser

16
17

We understand this is the case for projects built for Android and iOS but what about mobile browser?

It seems to me that cordova should not be a factor if someone is accessing an ionic project on a website.

But I could be wrong… I frequently am.

18

If someone is accessing the website through a browser on their phone all the afore mentioned issues arise. But accessing the site on a desktop presents no issue when using signinWithPopup().

19

You’ll need to post your error and possibly your code if you want help with that. Maybe the new Firebase changed something.

20

Sure but should I make it a new discussion topic? I’m thinking it would be best for those looking explicitly to implement this for mobile browser.