Uncaught ReferenceError: initializeApp is not defined HTML, firebase, auth-CodePudding

This is my first time creating a website and I just want to link an auth to my existing firebase but there are so little resources to guide me unlike on a mobile app. I'm not actually sure how to initialize a firebase or what's the right code. I'm trying for hours of different codes but nothing seems to work.

here is my js file auth.js:

const firebaseConfig = {
apiKey: "AIzaSyDA7bSowKL6wCYQvYshe_OeR_uOSyhUbX0",
authDomain: "papamove-delivery-cb80e.firebaseapp.com",
projectId: "papamove-delivery-cb80e",
storageBucket: "papamove-delivery-cb80e.appspot.com",
messagingSenderId: "27728242106",
appId: "1:27728242106:web:745e349a85d6cafd1b6983",
measurementId: "G-3H1QJ9HJTB"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

and here is my html file:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset='utf-8'>
      <meta http-equiv='X-UA-Compatible' content='IE=edge'>
      <title>Papamove Admin</title>
      <meta name='viewport' content='width=device-width, initial-scale=1'>
      <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel='stylesheet' type="text/css" href='css/style.css' >
    
</head>
<body>

    <script  type="text/javascript" src='script/auth.js' ></script>
    <script  src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js" type="module"></script>
    <script  src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth.js" type="module"></script>
    <script  src="https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js" type="module"></script>
    <div id="login_div"class='main-div'>
        <h3> Papamove Admin</h3>
        <input type="email" placeholder="Email..." id="email_field"/>
        <input type="password" placeholder="Password..." id="password_field"/>
        <button onclick="signIn()">Login</button>
    </div>
    <div id="user_div" class="loggedin-div">
        <h3>Welcome User</h3>
        <p> Dashboard</p>
        <button onclick="signOut()">Logout</button>
    </div>
    
 
      
</body>
    </html>

CodePudding user response：

You need to change the structure of the html document. You are performing a javascript operation, but the DOM document is almost non-existent.

Edit the structure of your html according to the following model.

<!DOCTYPE html>
<html>

  <head>
    <!-- Include CSS and META -->
    <title>## YOUR TITLE ##</title>
  </head>

 <body>
 <!-- Insert the main html here. -->
 
 <!-- Import JS file -->
 <script  src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js" type="module"></script>
 <script  src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth.js" type="module"></script>
 <script  src="https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js" type="module"></script>
 <script  type="text/javascript" src='script/auth.js' ></script>
 </body>

</html>

CodePudding user response：

Update:

I used an older version instead of the latest:

<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js"> </script>

This older version seems to work fine, I will test this version for CRUD operations and will see if this will be compatible and doable. I know that the newer version is future proof but I gave up, as long as this will work I'm fine with an outdated version.

Older Version:

<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase.js"> </script>