Comparing two arrays for usernames + passwords

Question

I have two arrays in JavaScript. One contains usernames and one contains passwords. I want to create a loop that checks what position (i) the username is in - in the 'approvedUsernames' array - that was inputted by the user, and takes that same 'i' value in the 'approvedPasswords' array and picks the value that was found. then compare the two. If they match, a successful login happens, if not it is unsuccessful

Please see existing Arrays and the code i have already written below

any help greatly appreciated i hope this was clear enough i had trouble wording it :)

James

EDIT: I KNOW THIS IS A VERY INSECURE WAY TO STORE PASSWORDS IT IS JUST TEMPORARY TO TEST THE LOGIN ALGORITHM. THE FINAL VERSION WILL DEFINITELY BE USING PHP+SQL DATABASE

Arrays:

approvedLogins = ['JamesLiverton', 'SamW']                 approvedPasswords = ['password', 'coding']

Code:

function login(){
var username = document.getElementById('usernameField').value
var password = document.getElementById('passwordField').value

for (i = 0; i < approvedLogins.length; i++) {
    if (username == approvedLogins[i].username && password == approvedPasswords[i].password) {
        alert('Login Sucessful')
        return
    }
    else {
        alert('Login Unsucessful')
        return
    }
}

}

I will try and find an answer, but out of interest... why are you storing Usernames/Passwords in JavaScript? That's very insecure, as anyone can view the source code and retrieve all of them in a matter of seconds. — Nanoo, Jun 25 '20 at 20:51
If you're looking to make a secure login system, I recommend looking into PHP and MySQL databases. — Nanoo, Jun 25 '20 at 20:52
return i; or use break to stop the loop and then use the value of i to do something — user120242, Jun 25 '20 at 20:57
Yeah, a true login system would store usernames and hashed passwords in a database. A web application would make a call to an API passing it a username/password and you would look it up in the database. If its a match you would generate a token or cookie of some sort creating essentially a login session. — Isaac Vidrine, Jun 25 '20 at 20:58
@Nanoo I 100% agree but this is just a prototype for a larger project. This is a very temporary storage of credentials. I am testing more the algorithm of Login/Registration system rather than the Long-Term storage system. This is just so i have quick access to the data to use in the algorithm. In the final program i will definitely be using an SQL database :) — James Liverton, Jun 25 '20 at 21:04
@IsaacVidrine Yes, it's very interesting stuff. I have only recently got into database login systems, and for some reason I used JavaScript to check a user's cookie/session, and it wasn't even HttpOnly (which is not secure). — Nanoo, Jun 25 '20 at 21:04
@JamesLiverton Good to hear. It was just a recommendation, so don't take any offence. Feel free to check out my answer if you want, I think it might be something you're looking for. — Nanoo, Jun 25 '20 at 21:06
Really, a duplicate of [How to find the array index with a value?](https://stackoverflow.com/q/7346827/215552) and [How to get value at a specific index of array In JavaScript?](https://stackoverflow.com/q/8238456/215552). — Heretic Monkey, Jun 25 '20 at 21:24
Does this answer your question? [How to find the array index with a value?](https://stackoverflow.com/questions/7346827/how-to-find-the-array-index-with-a-value) — AMC, Jun 25 '20 at 21:36

Nanoo · Answer 1 · 2020-06-25T21:07:25.110

Check this example:

var approvedLogins = ['JamesLiverton', 'SamW'];
var approvedPasswords = ['password', 'coding'];

function login(username) {
    if (approvedLogins.includes(username)) {
        var matchedPassword = approvedPasswords[approvedLogins.indexOf(username)];
        console.log(matchedPassword);
    } else {
        console.log("Username not found in array!");
    }
}

It checks if the Username provided in the login() parameter, is found in the array. If it's inside the array, then it gets the password relative to the position of the username within that array. For example, "SamW" would be "coding".

I hope this helps.

score 0 · Answer 2 · answered Jun 25 '20 at 21:02

First, if you're planning on doing this, I have a feeling that you don't know much about security. I suggest you look into third party authentication (which, if you're asking this kind of question, might be out of your skill level, but still). At the very least, consider encrypting your user's password, with a salt (look up what a salt is).

With that said, you can do this.

function login() {
  const username = document.getElementById('usernameField').value
  const password = document.getElementById('passwordField').value

  alert(isValidLogin(username, password) ? 'Login successful' : 'Login failed')
}

// create a separate function for checking validity, so it's easier
// to refactor/reimplement later, if need be.
function isValidLogin(username, password) {
  const usernameArray = ['name1', 'name2', ... 'nameN']
  const passwordArray = ['pw1', 'pw2', ... 'pwN']

  const usernameIndex = usernameArray.findIndex(item => item === username)
  
  return usernameIndex !== -1 && passwordArray[usernameIndex] === password
}

score 0 · Answer 3 · answered Jun 25 '20 at 21:03

let approvedLogins = ['JamesLiverton', 'SamW']               
let approvedPasswords = ['password', 'coding']

function login(){
  var username = document.getElementById('usernameField').value
  var password = document.getElementById('passwordField').value

  let index = approvedLogins.indexOf(username)

  if (password === approvedPasswords[index]) {
    alert('Login Sucessful')
  } else {
    alert('Login Unsucessful')
  }
}

<input type="text" id="usernameField" placeholder="username" /><input type="text" id="passwordField" placeholder="password" />

<button onclick="login()">login</button>

Comparing two arrays for usernames + passwords

3 Answers3