Firebase Authentication not working with html form element
Question
I'm following the Firebase examples that uses web authentication, and I'm not able to login if I use the textboxes and buttons inside a html form element.
Here is the html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script> </head> <body> <form id="app"> <input type="email" id="txtEmail" placeholder="Email"> <input type="password" id="txtPassword" placeholder="Password"> <button id="btnLogin">Login</button> <button id="btnSignUp">SignUp</button> <button id="btnLogout">Logout</button> </form> </body> <script src="app.js"></script> </html>
And the js:
(function() { // Initialize Firebase const config = { apiKey: "MyData", authDomain: "MyData", databaseURL: "MyData", projectId: "MyData", storageBucket: "MyData", messagingSenderId: "MyData" }; firebase.initializeApp(config); const txtEmail = document.getElementById('txtEmail'); const txtPassword = document.getElementById('txtPassword'); const btnLogin = document.getElementById('btnLogin'); const btnSignUp = document.getElementById('btnSignUp'); const btnLogout = document.getElementById('btnLogout'); btnLogin.addEventListener('click', e => { const email = txtEmail.value; const pass = txtPassword.value; const auth = firebase.auth(); const promise = auth.signInWithEmailAndPassword(email, pass); promise.catch(e => console.log(e.message)); }); btnSignUp.addEventListener('click', e => { const email = txtEmail.value; const pass = txtPassword.value; const auth = firebase.auth(); const promise = auth.createUserWithEmailAndPassword(email, pass); promise .catch(e => console.log(e.message)); }); btnLogout.addEventListener('click', e => { firebase.auth().signOut(); }); firebase.auth().onAuthStateChanged(firebaseUser => { if(firebaseUser){ console.log(firebaseUser); btnLogout.style.display = 'block'; } else { console.log('not logged in'); btnLogout.style.display = 'none'; } }); }());
When I try to login, the console log rises the following message:
"It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use. For the CDN builds, these are available in the following manner (replace with the name of a component - ie auth, database, etc): https://www.gstatic.com/firebasejs/5.0.0/firebase- .js"
If I move the inputs and buttons outside the form element, the login works perfectly.
What am I missing?
2 answers
solution1
1 ACCPTED 2018-05-28 17:46:48
For your case best thing is to use firebase UI with CDN instead of npm and bower
No worries and no confusion, no errors (I mean less depends on our skill)
- Add Firebase Authentication to your web application.
Include FirebaseUI via CDN:
Include the following script and CSS file in the tag of your page, below the initialization snippet:
<script src="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.5.1/firebaseui.css" />
In the Firebase console, open the Authentication section and enable email and password authentication.
ui.start('#firebaseui-auth-container', { signInOptions: [ firebase.auth.EmailAuthProvider.PROVIDER_ID ], // Other config options... });
Other Providers:
ui.start('#firebaseui-auth-container', { signInOptions: [ // List of OAuth providers supported. firebase.auth.GoogleAuthProvider.PROVIDER_ID, firebase.auth.FacebookAuthProvider.PROVIDER_ID, firebase.auth.TwitterAuthProvider.PROVIDER_ID, firebase.auth.GithubAuthProvider.PROVIDER_ID ], // Other config options... });
For more info, please follow this link : https://firebase.google.com/docs/auth/web/firebaseui
solution2
1 2018-05-31 18:55:13
Look at this index.html file, this way I can login perfectly, because I commented the form element.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script> </head> <body> <!-- <form id="app"> --> <input type="email" id="txtEmail" placeholder="Email"> <input type="password" id="txtPassword" placeholder="Password"> <button id="btnLogin">Login</button> <button id="btnSignUp">SignUp</button> <button id="btnLogout">Logout</button> <!-- </form> --> </body> <script src="app.js"></script> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase.js"></script> </head> <body> <form id="app"> <input type="email" id="txtEmail" placeholder="Email"> <input type="password" id="txtPassword" placeholder="Password"> <button id="btnLogin">Login</button> <button id="btnSignUp">SignUp</button> <button id="btnLogout">Logout</button> </form> </body> <script src="app.js"></script> </html>
But using the html like the one I posted initially (using form element) rises the following error to the console:
"A network error (such as timeout, interrupted connection or unreachable host) has occurred."
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.