I get an Error when I try to use Firebase Auth

Viewed 80

I'm Building my first time a website thats include firebase (firebase auth). I get an Error when I run my HTML Code in the Browser.

Uncaught TypeError: firebase.auth is not a function at HTMLButtonElement. (app.js:24)

I dont find any articels too this issue. I've already reinstalled node and the firebase tools. Has anybody an answer for me, I really dont know whats to do... Heres my Index.html file and my App.js File Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log In Page</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-app.js"></script>
</head>
<body>
    <div class="Main-Div">
        <h3 class="Headline">
            Do you have an Account?
        </h3>
        <input type="text" placeholder="Your Email..." class="AccountInput" type="email" id="txtemail">
    </br>
        <input type="text" placeholder="Your Passcode..." class="AccountInput" type="Password" id="txtpassword">
    </br>
        <button class="LogInButton" id="1Button">Log In</button>
        <button class="SignUpButton" id="2Button">Sign Up now!</button>
        <button class="LogOutButton" id="3Button">Log Out</button>
    </div>
    <script src="app.js"></script>
</body>
</html>

And here my other File, App.js: (i've censored the datas about my firebase-database)

(function(){
const firebaseConfig = {
    apiKey: "Censored",
    authDomain: "Censored",
    projectId: "Censored",
    storageBucket: "Censored",
    messagingSenderId: "Censored",
    appId: "Censored"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);

// Get Elements
  const txtEmail = document.getElementById('txtemail');
  const txtPassword = document.getElementById('txtpassword');
  const btnLogIn = document.getElementById('1Button');
  const btnSignUp = document.getElementById('2Button');
  const btnLogOut = document.getElementById('3Button');

  btnLogIn.addEventListener('click', e => {
    const email = txtEmail.value;
    const password = txtPassword.value;
    const auth = firebase.auth();

    const promise = auth.signInWithEmailAndPassword(email, pass);
    promise.catch(e => console.log(e.message));
  });

}());

Thanks for your attention Greetings Max

1 Answers

In index.html you imported only the core firebase library firebase-app.js in order to use a firebase service (firestore/storage etc) in your web app, you need to import that respective service from a CDN.

in your case, you need to add firebase-auth.js in your <head></head>

here is the link

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

in this page you can find all of the services CDNs

also you need to go to your project's firebase dashboard and enable password authentication as stated in this documentation

Related