CODEWITHSUNDEEP
javascriptfirebasereact-nativefirebase-authenticationexpo
AL1ve1T
AL1ve1T

Reputation: 115

Expo: "auth/operation-not-supported-in-this-enviroment"

I develop a react-native (expo) mobile app and try to sign in with a google account to firebase, but I get an error:

"auth/operation-not-supported-in-this-enviroment. This operation is not supported in the enviroment this application is running on. "location.protocol" must be http, https or chrome-extension and web storage must be enabled"

Code:

loginGoogle() {
    var provider = new firebase.auth.GoogleAuthProvider();
    provider.addScope('profile');
    provider.addScope('email');
    firebase.auth().signInWithPopup(provider).then(function(result) {
        var token = result.credential.accessToken;
        var user = result.user;
        return true;
    }).catch(function(error) {
        alert(error.code + '\n' +
        error.message + '\n' +
        error.email + '\n' +
        error.credential);
        return false;
    });
}

Upvotes: 5

Views: 2010

Answers (3)

Mac
Mac

Reputation: 21

If you are using expo bare workflow or simple React native cli (or in simple words which contain android and ios folder) then simply use "React Native Firebase" library.
Here is the link https://rnfirebase.io/

But if you are using expo managed workflow(which donot contain android and ios folder ) then you have to follow below steps .

1.setup google developer account

use this guide to setup : https://docs.expo.dev/versions/latest/sdk/google/

Note that: use host.exp.exponent as the package name.

Another problem you may face in this step is generation of hash,which I also faced,the reason for that error is java dev kit(JDK) is not install ,so do install it before proceeding to this step.

2.Setup Firebase account

Simply setup firebase project as you set before, enable google sign in service but this time the only change is you have to add client ID of your google developer account in (safest client id field) which will popup once you click on edit Google signin in firebase look like this

3.Coding Part

import * as Google from 'expo-google-app-auth'; //imported from expo package

import { GoogleAuthProvider,getAuth } from 'firebase/auth'; import { initializeApp } from "firebase/app";

import { firebaseconfig } from '[your firebase credentials]';

const app=intitializeApp(firebaseconfig) const auth=getAuth(app);

async function signInWithGoogleAsync() {

try {
    const result = await Google.logInAsync({
        androidClientId: 'cliend id from google dev console',
        iosClientId: 'client id from google dev console for ios app(if you setup)',
        scopes: ['profile', 'email'],
    });

    if (result.type === 'success') {
        console.log(result)
        const credential = GoogleAuthProvider.credential(result.idToken, result.accessToken);

        // Sign in with credential from the Facebook user.
        signInWithCredential(auth, credential)
            .then(async result => {
                console.log(result)
            })
            .catch(error => { console.log(error) });


        return result.accessToken;
    } else {
        console.log("cancelled by user")
        return { cancelled: true };
    }
} catch (e) {
    console.log(e);
    return { error: true };
}//

}

Upvotes: 0

Yash T
Yash T

Reputation: 141

Firebase does not support signInWithPopup in a React Native environment.

You can view a full list of supported environments on this page.

You can also submit a feature request for extended Firebase support for React Native here.

Upvotes: 2

bojeil
bojeil

Reputation: 30798

signInWithPopup is not supported in react-native. You will need to use a third party OAuth library to get the OAuth ID token or access token and then sign in with Firebase:

const cred = firebase.auth.GoogleAuthProvider.credential(googleIdToken, googleAccessToken);
firebase.auth().signInWithCredential(cred)
  .then((result) => {
    // User signed in.
  })
  .catch((error) => {
    // Error occurred.
  });

Upvotes: 3

Related Questions