Remember Me check Feature in Angular Login page?

Question

This is my angular Html code:

             <form action="#" [formGroup]="login" (ngSubmit)="onSubmit()" class="login-form">
                <label for="email">Email</label>
                <input type="text" id="email" name="email" formControlName="email" autocomplete="on"
                    [ngClass]="{ 'is-invalid': submitted && f.email.errors }">

                <label for="password">Password</label>
                <input type="password" id="password" name="password" formControlName="password"
                 [ngClass]="{ 'is-invalid': submitted && f.password.errors }" (keydown.enter)="onSubmit()">
                
                <div class="loginfoot">
                    <div class="loginrememberme">
                        <label class="loginremembermelable">
                            <input type="checkbox" formControlName="rememberMe">Remember me
                            <span class="logincheckbox"></span>
                        </label>
                    </div>
                </div>
                <div class="loginsubmitbtn">
                    <input class="" type="submit" value="Submit">
                </div>
            </form>

This is my Angular component.ts file:

export class JSLoginComponent implements OnInit {

rememberMeChecked: boolean = false;

login!: FormGroup;

constructor (private formBuilder: FormBuilder,

private dataService: DataService,

private authService: AuthService)

{

if (this.route.snapshot.params["id"]) {
  this.id = this.route.snapshot.params["id"];
}

}

ngOnInit():

void {
this.login = this.formBuilder.group({

  email: ['', [Validators.required, Validators.pattern(this.emailPattern)]],

  password: ['', Validators.required],

  rememberMe: []

});

const email = localStorage.getItem('email');
const password = localStorage.getItem('password');
const rememberMe = !!localStorage.getItem('email') && !!localStorage.getItem('password');
this.login.patchValue({
  email: email || '',
  password: password || '',
  //rememberMe: rememberMe
});

onSubmit() {

this.submitted = true;

if (this.login.invalid) {
  return;
}

this.rememberMeChecked = this.login.get('rememberMe')?.value;
if (this.rememberMeChecked) {
  localStorage.setItem('email', this.login.value.email);
  localStorage.setItem('password', this.login.value.password);
} else {
  localStorage.removeItem('email');
  localStorage.removeItem('password');
}

} }

Here My requirement is When I check the "Remember Me" checkbox, Store that email and password, After logout the page need to display the email and password in suggestions. When I typing the email in the email field suggest the email and password what I enter before the login, When I click on it (Suggestion), Need to fetch the email and password with their respective fields. Can anyone help me with this. Thanks in advance.

Answer 1

Please, NEVER store the password in the client!

Normally, when system uses remember in login, it means that the session will not be killed, or the session will be n times greater, or the backend will generate a refresh token. All these options dependes on the type of session your backend is providing.

There is no problem to store the email, if the user wants, but there is no reason to store the password, it is a security serius risk.

If you really wants the user to login again without enter the password, you need to create an token that could reload the user session, but it depends a lot on backend.