email and password remember me for login after user logged in for the first time

Question

when the user login to his account and click remember me how to make the login form auto-fill the user email and password when the user come to login again so he doesn't have to fill his email and password again in react and next

Answer 1

First of all, store user's credentials on front side (localStorage, lessionStorage and etc.) is not a good practice.

Usually "Remember me" checkboxes are used to create an auth-cookie with longer time life.

For example: When user checked "Remember me", you will send post request with query params remember=1 , server handle this, and send response with header:

Set-Cookie: {auth-cookie}={value}; Max-Age={one week, for example}

It will create a cookie in browser, which time life is one week.

In another case, if user didn't check "remember me", server responds with header like this:

Set-Cookie: {auth-cookie}={value}; Max-Age={one day, for example}

It means that user will be authorized during just one day, after it cookie will be expired, and user will logged out.

User can allow the browser to autocomplete input fields if click "Save password" after submitting the form in browser's popup.

It's browser behavior.

Best regards!

Answer 2

Answer

You can use localStorage , a built-in object in JavaScript for browsers.
localStorage is of type Storage , which means that you can use it via the methods setItem , getItem , and removeItem .

How to use

localStorage.getItem("item1"); // null
localStorage.setItem("item2", "EntityPlantt");
localStorage.getItem("item1"); // still null
localStorage.getItem("item2"); // "EntityPlant"
localStorage.item1; // "EntityPlantt"
location.reload(true); // Reloads page

localStorage is persistent, so you can call it on load to fill in the form.

Examples

onload = () => {
  if (localStorage.getItem("data")) {
    var data = JSON.parse(localStorage.data);
    // fill out the form
  }
}

And, when someone fills the form, you can save the form data in localStorage .

btn.onclick = () => {
  localStorage.setItem("data", JSON.stringify({
    // Form data
  }));
  submitForm(); // The submitting of the form; your code here
}

Note that localStorage can only store strings. So you can convert them to your type.

var number = parseFloat(localStorage.getItem("number"));
var string = localStorage.getItem("string");
var object = JSON.parse(localStorage.getItem("object"));
var array = localStorage.getItem("array").split(",");
var symbol = Symbol(localStorage.getItem("symbol"));

Reference

If you want to learn more about localStorage (and sessionStorage ), go to the MDN docs .

Answer 3

You can use the localstorage of the browser (better encrypted). Then, if the user doesen't refresh the localstorage you will be able to use this information to fill the form.