Unable to add in new user to Firebase after the alert box? - javascript

I am trying to create a register user page and saving it into Firebase.
My form includes first name, last name, email, password and confirm password.
I am able to create a new object into my Firebase Database, but when I added the if else statement to make sure the password and confirm password matches, it keeps on giving me:
"Uncaught Error: Firebase.push failed: first argument contains undefined in property 'projectdatabase.password' error."
after the alert box.
It works fine if password and confirm password matches. How can I solve this error?
if(firebase.apps.length===0){
firebase.initializeApp(config);
var sFName = document.getElementById("sfname").value;
var sLName = document.getElementById("slname").value;
var sEmail = document.getElementById("semail").value;
if((document.getElementById("spassword").value)==(document.getElementById("sconfirmpassword").value)){
var sPassword = document.getElementById("spassword").value;
var dbRef = firebase.database().ref().child('projectdatabase');
//store the data in Javascript object
var postData = {
firstname : sFName,
lastname : sLName,
email : sEmail,
password : sPassword
};
dbRef.push(postData);
document.getElementById("response").innerHTML =
"Registered!"
} else{
alert("Re-Enter confirm password!")
var sFName = document.getElementById("sfname").value;
var sLName = document.getElementById("slname").value;
var sEmail = document.getElementById("semail").value;
if((document.getElementById("spassword").value)==(document.getElementById("sconfirmpassword").value)){
var sPassword = document.getElementById("spassword").value;
var dbRef = firebase.database().ref().child('projectdatabase');
var postData = {
firstname : sFName,
lastname : sLName,
email : sEmail,
password : sPassword
};
dbRef.push(postData);
document.getElementById("response").innerHTML =
"Registered!"
}
}
}

Related

its given undefined. cant retrieve name from firebase

i want to get user data from firebase after login. when I get the name from database it is providing value as undefined.. why?
var user = firebase.auth().currentUser;
if(user != null ){
var email_id = user.email;
var uid = user.uid;
var name = user.userName;
var user = user;
document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;
document.getElementById("user_para1").innerHTML = "Welcome User : " + uid;
document.getElementById("user_para2").innerHTML = "Welcome User : " + name;
}
Remember that firebase auth saves only the following data:
email: 'user#example.com',
emailVerified: false,
phoneNumber: '+11234567890',
password: 'secretPassword',
displayName: 'John Doe',
photoURL: 'http://www.example.com/12345678/photo.png',
disabled: false
So user.userName doesn't exist.
You can use displayName to save the username but if you really use it to save the name you can create a node called users in firebase realtime database where you could save the username based on UID, something like this:
users
->akdjf231dkeimdla
->username: jamesbond007
After you code could be:
var user = firebase.auth().currentUser;
if(user != null ){
var email_id = user.email;
var uid = user.uid;
var name = user.displayName;
document.getElementById("user_para").innerHTML = "Welcome User : " + email_id;
document.getElementById("user_para1").innerHTML = "Welcome User : " + uid;
document.getElementById("user_para2").innerHTML = "Welcome User : " + name;
firebase.database().ref('/users/' + uid).once('value').then(function(snapshot) {
//Here are reading the username from the database
var username = snapshot.val().username;
});
}
If you use firebase realtime database remember to add the firebase realtime database library.
For more information: https://firebase.google.com/docs/auth/admin/manage-users

Using localstorage to store login info

I have been working on a project where we can store login info so that once a user registers, the data gets saved in the localStorage object. I have mentioned some javascript code to show that:
var user = document.getElementById("user");
var pass = document.getElementById("pass");
var email = document.getElementById("email");
var user2 = document.getElementById("user2");
var pass2 = document.getElementById("pass2");
function register() {
localStorage.setItem("username", user.value);
localStorage.setItem("password", pass.value);
localStorage.setItem("email", email.value);
document.getElementById("id01").innerHTML = "Registration successful";
}
function login() {
var checkuser = localStorage.getItem("username");
var checkpass = localStorage.getItem("password");
if (checkuser === user2.value && checkpass === pass2.value) {
document.getElementById("demo").innerHTML = "You are now logged in.";
} else {
document.getElementById("demo").innerHTML = "Incorrect username and password";
}
}
In the javascript code mentioned above, i have used the localStorage object to store the values. I have stored the username in a user property, the password in a pass property and the email in an email property.
My question is: Is there any way where we can store the username, password and the email in one property(user property)?
Yes, you can do this by putting all the features you want in one object.
Example here
var user = document.getElementById("user");
var pass = document.getElementById("pass");
var email = document.getElementById("email");
var user2 = document.getElementById("user2");
var pass2 = document.getElementById("pass2");
var user = {
email:email,
pass:pass,
//.. other properties
}
then you can set like this
localStorage.setItam("USEROBJ",JSON.stringify(user));
When you want to call this you should use like
var user = JSON.parse(localStorage.getItam("USEROBJ"));
By the way you can read this
Storing Objects in HTML5 localStorage more detail about you question
You can store JSON as a string in localStorage property and then parse it
function setUser() {
localStorage.setItem('user', JSON.stringify(user));
}
function getUser() {
user = JSON.parse(localStorage.getItem('user'))
}

How to check if input exists in Firebase database

