so I'm trying to incorporate Google Authentication with Firebase in my React Native project. I had no problem Registering user's with the createUserWithEmailAndPassword(), but signInWithPopUp() is giving me trouble

I have enabled Google as a provider on Firebase. Here is the whole error - TypeError: (0, _auth.signInWithPopup) is not a function. (In '(0, _auth.signInWithPopup)(_firebase.authentication, provider)', '(0, _auth.signInWithPopup)' is undefined)

Not sure how to fix it, I would love suggestions.

Here is the code in Text format:

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Image, Text, ScrollView, KeyboardAvoidingView, Button } from 'react-native';
import AppButton from '../ponents/AppButton';
import colors from '../config/colors';
import AppTextInput from '../ponents/AppTextInput';

import  {createUserWithEmailAndPassword, GoogleAuthProvider, signInWithPopup} from 'firebase/auth';
import {authentication} from "../../firebase/firebase";

function SignUp({navigation}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const RegisterUser = () => {
        createUserWithEmailAndPassword(authentication, email, password)
        .then((userCredentials) => {
            let user = userCredentials.user
            navigation.replace('WeleScreen')
            console.log("Registered with:", user.email);
        })
        .catch((error)=> alert(error.message))
    }

    const googleSignIn = () =>{
        let provider = new GoogleAuthProvider();
        signInWithPopup(authentication, provider)
        .then((re)=>{
            console.log(re);
        })
        .catch((err) => alert(err.message))
    }

    
    return (
        <View style = {styles.background}>
            <ScrollView>
                <Image style = {styles.frontImage} source={require("../assets/bg.jpg")}/>
                
                <KeyboardAvoidingView
                    behavior={Platform.OS === "ios" ? "padding" : null}
                    keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
                >
                    
                    <AppTextInput 
                            placeholder = "Email" 
                            icon="email"
                            autoCapitalize = "none"
                            value = {email}
                            onChangeText={text=>setEmail(text)}
                            autoCorrect={false}
                    />
                    <AppTextInput 
                            autoCapitalize="none"
                            autoCorrect={false}
                            icon="lock"
                            placeholder="Password"
                            secureTextEntry={true}
                            value = {password}
                            onChangeText={text=>setPassword(text)}
                            textContentType = "password"
                        />
                </KeyboardAvoidingView>
                <AppButton title="Create Account" color = "lightYellow" onPress={RegisterUser}/>
                <AppButton title="Sign in With Google" color= "lightYellow" onPress={googleSignIn}/>
                <View style = {styles.footerText}>
                    <Text onPress={() => navigation.navigate('Login')}>Already have an account?   </Text>
                    <Text style = {styles.loginText} onPress={() => navigation.navigate('Login')}>Log in</Text>
                </View>
                <Text style={{
                    left: 30,
                    textDecorationLine: 'underline',
                }}>By signing up you agree to Terms Of Service and Privacy</Text>
            </ScrollView>
            
        </View>
    );
}

Here is where I initialized firebase (Empty strings have info in them just replaced them with empty strings):

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const authentication = getAuth(app)

so I'm trying to incorporate Google Authentication with Firebase in my React Native project. I had no problem Registering user's with the createUserWithEmailAndPassword(), but signInWithPopUp() is giving me trouble

I have enabled Google as a provider on Firebase. Here is the whole error - TypeError: (0, _auth.signInWithPopup) is not a function. (In '(0, _auth.signInWithPopup)(_firebase.authentication, provider)', '(0, _auth.signInWithPopup)' is undefined)

Not sure how to fix it, I would love suggestions.

Here is the code in Text format:

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Image, Text, ScrollView, KeyboardAvoidingView, Button } from 'react-native';
import AppButton from '../ponents/AppButton';
import colors from '../config/colors';
import AppTextInput from '../ponents/AppTextInput';

import  {createUserWithEmailAndPassword, GoogleAuthProvider, signInWithPopup} from 'firebase/auth';
import {authentication} from "../../firebase/firebase";

function SignUp({navigation}) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const RegisterUser = () => {
        createUserWithEmailAndPassword(authentication, email, password)
        .then((userCredentials) => {
            let user = userCredentials.user
            navigation.replace('WeleScreen')
            console.log("Registered with:", user.email);
        })
        .catch((error)=> alert(error.message))
    }

    const googleSignIn = () =>{
        let provider = new GoogleAuthProvider();
        signInWithPopup(authentication, provider)
        .then((re)=>{
            console.log(re);
        })
        .catch((err) => alert(err.message))
    }

    
    return (
        <View style = {styles.background}>
            <ScrollView>
                <Image style = {styles.frontImage} source={require("../assets/bg.jpg")}/>
                
                <KeyboardAvoidingView
                    behavior={Platform.OS === "ios" ? "padding" : null}
                    keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}
                >
                    
                    <AppTextInput 
                            placeholder = "Email" 
                            icon="email"
                            autoCapitalize = "none"
                            value = {email}
                            onChangeText={text=>setEmail(text)}
                            autoCorrect={false}
                    />
                    <AppTextInput 
                            autoCapitalize="none"
                            autoCorrect={false}
                            icon="lock"
                            placeholder="Password"
                            secureTextEntry={true}
                            value = {password}
                            onChangeText={text=>setPassword(text)}
                            textContentType = "password"
                        />
                </KeyboardAvoidingView>
                <AppButton title="Create Account" color = "lightYellow" onPress={RegisterUser}/>
                <AppButton title="Sign in With Google" color= "lightYellow" onPress={googleSignIn}/>
                <View style = {styles.footerText}>
                    <Text onPress={() => navigation.navigate('Login')}>Already have an account?   </Text>
                    <Text style = {styles.loginText} onPress={() => navigation.navigate('Login')}>Log in</Text>
                </View>
                <Text style={{
                    left: 30,
                    textDecorationLine: 'underline',
                }}>By signing up you agree to Terms Of Service and Privacy</Text>
            </ScrollView>
            
        </View>
    );
}

Here is where I initialized firebase (Empty strings have info in them just replaced them with empty strings):

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth'

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const authentication = getAuth(app)

• javascript
• firebase
• react-native
• firebase-authentication

Share Improve this question Follow edited Feb 8, 2022 at 4:58 Adam Terhaerdt asked Feb 7, 2022 at 22:17 Adam TerhaerdtAdam Terhaerdt 11922 silver badges88 bronze badges 8

• 1 Kindly share the code in text format. – Kundan Commented Feb 8, 2022 at 1:47
• The code looks fine but can you share the code in text format along with the file where you've initialised Firebase and auth instance is being exported? – Dharmaraj Commented Feb 8, 2022 at 4:25
• @Dharmaraj I just updated the original post to have it in text format – Adam Terhaerdt Commented Feb 8, 2022 at 4:59
• @Kundan Just updated the post to have it in text format – Adam Terhaerdt Commented Feb 8, 2022 at 5:00
• 2 It looks like signInWithPopup exists only in the browser, look at this ment github./firebase/firebase-js-sdk/issues/… – Dmitriy Zhiganov Commented Feb 8, 2022 at 8:10

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

That's because Firebase for RN doesn't sopport those methods. Check this link

I also had the same problem and managed to solve it, it was really a small error.

It is in this part of the code:

const googleSignIn = () => {
  let provider = new GoogleAuthProvider();
  signInWithPopup(authentication, provider)
    .then((re) => {
      console.log(re);
    })
    .catch((err) => alert(err.message));
};

when the GoogleAuthProvider() is declared, the configuration of the application must be passed as a parameter, it would be as follows:

const provider = new GoogleAuthProvider(app);