title: I am very confused on how to include Firebase into html
body: <p>I recently started integrating firebase into my html project, i installed firebase-tools using npm and initialized the project, but then after I included all the scripts mentioned on the firebase website, I used firebase.auth() to sign in the user, then I got an error that firebase is undefined, so I inserted these script tags into my code: </p>
  
  <pre><code>  &lt;script src="https://www.gstatic.com/firebasejs/7.13.1/firebase.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.gstatic.com/firebasejs/firebase/init.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-app.js"&gt;&lt;/script&gt;
  
    &lt;!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics --&gt;
    &lt;script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-analytics.js"&gt;&lt;/script&gt;
  
    &lt;!-- Add Firebase products that you want to use --&gt;
    &lt;script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-auth.js"&gt;&lt;/script&gt;
    &lt;script src="https://www.gstatic.com/firebasejs/7.13.1/firebase-firestore.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>and below these I had my firebase config:</p>
  
  <pre><code>  &lt;script&gt;
      // Your web app's Firebase configuration
      var firebaseConfig = {
        apiKey: "MY_API_KEY",
        authDomain: "MY_PROJECT.firebaseapp.com",
        databaseURL: "https://MY_PROJECT.firebaseio.com",
        projectId: "MY_PROJECT",
        storageBucket: "MY_PROJECT.appspot.com",
        messagingSenderId: "MESSAGER_ID",
        appId: "MY_APP_ID",
        measurementId: "MEASUREMENT_ID"
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
    &lt;/script&gt;
    &lt;script&gt;
      async function signIn(email, password){
        await firebase.auth().signInWithEmailAndPassword({
          email,
          password
        }).then(() =&gt; {window.location.href = "HomeScreen.html"}).catch((err) =&gt; {
          document.getElementById('FailedSignIn').style.display = "flex";
        })
      }
    &lt;/script&gt;
  </code></pre>
  
  <p>And then I got these errors:</p>
  
  <pre><code>[2020-03-30T17:24:20.332Z] @firebase/app: Warning: Firebase is already defined in the global scope. Please make sure Firebase library is only loaded once.
  Website.htmlAccess to fetch at 'https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations' from origin 'http://localhost:63342' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  https:/…base-analytics.js:1POST https://firebaseinstallations.googleapis.com/v1/projects/MY_PROJECT/installations net::ERR_FAILED
  TypeError: Failed to fetch
  
  </code></pre>
  
  <p>So I would really appreciate some clarification of the ordering of these script tags, as well as how to properly initialize firebase and use it in my file without any errors.</p>