Ways to verify the existence of a user in the browser's local storage

Question

Ways to verify the existence of a user in the browser's local storage

I have a project task to create a user registration and login form that utilizes local storage to store data. The functionality is working correctly when a new user registers by saving their email address and password in localStorage.

However, I am facing a challenge in comparing data when an unregistered user attempts to log in compared to a registered user trying to log in.

When a registered user logs in, the input values should be compared with the stored data in localStorage, and if they match, it should display "login Successful"; otherwise, it should prompt "Not a registered user."

My implementation involves using JavaScript for this purpose. Any assistance on this matter would be greatly appreciated.

Below is the code snippet:

var userData;
var usersr;
var loginData;
var usersl;

// User Registration
const registerBtn = document.getElementById('register-btn')

function UserRegistration() {
  userData = [{
    email: document.getElementById('register-email').value
  }, {
    password: document.getElementById('register-pass').value
  }];
  usersr = JSON.parse(localStorage.getItem('Users')) || [];
  usersr.push(userData);
  localStorage.setItem('Users', JSON.stringify(usersr));
  location.reload();
  console.log(userData);
}

// User Login
const loginBtn = document.getElementById('login-btn')

function loginUser() {
  usersl = JSON.parse(localStorage.getItem('UsersLogin')) || [];
  loginData = [{
    loginEmail: document.getElementById('login-email').value
  }, {
    loginPass: document.getElementById('login-pass').value
  }];
  usersl.push(loginData);
  localStorage.setItem('UsersLogin', JSON.stringify(usersl));
  console.log(usersl);
  location.reload();
}

javascript

Answer 1

Answer №1

Within the code block, there is a significant amount of unnecessary code. To streamline and improve functionality, consider utilizing the following functions:

function userSignUp() {
    const userData = {
        email: document.getElementById('register-email').value,
        password: document.getElementById('register-pass').value
    };
    localStorage.setItem('UsersLogin', JSON.stringify(userData));
    window.location.reload();
}

function authenticateUser() {
    const loginEmail = document.getElementById('login-email').value;
    const loginPass = document.getElementById('login-pass').value;
    
    if (localStorage.getItem('UsersLogin')) {
        const storedData = JSON.parse(localStorage.getItem('UsersLogin'));
        
        if (loginEmail === storedData.email && loginPass === storedData.password) {
            console.log('Login successful');
        } else {
            console.log('Incorrect credentials');
        }
    } else {
        console.log('Not a registered user');
    }
}

When using the login function, it is crucial to first verify the existence of the UsersLogin property within the localStorage. If present, compare the input values with those stored in the UsersLogin property. If they match, display "Login Successful"; otherwise, indicate "Wrong credentials". In cases where the UsersLogin property does not exist at all in the localStorage, notify the user as "Not a registered user".

REQUESTED UPDATE:

To maintain previously registered users in the localStorage while updating the UsersLogin property with new registrations, follow these steps:

function UserRegistration() {
    let storedUsers = localStorage.UsersLogin ? JSON.parse(localStorage.UsersLogin) : [];
    const userData = {
        email: document.getElementById('register-email').value,
        password: document.getElementById('register-pass').value
    };
    storedUsers.push(userData);
    localStorage.setItem('UsersLogin', JSON.stringify(storedUsers));
    window.location.reload();
}

function authenticateUser() {
    const loginEmail = document.getElementById('login-email').value;
    const loginPass = document.getElementById('login-pass').value;
    
    if (localStorage.getItem('UsersLogin')) {
        const allStoredUsers = JSON.parse(localStorage.getItem('UsersLogin'));
        const matchedUser = allStoredUsers.filter(user => loginEmail === user.email && loginPass === user.password);

        if (matchedUser.length) {
            console.log('Login successful');
        } else {
            console.log('Incorrect credentials');
        }
    } else {
        console.log('Incorrect credentials');
    }
}

NOTE: It may be necessary to clear the localStorage for the updated functions to operate smoothly. Previous errors could arise due to converting localStorage.UsersLogin into an array from an object. Simply execute localStorage.clear() in the console.

As mentioned earlier, refrain from disclosing the presence or absence of user profiles in the database (Avoid logging "Not a registered user"). Such information can be utilized by potential threats. Instead, consistently inform users of "Incorrect credentials" without revealing specific details. 😌

Answer 2

Within the code block, there is a significant amount of unnecessary code. To streamline and improve functionality, consider utilizing the following functions:

function userSignUp() {
    const userData = {
        email: document.getElementById('register-email').value,
        password: document.getElementById('register-pass').value
    };
    localStorage.setItem('UsersLogin', JSON.stringify(userData));
    window.location.reload();
}

