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?

CodePudding user response：

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.