CODEWITHSUNDEEP
firebasereact-native
Annabelle Sykes
Annabelle Sykes

Reputation: 131

Error: Firebase: No Firebase App '[DEFAULT]' has been created

I have a React Native app that uses Firebase for various functions. It was working perfectly for 2 weeks until I got the below error. I haven't changed anything in the App.js so don't know why this issue would come across.

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

Here is my config code placed in my App.js:

const firebaseConfig = {
    apiKey: '<api-key>',
    authDomain: '<app-name>.firebaseapp.com',
    databaseURL: 'https://<app-name>.firebaseio.com',
    projectId: '<project-id>',
    storageBucket: '<app-name>.appspot.com',
    messagingSenderId: '<messaging-sender-id>',
    appId: '<app-id>'
};
firebase.initializeApp(firebaseConfig);

This code only runs if I comment out the firebase code like the below in one of my components:

const { currentUser } = firebase.auth();
console.log(currentUser);

Here is my console.log(firebase.app());

enter image description here

Upvotes: 1

Views: 14915

Answers (3)

Mpwanyi Samuel
Mpwanyi Samuel

Reputation: 373

I used to have the same issue in almost all my firebase projects but the solution to your problem is easy. You are trying to check an authenticated user as I see. The problem is that that method is asynchronous and the way you are implementing it isn't right. What you would do is use the firebase.onAuthstateChanged method and place it just after your firebase initialization area, something like this:

firebase.initializeApp({
  apiKey: '<api-key>',
  authDomain: '***',
  databaseURL: '***',
  projectId: '***',
  storageBucket: '***',
  messagingSenderId: '***',
  appId: '***',
  measurementId: 'G-HSYR9HXZF6',
});
// Enabling Offline Capability
firebase.firestore().settings({
  cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED,
});
firebase.firestore().enablePersistence();
// Listen to when a user logs in or logs out
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    const userDetails = {
      id: user.uid,
      name: user.displayName,
      email: user.email,
      provider: user.providerData[0].providerId,
    };
    console.log(userDetails)
  } else {
    console.log('No User Found')
  }
});

Upvotes: 0

oyuka
oyuka

Reputation: 61

enter image description here

In the react native app you don't have to configure firebase from javascript side.
In the IOS side, for example, add following lines within AppDelegate.m to initialize firebase manually.

At the top of the file import the Firebase module:

#import <Firebase.h>

Within the didFinishLaunchingWithOptions method, add the configure method:

(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    if ([FIRApp defaultApp] == nil) {
      [FIRApp configure];
    }
}

Upvotes: 2

andresmijares
andresmijares

Reputation: 3744

UPDATE You have all your configuration settings on your componentDidMount, might run several times while which leads to the problem you are having, I made the following changes and worked like a charm:

I create a firebase.js on the root, next to the App.js, that files look like this

import `firebase/app`
require(`firebase/auth`)

const firebaseConfig = {
    apiKey: '<api-key>',
    authDomain: '<app-name>.firebaseapp.com',
    databaseURL: 'https://<app-name>.firebaseio.com',
    projectId: '<project-id>',
    storageBucket: '<app-name>.appspot.com',
    messagingSenderId: '<messaging-sender-id>',
    appId: '<app-id>'
};
if (!firebase.apps.length) {
   firebase.initializeApp(firebaseConfig);
}

export auth = firebase.auth()
export default firebase

And your App.js then looks like this:

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reducers from './reducers';
import ReduxThunk from 'redux-thunk';
import Router from './Router';
import { auth } from './firebase' // <----

class App extends Component {
    componentDidMount () {
       this.checkAuth()
    }
    checkAuth = () {
       auth.onAuthStateChanged(function(user, err) {
          console.log(user);
            if (user) {
              console.log(user);
               Actions.signUpVerify();
            } else {
                console.log(err);
            }
      });
    }

    render() {
        const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
        return (
            <Provider store={store}>
                <Router />
            </Provider>
        )
    }
}

export default App;

You should not run the auth on your render method cause it might run potentially a lot of times.

Upvotes: 5

Related Questions