How to make a login system in Javascript?

Question

I am trying to make a simple login system in javascript. The code should be for multiple users

e.g: user: love pass: cat, user2: mom pass2: love etc.

I need the

Answer 1

You should NEVER, EVER do the username/password check in the client side, since anyone could just view the source of your javascript file and find the password pattern or even just bypass it easily. you will ALWAYS want to send the username/password to the server and have the server redirect it for you

Answer 2

yes, I know everything you want to say about me, but let me answer his question

you have to put this

var location = '';
if (iName=='love' && AccId=='cat') {
    location=("page1.html");
}
else if (iName=='mom' && AccId=='love') {
    location=("page2.html");
}
else alert('Wrong pair');

this.location.href = location;

inside your else statement to make it work, BUT DON'T DO LIKE THAT

DEMO

of course, you can verify it on server sending XMLHttpRequest or using POST and PHP or other server-side languge, but here I can suggest to use encryption 1.add this to your head section:

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script>

and replace password verifing with:

if (iName=='love' && CryptoJS.SHA1(AccId)=='9d989e8d27dc9e0ec3389fc855f142c3d40f0c50')

and

else if (iName=='mom' && CryptoJS.SHA1(AccId)=='9f2feb0f1ef425b292f2f94bc8482494df430413')

DEMO WITH ENCRYPTION

next step is 2. to obfuscate your code. Your code could look like this

var _0x51a3=["\x73\x74\x61\x74\x75\x73","\x41\x74\x74\x65\x6D\x70\x74\x69\x6E\x67\x20\x74\x6F\x20\x4C\x6F\x67\x69\x6E\x20\x74\x6F\x20\x75\x73\x65\x72\x20\x61\x72\x65\x61\x2E","\x76\x61\x6C\x75\x65","\x69\x41\x63\x63\x49\x44","\x69\x41\x63\x63\x49\x6E\x70\x75\x74","\x69\x4E\x61\x6D\x65","","\x0A\x45\x52\x52\x4F\x52\x0A\x59\x6F\x75\x20\x6D\x75\x73\x74\x20\x65\x6E\x74\x65\x72\x20\x41\x4C\x4C\x20\x44\x65\x74\x61\x69\x6C\x73\x2C\x0A\x74\x6F\x20\x56\x69\x65\x77\x20\x79\x6F\x75\x72\x20\x73\x74\x61\x74\x69\x73\x74\x69\x63\x73\x2E\x0A","\x4D\x69\x73\x73\x69\x6E\x67\x20\x64\x61\x74\x61\x20\x6F\x72\x20\x49\x6E\x76\x61\x6C\x69\x64\x2E\x20\x43\x68\x65\x63\x6B\x20\x73\x70\x65\x6C\x6C\x69\x6E\x67\x20\x61\x6E\x64\x20\x45\x6E\x73\x75\x72\x65\x20\x4E\x61\x6D\x65\x73\x20\x61\x72\x65\x20\x69\x6E\x20\x43\x6F\x72\x72\x65\x63\x74\x20\x43\x61\x73\x65\x2E","\x6C\x6F\x76\x65","\x39\x64\x39\x38\x39\x65\x38\x64\x32\x37\x64\x63\x39\x65\x30\x65\x63\x33\x33\x38\x39\x66\x63\x38\x35\x35\x66\x31\x34\x32\x63\x33\x64\x34\x30\x66\x30\x63\x35\x30","\x70\x61\x67\x65\x31\x2E\x68\x74\x6D\x6C","\x6D\x6F\x6D","\x39\x66\x32\x66\x65\x62\x30\x66\x31\x65\x66\x34\x32\x35\x62\x32\x39\x32\x66\x32\x66\x39\x34\x62\x63\x38\x34\x38\x32\x34\x39\x34\x64\x66\x34\x33\x30\x34\x31\x33","\x70\x61\x67\x65\x32\x2E\x68\x74\x6D\x6C","\x57\x72\x6F\x6E\x67\x20\x70\x61\x69\x72","\x20\x56\x65\x72\x69\x66\x79\x69\x6E\x67\x3A\x20","\x20\x50\x6C\x65\x61\x73\x65\x20\x77\x61\x69\x74\x2E\x2E\x2E\x2E\x2E\x2E\x2E\x2E"];function Getstats(){window[_0x51a3[0]]=(_0x51a3[1]);var _0xfcfax2;var _0xfcfax3;_0xfcfax2=document[_0x51a3[4]][_0x51a3[3]][_0x51a3[2]];_0xfcfax3=document[_0x51a3[4]][_0x51a3[5]][_0x51a3[2]];if(_0xfcfax2==_0x51a3[6]||_0xfcfax3==_0x51a3[6]){alert(_0x51a3[7]);window[_0x51a3[0]]=(_0x51a3[8]);} else {var _0xfcfax4=_0x51a3[6];if(_0xfcfax3==_0x51a3[9]&&CryptoJS.SHA1(_0xfcfax2)==_0x51a3[10]){_0xfcfax4=(_0x51a3[11]);alert(_0xfcfax4);} else {if(_0xfcfax3==_0x51a3[12]&&CryptoJS.SHA1(_0xfcfax2)==_0x51a3[13]){_0xfcfax4=(_0x51a3[14]);alert(_0xfcfax4);} else {alert(_0x51a3[15]);} ;} ;window[_0x51a3[0]]=(_0x51a3[16]+_0xfcfax3+_0x51a3[17]);} ;} ;

WORKING DEMO

Answer 3

Altough it is not advised to make a login system with javascript, it can be done reasonably securely(so the user can't see the passwords directly), you could make like a javascript loader which loads in a bunch of variables from one javascript file, then uses it in the main javascript file and uses encrypted cookies to store the loggedin variables and stuff using essentials.js(A javascript library which makes everything simpler including sessions and cookiestorage) and at last clearing the loader again, then it clears the whole javascript of the page / the javascript connection leaving no trace behind of the password file link.

This can be done in serveral ways, the esiest and probably the most secure one is something like this.

<div id='loader'></div>

<div id='scripts'>
<script>

document.getElementById("loader").innerHTML = "<script src='passwords.js'></script>";

if(passwordinput == user1pass) {
  // This runs when the password and username match up with the variables in the loaded script
}
else if(passwordinput == user2pass) {
  //Etc..
}
else {
  console.log("User does not exist");
}

document.getElementById("loader").innerHTML = "";
document.getElementById("scripts").innerHTML = "";
</script>
</div>

You could even store the passwords in the document itself, that is probably even more secure but more difficult to register new people. I have not tested if this works but I think it will. Also I advise you to only let the passwords.js file reveal itself when a key is given as a get parameter, this is really easy to do and I think you can figure that one out on your own. Also I advise you to hash the passwords to add a thin layer of protection on top of it, this is also really easy to do and I think you'll be able to figure that out by yourself aswell.

I hope this answer helped some of you visitors of this question with the same question.