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!

The `signInWithPopup()` method doesn't work with React Native, only on web. Try to use `signInWithCredential()` : http://stackoverflow.com/a/41014021/1206613 — Ivan Chernykh, Mar 14 '17 at 17:22
Thanks, I've got Google auth working so far, but firebase auth isn't working when calling signInWithCredential method. I posted more details [here](https://github.com/davideast/firebase-react-native-sample/issues/28#issuecomment-287161708) — AlejandroJS, Mar 16 '17 at 19:15

score 4 · Answer 1 · edited Nov 21 '17 at 22:14

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

Could you post the whole `signIn()` method that has both Google signin as well as firebase signin for clarity? — SoundStage, Sep 11 '17 at 10:46
@AlejandroJS Please share your whole code! I am also facing some issues this would be of great help! — Rishav Kumar, Oct 25 '18 at 05:38

score 3 · Answer 2 · edited May 31 '17 at 19:41

3

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.

edited May 31 '17 at 19:41

user812786

4,302
5
38
50

answered May 31 '17 at 18:50

Rafael Jeremy Fernandez

113
6

score 1 · Answer 3 · answered Aug 09 '17 at 21:06

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.

score 1 · Answer 4 · answered Jan 05 '18 at 13:36

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

score 0 · Answer 5 · answered Nov 25 '22 at 22:53

I find all other answers to be either incorrect or deprecated.

react-native-firebase which is the officially recommended collection of packages that brings React Native support for all Firebase services on both Android and iOS apps.

Be sure to follow Firebase Authentication setup instructions: https://rnfirebase.io/auth/usage
Setup Firebase Authentication with google-signin: https://github.com/react-native-google-signin/google-signin

Google Sign In with Firebase in React Native

Aditional Information:

5 Answers5

Linked