Error: auth/configuration-not .An internal error has occurred

Question

any Idea why I m getting this issue when I click on sign Up by email and password in React-Native and Firebase ?

[Error: [auth/configuration-not] An internal error has occurred. [ CONFIGURATION_NOT_FOUND ]]

My App.js file

import React,{useEffect,useState} from 'react';
import 'react-native-gesture-handler';
import {
  StatusBar,
  View,
  Text
} from 'react-native';

import {Provider} from 'react-redux';
import {store} from './redux/store';


import Home from './screens/Home';
import Cart from './screens/Cart';
import CartDone from './screens/CartDone';
import Login from './screens/Login';
import Register from './screens/Register';
import {NavigationContainer} from '@react-navigation/native';
import {createDrawerNavigator,DrawerContentScrollView,DrawerItem} from '@react-navigation/drawer';
import Product from './screens/Product';
import {Avatar,Drawer} from 'react-native-paper';
import auth from '@react-native-firebase/auth';

const DrawerNav = createDrawerNavigator();


const App=() => {

 // Set an initializing state whilst Firebase connects
 const [initializing, setInitializing] = useState(true);
 const [user, setUser] = useState();

 // Handle user state changes
 function onAuthStateChanged(user) {
   setUser(user);
   if (initializing) setInitializing(false);
 }

 useEffect(() => {
   const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
   return subscriber; // unsubscribe on unmount
 }, []);

if (initializing) return null;


if(!user){
  return(
    <Provider store={store}>
      <StatusBar barStyle="white" backgroundColor="red" />
      <NavigationContainer>
      <DrawerNav.Navigator InitialRoute="Login" drawerContent={(props)=><DrawerContent {...props}/>}>
          <DrawerNav.Screen name="Login" component={Login} />
          <DrawerNav.Screen name="Register" component={Register} />
        </DrawerNav.Navigator>
      </NavigationContainer>
    </Provider>
  );
}

  return (
    <Provider store={store}>
      <StatusBar barStyle="white" backgroundColor="red" />
      <NavigationContainer>
      <DrawerNav.Navigator InitialRoute="Home" drawerContent={(props)=><DrawerContent {...props}/>}>
          <DrawerNav.Screen name="Home" component={Home} />
          <DrawerNav.Screen name="Cart" component={Cart} />
          <DrawerNav.Screen name="CartDone" component={CartDone} />
          <DrawerNav.Screen name="Product" component={Product} />
        </DrawerNav.Navigator>
      </NavigationContainer>
    </Provider>
  );
};

function DrawerContent(props){

return(
  <DrawerContentScrollView {...props}>
  <View style={{flex:1,alignItems:"center"}}>
    <Avatar.Image style={{backgroundColor:'white'}} size={130} source={require('./assets/avatar.png')}/>
  </View>
  <Drawer.Section>
  <DrawerItem 
         label="Home"
         icon={()=>(
          <Avatar.Icon backgroundColor="white" color="black" size={30} icon="home"/>
          )}
        onPress={()=>props.navigation.navigate('Home')}
    />
    <DrawerItem 
         label="Cart"
         icon={()=>(
          <Avatar.Icon backgroundColor="white" color="black" size={30} icon="cart"/>
          )}
        onPress={()=>props.navigation.navigate('Cart')}
    />
    <DrawerItem 
         label="Login"
         icon={()=>(
          <Avatar.Icon backgroundColor="white" color="black" size={30} icon="account"/>
          )}
        onPress={()=>props.navigation.navigate('Login')}
    />
  </Drawer.Section>
</DrawerContentScrollView>
  );
}

export default App;

my Register.js file :

import React,{useState} from 'react'
import {View,StyleSheet,TouchableOpacity,TextInput} from 'react-native';
import Header from '../components/header';
import {Item,Input,Icon,Label,CheckBox,ListItem,Body,Text} from "native-base";
//react-native-hide-show-password-input
//import auth from '@react-native-firebase/auth';
import { ScrollView } from 'react-native-gesture-handler';
import firestore from '@react-native-firebase/firestore';

export default Register = ({navigation})=>{
    return (
       <Header screen="Register" component={Main} navigation={navigation} />
    )
}

