Google Sign In with Firebase in React Native

Question

I'm trying to login with Google but it throws me this error:

code: "auth/operation-not-supported-in-this-environment" 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 is the code:

const provider = new firebase.auth.GoogleAuthProvider();
provider.addScope('profile');
provider.addScope('email');
firebase.auth().signInWithPopup(provider)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.log(error);
  })

Aditional Information:

• "firebase": "^3.7.1"
• "react-native": "^0.42.0"
• platform: Android

any ideas? thanks in advance!

Answer 1

First I used react-native-google-signin to Sign In with Google. Follow these steps to configure it.

Make sure you correctly sign your APK (debug or release).

In app/build.gradle exclude com.google.android.gms from the dependencies that use it like so:

compile(project(":react-native-google-signin")){
    exclude group: "com.google.android.gms" // very important
}

Then link you Google token with Firebase:

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);
  });

I'm using firebase 3.7.1

This is how my dependencies look in app/build.gradle

dependencies {
    compile project(':react-native-facebook-login')
    compile (project(':react-native-fcm')){
        exclude group: "com.google.firebase"
    }
    compile project(':react-native-vector-icons')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"
    compile(project(":react-native-google-signin")){
        exclude group: "com.google.android.gms" // very important
    }
    compile ('com.google.firebase:firebase-core:10.0.1') {
        force = true;
    }
    compile ('com.google.firebase:firebase-messaging:10.0.1') {
        force = true;
    }
    compile ('com.google.android.gms:play-services-auth:10.0.1') {
        force = true;
    }
}

Answer 2

Firebase Documentation

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

Answer 3

The general issue is not about changing the code with the solution, is more than we you use npm link the solution will be broke again, as the npm link will be re-adding the new line causing the error again.

npm link will search with regex, the current line is compile(project(":react-native-google-signin")){ so we need to change it to the format compile project ("package") and split to the next like the bracket char. In the following way:

compile project(":react-native-google-signin")
{         
        exclude group: "com.google.android.gms" // very important
}

so when you run npm link, it will detect the dependency and won't be duplicated but also the if block code will be persisted.

Answer 4

I am replying late but it will be helpful for others, if you are using firebase with google sign then you must exclude some libraries and those your app gradle like that

 compile(project(":react-native-google-signin")){
    exclude group: "com.google.android.gms" // very important
 }
 compile ('com.google.android.gms:play-services-auth:10.2.6'){
     force = true;
 }
 compile ("com.google.android.gms:play-services-base:+") { // the plus allows you to use the latest version
    force = true;
 }

 compile (project(path: ':react-native-fbsdk')){
            exclude group: "com.google.android.gms"
 }
 compile(project(":react-native-firebase")){
    exclude group: "com.google.android.gms"
 }

This is discussion about that issue for more detail answer

Answer 5

I tried what jamesjara wrote and the app could not build. Had a syntax error at that exact line of code. Changed it back to the original above and build successful.