Google Sign-In using Firebase in React Native

Question

Note the question might be long because of the need for explanation otherwise it might be very vague and lead to same old answers.

I am having problem in creating a Google Sign-In page in React Native using firebase. Based on firebase documentation:

With the updates in the 3.1.0 SDK, almost all of the JavaScript SDK’s functionality should now work smoothly in React Native. But there are a couple caveats:

"Headful" auth methods such as signInWithPopup(), signInWithRedirect(), linkWithPopup(), and linkWithRedirect() do not work in React Native (or Cordova, for that matter). You can still sign in or link with a federated provider by using signInWithCredential() with an OAuth token from your provider of choice.

which means I cannot use following code in my React Native project:

var provider = new firebase.auth.GoogleAuthProvider();

firebase.auth().signInWithPopup(provider).then(function(result) {

  // 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) {
  // Handle Errors here.
  var errorCode = error.code;
  var errorMessage = error.message;
  // The email of the user's account used.
  var email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  var credential = error.credential;
  // ...
});

Then with some googling and searching over dozens of stackoverflow, I found following way to use use Google SignIn using Firebase API in React Native project as:

const provider = firebase.auth.GoogleAuthProvider;
const credential = provider.credential(token);

  firebase.auth().signInWithCredential(credential)
    .then((data) => {
      console.log('SUCCESS', data);
    })
    .catch((error) => {
      console.log('ERROR', error)
    });

Now in just above code, you might have noticed token in following line:

const credential = provider.credential(token);

So based on firebase documentation, token is obtained as follows:

// `googleUser` from the onsuccess Google Sign In callback.
var token = googleUser.getAuthResponse().id_token;

So my question is how do I obtain that token using GoogleUser object or whatever it is in React Native? Or is there another way?

user_5508987 · Answer

I am going to assume you've added GoogleSignin to your project. If not, you can find a pretty good instruction here

The callback that Google provides has an item, called idToken, which can be used to login via google into your firebase. Once you have returned that object from Google Signin, EG

  GoogleSignin.signIn()
        .then((user) => { this.loginWithGoogle(user) });

You can simply use this user object's idToken as a credential,

loginWithGoogle = (user) => {
    var credential = firebase.auth.GoogleAuthProvider.credential(user.idToken);

and then log into firebase using that credential

firebase.auth().signInWithCredential(credential).then(u => {
    //blah blah bleep
}

Hope this helps.

Google Sign-In using Firebase in React Native

1 Answers