How to solve this error -> undefined is not an object (evaluating '_app.default.auth)

Question

I'm new to react native and I am using it to create an app sort of like an Instagram clone. I am using React Native in Javascript, Expo cli and firebase. Everything works fine until I try to regiser to the app. This is an app a company has asked me to make as part of my university internship and I've never used react/react-native/firebase etc before now.

Here is the code I have:

Firebase.js

import app from 'firebase/app';

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

class Firebase {
  constructor() {
    app.initializeApp(firebaseConfig);
  }
}

export default Firebase;

Register.js

import React, { Component } from 'react'
import { View, Button, TextInput } from 'react-native'
import app from 'firebase/app'
import 'firebase/auth'

export class Register extends Component {
    constructor(props) {
        super(props);

        this.state = {
            email: '',
            password: '',
            name: ''
        }
        
        this.onSignUp = this.onSignUp.bind(this)
    }

    onSignUp() {
        const { email, password, name } = this.state;
        app.auth().createUserWithEmailAndPassword(email, password)
            .then((result) => {
                console.log(result)
            })
            .catch((error) => {
                console.log(error)
            })
    }

    render() {
        return (
            <View>
                <TextInput 
                    placeholder="Name"
                    onChangeText={(name) => this.setState({ name })}
                />
                <TextInput 
                    placeholder="Email"
                    onChangeText={(email) => this.setState({ email })}
                />
                <TextInput 
                    placeholder="Password"
                    secureTextEntry={true}
                    onChangeText={(password) => this.setState({ password })}
                />

                <Button 
                    onPress={() => this.onSignUp()}
                    title="Sign Up"
                />
            </View>
        )
    }
}

export default Register

Can somebody please help me

Answer 1

Seems like your firebase app never initialize as haven't constructed the Firebase object.

As you're using expo you can simply follow this guideline.

Add following in you App.js to initialize your firebase app. (You could delete Firebase.js)

import { initializeApp } from 'firebase/app';

// Initialize Firebase
const firebaseConfig = {
  apiKey: "AI*********",
  authDomain: "*********",
  projectId: "*********",
  storageBucket: "*********",
  messagingSenderId: "*********",
  appId: "*********",
  measurementId: "*********"
};

initializeApp(firebaseConfig);

//App
export default function App(){
...
}

OR

I think you can import Firebase.js in your App.js and simply create a new instance like

import Firebase from './Firebase'

new Firebase();


//App
export default function App(){
...
}