const Main=(props)=>{

const [email,setemail]=useState('');
const [password,setpassword]=useState('');
const [firstName,setfirstName]=useState('');
const [lastName,setLastName]=useState('');
const [secureText,setSecureText]=useState(true);
const [isChecked,setisChecked]=useState(false);


 function CreateUser(){

 if(email!="" && email!=null && password!="" && password!=null && isChecked==true ){
     auth()
     .createUserWithEmailAndPassword(email,password)
     .then(() => {
      console.log('User account created & signed in!');
    })
    .catch(error => {
      if (error.code === 'auth/email-already-in-use') {
        console.log('That email address is already in use!');
       }
  
       if (error.code === 'auth/invalid-email') {
        console.log('That email address is invalid!');
       }
  
      console.log("last one",error);
    });
 }

// adding user to firestore
/*firestore()
  .collection('Users')
  .add({
    name: firstName+" "+lastName,
    email : email,
    password : password,
  })
  .then(() => {
    console.log('User added!');
  })
  .catch(err=>console.log(err)); */

 }

    return (
        <ScrollView>
        <View style={styles.Container}>
             <View style={styles.form}>

             <Item rounded style={styles.inputstyle}>
                <Input
                 placeholder="First Name"
                 value={firstName}
                 onChangeText={text =>setfirstName(text)}
                 underlineColor="transparent"
                />

                </Item>
                <Item rounded style={styles.inputstyle}>
                <Input
                 placeholder="Last Name"
                 value={lastName}
                 onChangeText={text =>setLastName(text)}
                 underlineColor="transparent"
                />

                </Item>
                <Item rounded style={styles.inputstyle}>
                <Input
                 placeholder="Email"
                 value={email}
                 onChangeText={text =>setemail(text)}
                 underlineColor="transparent"
                />
                </Item>

                 <Item rounded style={styles.inputstyle}>
                  <Input secureTextEntry={secureText} onChangeText={(text)=>setpassword(text)} placeholder='password'/>
                  <Icon active onPress={()=>setSecureText(secureText==true ? false : true)} name={secureText==true ? "eye-off" : "eye"} />
                 </Item>

                 <View style={styles.termscheckboxContainer}>
                 <ListItem>
                  <CheckBox onPress={()=>setisChecked(isChecked==false ? true : false)} checked={isChecked} />
                  <Text style={{ marginLeft:10 }}>Accept the terms and conditions</Text>
                </ListItem>
                 </View>
              

                <TouchableOpacity 
                 onPress={()=>CreateUser()}
                style={styles.submit}>
                    <Text style={styles.submittxt}>Sign up</Text>
                </TouchableOpacity>

                <View style={styles.divid}>
                    <View style={styles.line} />
                    <Text style={styles.or}>or</Text>
                    <View style={styles.line} />
                </View>

               <View style={styles.secondpanel}>
               <TouchableOpacity style={styles.facebook}>
                    <Text style={styles.txtsignwith}>Sign In with Facebook</Text>
                </TouchableOpacity>

                <TouchableOpacity style={styles.google}>
                    <Text style={styles.txtsignwith}>Sign In with Google</Text>
                </TouchableOpacity>

               <View style={styles.signupqs}>
               <Text style={styles.signupqstxtA}>Already have an account?</Text>
                <TouchableOpacity 
                onPress={()=>props.navigation.navigate('Login')}
                style={styles.signupqsbtn}>
                  <Text style={styles.signupqstxtB}>Sign In</Text>
                </TouchableOpacity>
               </View>
               </View>
             </View>
        </View>
        </ScrollView>
    )
}

I have followed all instructions in React Native Firebase documentation. Auth function login verification working . I have also enabled email and password service from firebase.

thanks.

Answer 1

the problem was the name of the android project is not the same with the name I gave to it on firebase , please if any one faced the same problem just check the name on google firebase file if it has the same configuration name with the project name on firebase. and check all other configurations that you entred manualy on the firebase website.

Answer 2

You got this error because you haven't enabled Authentication mode in FireStore console e.g. Email-Password etc.

Answer 3

Have you checked the project_id in your Android app google-services.json file is the same as the Firebase project for which you enabled Google Sign In Authentication? If that is the case and you have not edited the google-services.json file, you can file a support ticket to Firebase.