React: setting up firebase auth with firebase-ui

Question

I'm trying to follow the instructions here to setup firebase auth using firebase ui.

I added the firebase ui module using yarn. I have a firebase folder in my root directory in my react app. In it, I have a firebase.js file with:

import * as firebase from 'firebase';
import * as firebaseui from 'firebaseui'

const config = {
    apiKey: process.env.FIREBASE_API_KEY,
    authDomain: process.env.FIREBASE_AUTH_DOMAIN,
    databaseURL: process.env.FIREBASE_DATABASE_URL,
    projectId: process.env.FIREBASE_PROJECT_ID,
    storageBucket: process.env.FIREBASE_STORAGE_BUCKET, 
    messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
  };

  firebase.initializeApp(config);

  const database = firebase.database();

  firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });

When I try to check that I am correct to this point, I get a console error that says:

firebaseApp.js:339 Uncaught FirebaseError {code: "app/duplicate-service", message: "Firebase: Firebase service named 'auth' already registered (app/duplicate-service).", name: "auth", stack: "auth: Firebase: Firebase service named 'auth' alre…t 

I don't call firebase anywhere else in the app, so I think the only way this can be an error is if firebaseui already imports firebase. I tried removing the first import statement, but that then gives an error saying that firebase is not defined.

Does anyone know how to get the setup right? I have seen this question. I can see the differences in approach. I have tried using the config statement used in the question. I still get the same problem.

Since posting this question, I hired someone on upwork to set this up for me. Despite spending USD400, I still have this issue. Other questions have posted this problem and identified a duplication in angular flare. I don't use angular.

The upwork contractor setup is as follows:

const config = {
  apiKey: settings.FIREBASE_API_KEY,
  authDomain: settings.FIREBASE_AUTH_DOMAIN,
  databaseURL: settings.FIREBASE_DB_URL,
  projectId: settings.FIREBASE_PROJECT_ID,
  storageBucket: settings.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: settings.FIREBASE_MESSAGE_ID,
}

if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

const database = firebase.database();
const auth = firebase.auth()

export {firebase, auth, database };

There is an extra const in this block for firebase.auth. I tried removing it but it doesn't make any difference. The console error still appears.

The SO question I linked above shows import statements importing from the library. All my import statements import my firebase.js file, which itself imports firebase. I wonder if that's the duplication? However, the import has the if statement in it, so I can't understand why that could be the problem. I do import FirebaseUI in my components, but I can't figure out if that is somehow importing firebase in duplication.

I'm looking for a solution with react. Does anyone know ho to configure firebase for use with a react app?

Answer 1

For all the users reaching here for integrating Firebase-UI in react application, I strongly recommend official node module. https://www.npmjs.com/package/react-firebaseui

It is very well captured in npm. To explain in short:

1. Assuming you already have firebase in your project, install react-firebaseui via command: $ npm install --save react-firebaseui

    const uiConfig = {
    // Popup signin flow rather than redirect flow.
    signInFlow: 'popup',
    // Redirect to /signedIn after sign in is successful. Alternatively you can 
    provide a callbacks.signInSuccess function.
    signInSuccessUrl: '/signedIn',
    // We will display Google and Facebook as auth providers.
    signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID
    ]
    };
   

Then add below tag in your render/return of the componant:

<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>