function authenticateUser() {
    const loginEmail = document.getElementById('login-email').value;
    const loginPass = document.getElementById('login-pass').value;
    
    if (localStorage.getItem('UsersLogin')) {
        const storedData = JSON.parse(localStorage.getItem('UsersLogin'));
        
        if (loginEmail === storedData.email && loginPass === storedData.password) {
            console.log('Login successful');
        } else {
            console.log('Incorrect credentials');
        }
    } else {
        console.log('Not a registered user');
    }
}

When using the login function, it is crucial to first verify the existence of the UsersLogin property within the localStorage. If present, compare the input values with those stored in the UsersLogin property. If they match, display "Login Successful"; otherwise, indicate "Wrong credentials". In cases where the UsersLogin property does not exist at all in the localStorage, notify the user as "Not a registered user".

REQUESTED UPDATE:

To maintain previously registered users in the localStorage while updating the UsersLogin property with new registrations, follow these steps:

function UserRegistration() {
    let storedUsers = localStorage.UsersLogin ? JSON.parse(localStorage.UsersLogin) : [];
    const userData = {
        email: document.getElementById('register-email').value,
        password: document.getElementById('register-pass').value
    };
    storedUsers.push(userData);
    localStorage.setItem('UsersLogin', JSON.stringify(storedUsers));
    window.location.reload();
}

function authenticateUser() {
    const loginEmail = document.getElementById('login-email').value;
    const loginPass = document.getElementById('login-pass').value;
    
    if (localStorage.getItem('UsersLogin')) {
        const allStoredUsers = JSON.parse(localStorage.getItem('UsersLogin'));
        const matchedUser = allStoredUsers.filter(user => loginEmail === user.email && loginPass === user.password);

        if (matchedUser.length) {
            console.log('Login successful');
        } else {
            console.log('Incorrect credentials');
        }
    } else {
        console.log('Incorrect credentials');
    }
}

NOTE: It may be necessary to clear the localStorage for the updated functions to operate smoothly. Previous errors could arise due to converting localStorage.UsersLogin into an array from an object. Simply execute localStorage.clear() in the console.

As mentioned earlier, refrain from disclosing the presence or absence of user profiles in the database (Avoid logging "Not a registered user"). Such information can be utilized by potential threats. Instead, consistently inform users of "Incorrect credentials" without revealing specific details. 😌

Answer 3

Answer №2

Congratulations on completing the registration code! It's now time to develop the login functionality and I've ensured that duplicate users are handled.

<!DOCTYPE html>
<html lang="en-us"></html>
<head>
  <meta charset="utf-8">
  <title>Register</title>
  <style>
  </style>
</head>
<body>

  <form onsubmit="return false">
    <input type="email" placeholder="email"><br>
    <input type="password"><br>
    <input type="submit" value="register">
  </form>

  <script>
    var emailElement = document.querySelector("[type='email']"),
      passwordElement = document.querySelector("[type='password']");

    if(!localStorage["UsersAuth"]) {
      localStorage["UsersAuth"] = "{}";
    }

    document.querySelector("[type='submit']").onclick = function() {
      var registeredUsers = JSON.parse(localStorage["UsersAuth"]);
      if(emailElement.value in registeredUsers) {
        alert("This email is already registered!");
      }else {
        registeredUsers[emailElement.value] = passwordElement.value;
      }
      localStorage["UsersAuth"] = JSON.stringify(registeredUsers);
    }
  </script>
</body>
</html>

Answer 4

Congratulations on completing the registration code! It's now time to develop the login functionality and I've ensured that duplicate users are handled.

<!DOCTYPE html>
<html lang="en-us"></html>
<head>
  <meta charset="utf-8">
  <title>Register</title>
  <style>
  </style>
</head>
<body>

  <form onsubmit="return false">
    <input type="email" placeholder="email"><br>
    <input type="password"><br>
    <input type="submit" value="register">
  </form>

  <script>
    var emailElement = document.querySelector("[type='email']"),
      passwordElement = document.querySelector("[type='password']");

    if(!localStorage["UsersAuth"]) {
      localStorage["UsersAuth"] = "{}";
    }

    document.querySelector("[type='submit']").onclick = function() {
      var registeredUsers = JSON.parse(localStorage["UsersAuth"]);
      if(emailElement.value in registeredUsers) {
        alert("This email is already registered!");
      }else {
        registeredUsers[emailElement.value] = passwordElement.value;
      }
      localStorage["UsersAuth"] = JSON.stringify(registeredUsers);
    }
  </script>
</body>
</html>

Answer 5

