React Native - FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created

Question

I am trying to make email authentication when this problem happen

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

From the things I read, people say that this problem is about the timing problem, but I am not sure what is the cause of this error in my app

import React from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {Button, Gap, Input} from '../../components/atoms';
import {Fire} from '../../config';
import {Header} from '../../components/molecules';
import {useForm} from '../../utils';

import {getAuth, createUserWithEmailAndPassword} from 'firebase/auth';

export default function Register() {
  const [form, setForm] = useForm({
    fullName: '',
    bloodType: '',
    email: '',
    password: '',
  });

  const onContinue = () => {
    console.log(form);
    const auth = getAuth();
    createUserWithEmailAndPassword(auth, form.email, form.password)
      .then(success => {
        // Signed in
        console.log('register success: ', success);
        // ...
      })
      .catch(error => {
        const errorMessage = error.message;
        console.log('error register: ', errorMessage);
        // ..
      });
  };

  return (
    <View>
      <Header title="Register User" />
      <View style={styles.content}>
        <ScrollView showsVerticalScrollIndicator={false}>
          <Input
            label="Full Name"
            value={form.fullName}
            onChangeText={value => setForm('fullName', value)}
          />
          <Gap height={24} />
          <Input
            label="Golongan Darah"
            value={form.bloodType}
            onChangeText={value => setForm('bloodType', value)}
          />
          <Gap height={24} />
          <Input
            label="Email"
            value={form.email}
            onChangeText={value => setForm('email', value)}
          />
          <Gap height={24} />
          <Input
            label="Password"
            value={form.password}
            onChangeText={value => setForm('password', value)}
            secureTextEntry
          />
          <Gap height={40} />
          <Button title="Register" onPress={onContinue} />
        </ScrollView>
      </View>
    </View>
  );
}

I put my config (Fire) before the getAuth import, so is there anything I'm missing right now?

Answer 1

I'd recommend initializing and exporting required Firebase services in config as shown below:

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'

const Fire = initializeApp({...firebaseConfig})

const auth = getAuth(Fire);

export { auth }

You can now import this auth instance and use it with createUserWithEmailAndPassword instead of using getAuth() in every component.