I have multiple booth users and I want to check if my username and password exists in a booth field.
Say I login using the username booth02 and password password. I want to return this as true/success.
This is my script:
router.post('/getlogin', function (req, res) {
username = req.body.username;
password = req.body.password;
adminlogin = database.ref('booths');
adminlogin.once('value', function(snapshot){
var dataSet = [];
snapshot.forEach(function(childsnapshot){
user = childsnapshot.val().username;
pass = childsnapshot.val().password;
if(username == user){
req.session.user = childsnapshot.key;
req.session.auth = true;
return res.status(200).send('Success');
}else{
return res.status(401).send('false');
}
});
})
})
But the result being returned for my user and pass is the first data which is username:booth01 and password:idontknow .
Is there a way to specifically return the data from Firebase based on my inputs?
Change this:
adminlogin.once('value', function(snapshot){
to this:
adminlogin.orderByChild("username").equalTo(inputname).once('value', function(snapshot){
the value inputname inside equalTo query will be the input that you entered in the form. Then it will only retrieve data that is related to the name of the user you entered.
more info here:
https://firebase.google.com/docs/reference/js/firebase.database.Query#equalTo

I keep getting the error unexpected token b in JSON at position 0 at JSON.parse?

So I got this code that creates a html page.The function signup allows the user to register and create a password. The function checkpassword is to check if the correct password is entered for the username.It seems I have a problem in getting the item from local storage in my checkPassword function?Help will be much appreciated as I've been stuck for hours?
const PREFIX = "monash.eng1003.passwordApp.";
function checkPassword() {
var user = document.getElementById("registerUsername").value;
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var passwordToCheck = localStorage.getItem(PREFIX + user);
var passwordTwo = JSON.parse(passwordToCheck);
if (password != passwordTwo) {
alert("Don't hack" + user);
} else {
alert("Welcome" + user);
}
}
function signup() {
var user = document.getElementById("registerUsername").value;
var pass1 = document.getElementById("registerPassword").value;
var pass2 = document.getElementById("confirmPassword").value;
if ((pass1 === pass2) && (pass1 !== "")) {
if (localStorage) {
var passwordToStore = pass1;
localStorage.setItem(PREFIX + user, passwordToStore);
alert("Account created for username: " + user);
}
} else {
alert("Passwords must match and cannot be empty.")
}
}
EDIT:Thanks for pointing out that I do not need to parse it since I didn't stringify.That solved the problem but since I cannot delete the post I have to leave it here
You didn't convert the password to JSON when you stored it, so you don't need to use JSON.parse() when you retrieve it. You stored an ordinary string, you can just retrieve it and use it.
passwordTwo = localStorage.getItem(PREFIX + user);

email validation function is not functioning well

i havea signup form which have a field for email. i made a regular expression to verify it and that regex is working perfectly. that problem i am facing is that the function which does this job is not working. this will become more clear from the following:
var email = getEle('email', clas)[0].value; // 'getEle()' is a function which returns an element whose calss is the first arguement
console.log(email); // logs correct thing which means that email has been caught by the javascript
function em(){ // this function will check email
var eln = email.match(/([A-Za-z0-9\._\-]+)#([A-Za-z]+).([A-Za-z]+)/);
console.log(eln);
if(eln.length ===4){
email = email;
}else{
Error = Error + "2) Your Email address is not valid. Please enter valid email Address\n"
}
};em();// end
my email validation regex is working properly as you can see here regex101.com
error which is given to me is: Uncaught TypeError: Cannot read property 'length' of null
the first log logs correct thing but the second log logs null
if this is done in console(i am using google chrome) then no error is given.
question is, if no error is given when this thing is done manually, then why error is given to me when the same is done while writing it as a function code.
what is the mistake.
complete code:
var getEle = function(ele, type){
if(type ==="id"){
return document.getElementById(ele);
};
if(type==="class"){
return document.getElementsByClassName(ele);
};
if(type === 'tag'){
return docuemnt.getElementsByTagName(ele);
};
};
function signUpform(){
var fname = getEle('fname', clas)[0].value,
lname = getEle('lname', clas)[0].value,
email = getEle('email', clas)[0].value,
phoneNo = getEle('phoneNo', clas)[0].value,
age = getEle('age', clas)[0].value,
date = getEle('date', clas)[0].value,
username = getEle('username', clas)[0].value,
password = getEle('password', clas)[0].value,
re_pass = getEle('re_pass', clas)[0].value,
Error = "Errors List: \n";
console.log(email);
function flname(){ // this function will check the first name and the last name
if(fname === "" || lname ===""){
Error = Error +'1) You cannot leave first name and last name blank\n';
}else{
fname.value = fname.value.replace(/[0-9]+/g,"");
lname = lname.replace(/[0-9]+/g,"");
};
};flname();// end
function em(){ // this function will check email
var eln = email.match(/([A-Za-z0-9\._\-]+)#([A-Za-z]+).([A-Za-z]+)/);
console.log(eln);
if(eln.length ===4){
email = email;
}else{
Error = Error + "2) Your Email address is not valid. Please enter valid email Address\n"
}
};em();// end
};
No need to check length of matched array, just simplify your em function like this:
function em(){ // this function will check email
var eln = /\b[\w.-]+#[A-Za-z]+\.[A-Za-z]+\b/.test( email );
if (!eln)
Error = Error + "2) Your Email address is not valid. Please enter valid email";
};

Categories