CODEWITHSUNDEEP
javascripthtmlfirebase
Henry Hudson
Henry Hudson

Reputation: 3

Firebase: not working (.auth() is not a function, firebase is not declared, etc)

My renderer.js code:


// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "some API key",
    authDomain: "some auth domain",
    databaseURL: "some database url",
    projectId: "some project id",
    storageBucket: "some storagebucket",
    messagingSenderId: "some messaging sender id",
    appId: "some app id",
    measurementId: "some measurement id"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

  var bcont = document.getElementById('bcont');

  bcont.addEventListener('click',function(){
    var firstname = document.getElementById('fn').value;
    var lastname = document.getElementById('ln').value;
    var email = document.getElementById('email').value;
    var password = document.getElementById('pass1').value;
    var cpassword = document.getElementById('pass2').value;

    firebase.auth().createUserWithEmailAndPassword(email,password).catch(function(error){
        if(error != null){
            console.log(error.message);
            return;
        }
        alert('Success');
    })
  });

index.html code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <link rel="stylesheet" href="../assets/css/main.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <title>&#65279;</title>
  </head>
  <body>


    <div class="bbg">
      <div class="full">
          <div class="left">
            <div>
              <t id="welcome">Welcome to</t>
              <div>
                <t id="title">This Thing</t>
                <br>
                <br>
                <t id="signuptitle">Signup</t>
                <img id="fimg" src="../assets/images/fpimg.png">
              </div>
            </div>
          </div>
          <div class="right">
            <div class="wbg">
              <div>
                <br/>
                <t class="formtext">First Name</t>
              </div>
              <input id="fn" class="input">
              <br/>
              <div>
                <t class="formtext">Last Name</t>
              </div>
              <input id="ln" class="input">
              <br/>

              <div>
                <br/>
                <t class="formtext">Email Address</t>
              </div>
              <input id="email" class="input">
              <br/>

              <div>
                <br/>
                <t class="formtext">Password</t>
              </div>
              <input id="pass1" class="input" type="Password">
              <br/>
              <div>
                <t class="formtext">Confirm Password</t>
              </div>
              <input id="pass2" class="input" type="Password">
              <br/>
              <br/>
              <button id="bcont" class="b_cont"><b>Continue</b></button>
              <br/>
              <br/>
              <br/>
              <t class="textfooter">Already have an account? <t class="a-login"> Login</t></t>
            </div>
            <!--<script>
              function continueCheck(){
                if(document.getElementById('pass1').textContent != document.getElementById('pass2').textContent){
                  document.getElementById('pass1').style.borderColor = '#e60200';
                  document.getElementById('pass2').style.borderColor = '#e60200';
                }
              }
            </script>-->
          </div>
        </div>  
    </div>



    <!-- You can also require other files to run in this process -->
    <script src="renderer.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>
  </body>
</html>

I get the error in the console of Uncaught Reference Error: firebase is not defined.

How would I be to fix this?

Also: How can I store first and last name as well as email + password?

Please note: this is the correct link and I have only the Email/Password sign-in method enabled.

Not sure what to do here, any help would be appreciated!

Upvotes: 0

Views: 35

Answers (1)

Emilien Lemaire
Emilien Lemaire

Reputation: 96

You should put your includes in the right order:

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

So renderer.js knows firebase exists.

Upvotes: 1

Related Questions