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
    }
}

}

Answer 1

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.

Answer 2

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
}

Answer 3

 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>