I'm developing a web site using firebase. I'm good at the beginning even more I've faced problems. The login is going normal, but the registration is not. The error - > "Uncaught TypeError: firebase.auth (...) createUserEmailAndPassword is not a function" NOTE: The auth () codes are from the firebase documentation.
Thank you in advance !!
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
document.getElementById("user_div").style.display = "block";
document.getElementById("login_div").style.display = "none";
var user = firebase.auth().currentUser;
if(user != null){
var email_id = user.email;
var email_verificado = user.emailVerified;
document.getElementById("usuario_nome").innerHTML = "Bem vindo! : " + email_id + " Veficação: " + email_verificado;
}
} else {
// No user is signed in.
document.getElementById("user_div").style.display = "none";
document.getElementById("login_div").style.display = "block";
}
});
function login(){
var userEmail = document.getElementById("campo_email").value;
var userSenha = document.getElementById("campo_senha").value;
firebase.auth().signInWithEmailAndPassword(userEmail, userSenha).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
window.alert("Erro: " + errorMessage);
// ...
});
}
function cadastro_usuario(){
var userEmail = document.getElementById("campo_email").value;
var userSenha = document.getElementById("campo_senha").value;
firebase.auth().createUserEmailAndPassword(userEmail, userSenha).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
window.alert("Erro: " + errorMessage);
// ...
});
}
function logout(){
firebase.auth().signOut();
}body {
background: #fff;
padding: 0px;
margin: 0px;
font-family: 'Nunito', sans-serif;
font-size: 16px;
}
input, button {
font-family: 'Nunito', sans-serif;
font-weight: 700;
}
.main-div, .loggedin-div {
width: 20%;
margin: 0px auto;
margin-top: 150px;
padding: 20px;
display: none;
}
.main-div input {
display: block;
border: 1px solid #ccc;
border-radius: 5px;
background: #fff;
padding: 15px;
outline: none;
width: 100%;
margin-bottom: 20px;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.main-div input:focus {
border: 1px solid #777;
}
.main-div button, .loggedin-div button {
background: #5d8ffc;
color: #fff;
border: 1px solid #5d8ffc;
border-radius: 5px;
padding: 15px;
display: block;
width: 100%;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
.main-div button:hover, .loggedin-div button:hover {
background: #fff;
color: #5d8ffc;
border: 1px solid #5d8ffc;
cursor: pointer;
}<!doctype html>
<html>
<head>
<title>Firebase Login</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<meta charset="utf-8">
</head>
<body>
<div id="login_div" class="main-div">
<h3>Login</h3>
<input type="email" placeholder="Email" id="campo_email" />
<input type="password" placeholder="Senha" id="campo_senha" />
<button onclick="login()">Logar</button>
<br/>
<button onclick="cadastro_usuario()">Criar nova conta</button>
</div>
<div id="user_div" class="home-div">
<h3>Bem vindo!</h3>
<p id="usuario_nome">Logado!</p>
<button onclick="logout()">Logout</button>
</div>
<script src="https://www.gstatic.com/firebasejs/5.0.3/firebase.js"></script><script>//InitializeFirebasevarconfig={apiKey:"xxxx",
authDomain: "xxxx",
databaseURL: "xxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx"
};
firebase.initializeApp(config);
</script>
<script src="index.js"></script>
</body>
</html>