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>
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>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加