Answer №3

Here's a possible solution that might meet your needs

// Handling user registration 
const registerButton = document.getElementById('register-button')

function handleUserRegistration() {
  var userData = {
    email: document.getElementById('reg-email').value,
    password: document.getElementById('reg-password').value
  };
  var registeredUsers = JSON.parse(localStorage.getItem('RegisteredUsers')) || [];
  if(!registeredUsers.some(user => user.email === userData.email)) {
   registeredUsers.push(userData);
   localStorage.setItem('RegisteredUsers', JSON.stringify(registeredUsers));
   location.reload()
   console.log(userData)
  }
  else {
    //email is already registered
  }
}

// Managing user login 
const loginButton = document.getElementById('login-button')

function handleLogin() {
  var loggedInUsers = JSON.parse(localStorage.getItem('LoggedInUsers')) || [];
  var registeredUsers = JSON.parse(localStorage.getItem('RegisteredUsers')) || [];
  var loginData = {
    email: document.getElementById('login-email').value,
    password: document.getElementById('login-password').value
  };
  var currentUser = registeredUsers.filter(user => user.email === loginData.email);
  if(currentUser.length > 0) {
    //current email is registered
    if(currentUser[0].password === loginData.password) {
      //passwords do not match 
      return;
    }
    if(!loggedInUsers.some(user => user.email === loginData.email)) {
      //not logged in yet, so log in now
      loggedInUsers.push(loginData);
      localStorage.setItem('LoggedInUsers', JSON.stringify(loggedInUsers))
      console.log(loggedInUsers)
      location.reload()
    }
    else {
      //already logged in
    }
  }
  else {
    //email not registered
  }
}

Answer 6

Here's a possible solution that might meet your needs

// Handling user registration 
const registerButton = document.getElementById('register-button')

function handleUserRegistration() {
  var userData = {
    email: document.getElementById('reg-email').value,
    password: document.getElementById('reg-password').value
  };
  var registeredUsers = JSON.parse(localStorage.getItem('RegisteredUsers')) || [];
  if(!registeredUsers.some(user => user.email === userData.email)) {
   registeredUsers.push(userData);
   localStorage.setItem('RegisteredUsers', JSON.stringify(registeredUsers));
   location.reload()
   console.log(userData)
  }
  else {
    //email is already registered
  }
}

// Managing user login 
const loginButton = document.getElementById('login-button')

function handleLogin() {
  var loggedInUsers = JSON.parse(localStorage.getItem('LoggedInUsers')) || [];
  var registeredUsers = JSON.parse(localStorage.getItem('RegisteredUsers')) || [];
  var loginData = {
    email: document.getElementById('login-email').value,
    password: document.getElementById('login-password').value
  };
  var currentUser = registeredUsers.filter(user => user.email === loginData.email);
  if(currentUser.length > 0) {
    //current email is registered
    if(currentUser[0].password === loginData.password) {
      //passwords do not match 
      return;
    }
    if(!loggedInUsers.some(user => user.email === loginData.email)) {
      //not logged in yet, so log in now
      loggedInUsers.push(loginData);
      localStorage.setItem('LoggedInUsers', JSON.stringify(loggedInUsers))
      console.log(loggedInUsers)
      location.reload()
    }
    else {
      //already logged in
    }
  }
  else {
    //email not registered
  }
}

Ways to verify the existence of a user in the browser's local storage

Answer №1

Answer №2

Answer №3

Similar questions

Angular Dashboard Framework with a personalized editing menu option

Executing asynchronous functions that invoke other asynchronous functions

When a specific condition is fulfilled, I must retrieve a random response from a designated array

Matching wildcard paths using Express

Direction of Scrolling

When running tests in Jest, the error "TypeError: _enzymeAdapterReact.default is not a constructor

How can I effectively set up and utilize distinct npm modules on my local environment?

Issue encountered when AngularJS struggles to evaluate regular expression within ng-pattern

Having trouble with WordPress jQuery Click function. Would greatly appreciate some assistance :)

Should objects passed as props be modified in Vue.js components?

Using Ajax to dynamically load Wordpress post details and content into a designated div element

Using $.when with an Array of Promises

Leveraging React's State Values and Props

Oops! It seems like there was an issue trying to access properties that are undefined while reading 'pipe' in Angular12

Tips for making a range slider in react-native

React Context Matters: Troubles Unleashed

Issues with WordPress forms are causing frustration

Using Object.create to establish multiple prototypes in JavaScript

Sleek transition-ready zoom functionality for THREE JS with clickable controls

Verifying the invocation of a callback function through the use of $rootScope.$broadcast and $scope.$on