Implementing remember me functionality using cookies in JavaScript

24 Sep 2023

In this blog post, we will walk you through the process of implementing the “Remember Me” functionality using cookies in JavaScript. The “Remember Me” feature allows users to stay logged in even after they close the browser or navigate away from the website.

Prerequisites

Before we begin, make sure you have a basic understanding of JavaScript and how cookies work. It’s also helpful to have a code editor and a web browser installed on your machine.

Step 1: Creating the “Remember Me” Checkbox

The first step is to create a checkbox on your login page HTML. This checkbox will give the user the option to enable or disable the “Remember Me” functionality.

<input type="checkbox" id="remember-me-checkbox" />
<label for="remember-me-checkbox">Remember Me</label>

Next, we need to add JavaScript code to save the user’s login credentials to cookies when the checkbox is checked. We can use the document.cookie property to set the cookie.

const rememberMeCheckbox = document.getElementById("remember-me-checkbox");
if (rememberMeCheckbox.checked) {
  const username = document.getElementById("username-input").value;
  const password = document.getElementById("password-input").value;

  document.cookie = `username=${username}; expires=${getExpirationDate()}`;
  document.cookie = `password=${password}; expires=${getExpirationDate()}`;
}

function getExpirationDate() {
  const expirationDate = new Date();
  expirationDate.setFullYear(expirationDate.getFullYear() + 1);

  return expirationDate.toUTCString();
}

In this code, we check if the checkbox is checked. If it is, we retrieve the username and password input values. Then, we set the cookie with the username and password, along with an expiration date of one year in the future.

Now, let’s retrieve the saved login credentials from cookies when the login page loads. We can use JavaScript’s document.cookie property to access and retrieve the cookie values.

window.addEventListener("load", () => {
  const savedUsername = getCookieValue("username");
  const savedPassword = getCookieValue("password");

  if (savedUsername && savedPassword) {
    document.getElementById("username-input").value = savedUsername;
    document.getElementById("password-input").value = savedPassword;

    // Automatically log in the user using the retrieved credentials
    login(savedUsername, savedPassword);
  }
});

function getCookieValue(cookieName) {
  const cookieString = document.cookie;
  const cookies = cookieString.split(";");

  for (let i = 0; i < cookies.length; i++) {
    const cookie = cookies[i].trim();

    if (cookie.startsWith(`${cookieName}=`)) {
      return cookie.substring(cookieName.length + 1);
    }
  }

  return null;
}

In this code, we listen for the load event on the window, which triggers when the login page finishes loading. We retrieve the values of the username and password cookies using the getCookieValue function. If the cookies exist, we pre-fill the login form with the saved values and automatically log in the user using the retrieved credentials.

Conclusion

By following these steps, you can easily implement the “Remember Me” functionality using cookies in JavaScript. This feature enhances the user experience by allowing them to stay logged in and avoids the need for repeated logins.

Remember to handle the security aspects of storing sensitive data like passwords by using secure cookies or encryption.

Prerequisites

Step 1: Creating the “Remember Me” Checkbox

Step 2: Saving the Login Credentials to Cookies

Step 3: Retrieving the Login Credentials from Cookies

Conclusion