TypeError: Cannot read property 'auth' of undefined

Hi Swain

I did try to follow the steps, somehow i am still experience this problem. I do not have HTML to setup for this. This what i did according to my firebase configuration file.

// Import the functions you need from the SDKs you need

import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";


// TODO: Add SDKs for Firebase products that you want to use


// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AI***",
  authDomain: "eshopmobile-fb508.firebaseapp.com",
  databaseURL: "***",
  projectId: "eshopmobile-fb508",
  storageBucket: "eshopmobile-fb508.appspot.com",
  messagingSenderId: "734223583165",
  appId: "1:734223583165:web:6849ecf86323894686b4d4"
};

// Initialize Firebase

  // initialize firebase
const app = initializeApp(firebaseConfig, "eshopmobile");
const auth = getAuth(app);
const db = getFirestore(app);

export { auth, db };

you should provide the necessary options when initializing Firebase. Here is an example of how to do this:

const firebaseConfig = {
  // Your Firebase configuration options here
};

firebase.initializeApp(firebaseConfig, "my-app-name");

Note that you should replace "my-app-name" with the name of your app.

If you have already provided options but are still getting this error, make sure that you have included the Firebase SDK in your HTML file before your JavaScript code:

Also, make sure that you have followed the Firebase documentation for initializing Firebase in your specific platform or environment.

import { View, Text , TextInput, TouchableOpacity, StyleSheet} from 'react-native';
import React from 'react';
import firebase from 'firebase/app';
import {Ionicons} from '@expo/vector-icons';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native';
import { getAuth } from 'firebase/auth';



// creating some const bottom.
const Tab = createBottomTabNavigator();

// creating login screen.
const LoginScreen = () => {
const [email, setEmail] = React.useState();
const[password, setPassword] = React.useState();
const[errorMessage, setErrorMessage] = React.useState();

const handleLogin = () => {
    getAuth().signInWithEmailAndPassword(email, password)
      .then(userCredential => {
        const { user } = userCredential;
        console.log(`user with email ${user.email} sign in`);
      })
      .catch(error => {
        setErrorMessage(error.message);
      });
  }


 // creating some registration.
  const handleRegister = () => {
    getAuth().createUserWithEmailAndPassword(email, password)
      .then(userCredential => {
        const { user } = userCredential;
        console.log(`User with email ${user.email} signed up`);
      })
      .catch(error => {
        setErrorMessage(error.message);
      });
  }



  return (
    
       ({
          tabBarIcon:({ focused, color, size}) => {
            let iconName;
            let iconColor = focused ? 'green':color;
            
            if(route.name === 'Login') {
              iconName = focused ? 'log-in' :'log-in-outline';
            }else if(route.name === 'Register') {
              iconName = focused ? 'person-add' : 'person-add-outline';

            }
            return ;
          },
        })}

        tabBarOptions ={{
          activeTintColor:'tomato',
          inactiveTintColor:'gray',
          style:styles.tabBar,
          labelStyle:styles.tabLabel,
        }} >

        
          {()=> (
            
              Login
              

              
            
              Login
                {errorMessage && {errorMessage}}
              
            

          
          )}
        
        
          {() => (
            
              Register
              
              
              
              Register
              
              {errorMessage && {errorMessage}}
            
          )}
        
      
    
  );
};


// adding some styles here.
const styles = StyleSheet.create({
    container:{
      flex:1,
      alignItems:'center',
      justifyContent:'center',
      backgroundColor:'#fff'
    },
    title:{
      fontSize:24,
      fontWeight:'bold',
      marginBottom:30,
    },
    input: {
      borderWidth:1,
      borderColor:'#ccc',
      borderRadius:5,
      padding:10,
      marginBottom:20,
      width:'80%',
    },
    buttonContainer:{
      flexDirection:'row',
      justifyContent:'space-between',
      width:'60%',
    },
    button:{
      backgroundColor:'#007AFF',
      color:'#fff',
      padding:10,
      borderRadius:5,
      marginTop:10,
      width:'45%',
    },
    buttonText:{
      color:'#fff',
      textAlign:'center',
      fontWeight:'bold',
    },
    errorMessage:{
        color:'red',
        marginBottom:20,
        width:'80%',
        textAlign:'center',
      
    },
});


export default LoginScreen

Hi Swain

I made the changes prior to the given code, now i am getting this problem

 FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)., js engine: hermes. What am missing?
 

The error "TypeError: Cannot read property 'auth' of undefined" occurs because the Firebase Auth SDK was not correctly imported into your code. To fix the error, you can change the import statement for Firebase Auth to:

import { getAuth } from 'firebase/auth';

This will import the getAuth function, which you can use to get the Auth instance.

Also, you should import the firebase/app module in your LoginScreen file. Add the following import statement to the top of your LoginScreen.js file:

import firebase from 'firebase/app';

This will allow you to use firebase.auth() to access the Auth instance in your code.

Here's the updated code for LoginScreen.js:

import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import React from 'react';
import firebase from 'firebase/app';
import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native';
import { getAuth } from 'firebase/auth';

// creating some const bottom.
const Tab = createBottomTabNavigator();

// creating login screen.
const LoginScreen = () => {
  const [email, setEmail] = React.useState();
  const [password, setPassword] = React.useState();
  const [errorMessage, setErrorMessage] = React.useState();

  // creating handle-login.
  const handleLogin = () => {
    getAuth().signInWithEmailAndPassword(email, password)
      .then(userCredential => {
        const { user } = userCredential;
        console.log(`user with email ${user.email} sign in`);
      })
      .catch(error => {
        setErrorMessage(error.message);
      });
  }

  // creating some registration.
  const handleRegister = () => {
    getAuth().createUserWithEmailAndPassword(email, password)
      .then(userCredential => {
        const { user } = userCredential;
        console.log(`User with email ${user.email} signed up`);
      })
      .catch(error => {
        setErrorMessage(error.message);
      });
  }

  return (
    
       ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            let iconColor = focused ? 'green' : color;

            if (route.name === 'Login') {
              iconName = focused ? 'log-in' : 'log-in-outline';
            } else if (route.name === 'Register') {
              iconName = focused ? 'person-add' : 'person-add-outline';

            }
            return ;
          },
        })}

        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
          style: styles.tabBar,
          labelStyle: styles.tabLabel,
        }} >

        
          {() => (
            
              Login
              

              
              
                Login
                {errorMessage && {errorMessage}}
              
            


          )}