title: React: setting up firebase auth with firebase-ui
body: <p>I'm trying to follow the instructions <a href="https://github.com/firebase/firebaseui-web#demo" rel="noreferrer">here</a> to setup firebase auth using firebase ui.</p>
  
  <p>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:</p>
  
  <pre><code>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;
      // ...
    });
  </code></pre>
  
  <p>When I try to check that I am correct to this point, I get a console error that says:</p>
  
  <pre><code>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 
  </code></pre>
  
  <p>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.</p>
  
  <p>Does anyone know how to get the setup right?  I have seen <a href="https://stackoverflow.com/questions/44034691/react-nextjs-firebase-error-refresh-firebase-app-named-default-already-exist">this question</a>. I can see the differences in approach. I have tried using the config statement used in the question. I still get the same problem.</p>
  
  <p>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.</p>
  
  <p>The upwork contractor setup is as follows:</p>
  
  <pre><code>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 };
  </code></pre>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>I'm looking for a solution with react. Does anyone know ho to configure firebase for use with a react app?</p>