javascript – Auth is undefined

I am new to programming and don’t know the problem here. This is the HTML file.

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <title>GameGuidez</title>
</head>
<body class="grey lighten-3">

  <!-- NAVBAR -->
  <nav class="z-depth-0 grey lighten-4">
    <div class="nav-wrapper container">
      <a href="#" class="brand-logo">
        <img src="img/logo.svg" style="width: 180px; margin-top: 10px;">
      </a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li class="logged-in">
            <a href="#" class="grey-text modal-trigger" data-target="modal-account">Account</a>
          </li>
          <li class="logged-in">
            <a href="#" class="grey-text" id="logout">Logout</a>
          </li>
          <li class="logged-in">
            <a href="#" class="grey-text modal-trigger" data-target="modal-create">Create Guide</a>
          </li>
          <li class="logged-out">
            <a href="#" class="grey-text modal-trigger" data-target="modal-login">Login</a>
          </li>
          <li class="logged-out">
            <a href="#" class="grey-text modal-trigger" data-target="modal-signup">Sign up</a>
          </li>
        </span>
      </ul>
    </div>
  </nav>

  <!-- SIGN UP MODAL -->
  <div id="modal-signup" class="modal">
    <div class="modal-content">
      <h4>Sign up</h4><br />
      <form id="signup-form">
        <div class="input-field">
          <input type="email" id="signup-email" required />
          <label for="signup-email">Email address</label>
        </div>
        <div class="input-field">
          <input type="password" id="signup-password" required />
          <label for="signup-password">Choose password</label>
        </div>
        <button class="btn yellow darken-2 z-depth-0">Sign up</button>
      </form>
    </div>
  </div>

  <!-- LOGIN MODAL -->
  <div id="modal-login" class="modal">
    <div class="modal-content">
      <h4>Login</h4><br />
      <form id="login-form">
        <div class="input-field">
          <input type="email" id="login-email" required />
          <label for="login-email">Email address</label>
        </div>
        <div class="input-field">
          <input type="password" id="login-password" required />
          <label for="login-password">Your password</label>
        </div>
        <button class="btn yellow darken-2 z-depth-0">Login</button>
      </form>
    </div>
  </div>

  <!-- ACCOUNT MODAL -->
  <div id="modal-account" class="modal">
    <div class="modal-content center-align">
      <h4>Account details</h4><br />
      <div class="account-details"></div>
    </div>
  </div>

  <!-- CREATE GUIDE MODAL -->
  <div id="modal-create" class="modal">
    <div class="modal-content">
      <h4>Create Guide</h4><br />
      <form id="create-form">
        <div class="input-field">
          <input type="text" id="title" required>
          <label for="title">Guide Title</label>
        </div>
        <div class="input-field">
          <textarea id="content" class="materialize-textarea" required></textarea>
          <label for="content">Guide Content</label>
        </div>
        <button class="btn yellow darken-2 z-depth-0">Create</button>
      </form>
    </div>
  </div>

  <!-- GUIDE LIST -->
  <div class="container" style="margin-top: 40px;">
    <ul class="collapsible z-depth-0 guides" style="border: none;">
      <li>
        <div class="collapsible-header grey lighten-4">Guide title</div>
        <div class="collapsible-body white">Lorem ipsum dolor sit amet.</div>
      </li>
      <li>
        <div class="collapsible-header grey lighten-4">Guide title</div>
        <div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header grey lighten-4">Guide title</div>
        <div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
      <li>
        <div class="collapsible-header grey lighten-4">Guide title</div>
        <div class="collapsible-body white"><span>Lorem ipsum dolor sit amet.</span></div>
      </li>
    </ul>
  </div>

  <script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-analytics.js";
  import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-firestore.js";
  import { getAuth } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-auth.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyDtOHhUSTmYbFkuWvy-WNPU3v_-zMcwD3Y",
    authDomain: "rule-95158.firebaseapp.com",
    databaseURL: "https://rule-95158-default-rtdb.firebaseio.com",
    projectId: "rule-95158",
    storageBucket: "rule-95158.appspot.com",
    messagingSenderId: "840685446092",
    appId: "1:840685446092:web:7857f9d2aab144e9807369",
    measurementId: "G-L4PSF64BQL"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);
  const auth = firebase.auth();
  const db = firebase.firestore();

  db.settings({timestampsInSnapshots: true});
</script>
  
  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="scripts/auth.js"></script>
  <script src="scripts/index.js"></script>
</body>
</html>

This is the auth.js file

const signupForm = document.querySelector('#signup-form');
signupForm.addEventListener('submit', (e)=>{
    e.preventDefault();

    const email = signupForm['signup-email'].value;
    const password = signupForm['signup-password'].value;

    console.log(email, password);

    auth.createUserWithEmailAndPassword(email, password).then(cred=>{
    console.log(cred)
    })
})

As you can see the auth.createUserWithEmailAndPassword brings an error in the console saying auth is not defined. I believe the problem is const auth= firebase.auth(); is not a function but I can’t get the way to initialize this auth. Can anyone help me? And also this is my first web project and I am very new to web development. All the code is from this one youtube The Net Ninja so all credit for the code goes to them. And I think I imported the firebase wrong because the documentation is different from the video but anyway please help me.

Leave a Comment