CODEWITHSUNDEEP
javascriptfirebasefirebase-authentication
Jason Madi
Jason Madi

Reputation: 83

Cannot connect users

I'm currently working on a website that has an admin dashboard but I can't log in. Firebase config is copied from the website and Auth is activated with Email and Password. Here my code:

    <script src="https://www.gstatic.com/firebasejs/8.0.1/firebase-auth.js"></script>
    <script>
        // CONFIG FIREBASE
        const firebaseConfig = {
            // Firebase config is copied from the Firebase project
        };
        firebase.initializeApp(firebaseConfig);

        // WORK ON USER
        const myButton = document.getElementById('signing');
        const emailField = document.getElementById('inputEmail');
        const passwordField = document.getElementById('inputPassword');

        myButton.addEventListener(`click`, function() {
            const email = emailField.value;
            const password = passwordField.value;
            
            firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
                const errorCode = error.code;
                const errorMessage = error.message;
                alert('Error : ' + errorCode + ' - ' + errorMessage);
            });

            firebase.auth().onAuthStateChanged(function(user) {
                if (user) {
                    const displayName = user.displayName;
                    const emailU = user.email;
                    alert('Hello ' + displayName + '!');
                    alert('Your mail is ' + emailU);
                } else {
                    alert('Not logged !');
                }
            });
        });
    </script>`

Code of the corresponding form:

<form class="form-signin">
  <img
    class="mb-4"
    src="assets/images/logo.png"
    alt=""
    width="72"
    height="72"
  />
  <h1 class="h3 mb-3 font-weight-normal">Se connecter</h1>
  <label for="inputEmail" class="sr-only">Email address</label>
  <input
    type="email"
    id="inputEmail"
    class="form-control"
    placeholder="Email"
    required
    autofocus
  />
  <label for="inputPassword" class="sr-only">Password</label>
  <input
    type="password"
    id="inputPassword"
    class="form-control"
    placeholder="Mot de passe"
    required
  />
  <button
    id="signing"
    class="btn btn-lg btn-primary btn-block"
    type="submit"
  >
    Se connecter
  </button>
  <p class="mt-5 mb-3 text-muted">Les papilles de Lydie</p>
</form>

Upvotes: 1

Views: 50

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83191

Your problem most probably comes from the fact that your form is submitted before the Firebase signInWithEmailAndPassword() method is triggered.

As seen in the code for the form, you declare your button with a type submit:

<form class="form-signin">
    // ....
    <button id="signing" class="..." type="submit">Se connecter</button>
    // .... 
</form>

You don't want to submit the form, you just want to get the values entered in the fields and pass them to the signInWithEmailAndPassword() method.

So, if you assign the button type to your button, as follows, it should solve your problem, because the form will not be submitted.

<button id="signing" class="..." type="button">Se connecter</button>

Upvotes: 1

Related Questions