Autocomplete on Ionic 3 PWA doesn't work

[kwanite]

I have a login form built with Ionic 3. When I upload it on Firebase as a PWA, I wish users to be able to save their passwords and sign in using saved passwords but autosaved passwords work neither on Safari nor on Chrome although I turned autocomplete=on in ion-input fields.

Below is my HTML code:

<ion-content>
    <div style="margin-top: 20px; margin-bottom: 20px">
        <ion-grid>
            <ion-row align-items-center>
                <ion-col align-self-center>
                    <div class="centering">
                        <img class="iconSmall" src="assets/imgs/iconSmall.png">
                        <p class="title">Log into your account</p>
                    </div>
                    <form [formGroup]="user" (ngSubmit)="loginUser(user)">
                        <ion-list>

                            <ion-item>
                                <ion-label floating>Email</ion-label>
                                <ion-input type="text" formControlName="email" autocomplete="on"></ion-input>
                            </ion-item>
                            <ion-item *ngIf="!user.controls.email.valid && user.controls.email.dirty" no-lines>
                                <p>Please enter a valid email address.</p>
                            </ion-item>
                            <ion-item>
                                <ion-label floating>Password</ion-label>
                                <ion-input type="password" formControlName="password" autocomplete="on"></ion-input>
                            </ion-item>
                            <ion-item *ngIf="!user.controls.password.valid && user.controls.password.dirty" no-lines>
                                <p>Password must have at least 6 characters.</p>
                            </ion-item>
                        </ion-list>
                        <div style="text-align: center;">
                            <button ion-button type="submit" [disabled]="user.invalid" color="primary" style="width: 90%;  font-weight: bold;">log in</button>
                        </div>
                    </form>
                    <div class="forgotButton" (click)="goToResetPassword()">
                        <p>Forgot your password?</p>
                    </div>

                </ion-col>
            </ion-row>
        </ion-grid>
    </div>


</ion-content>

And on the .ts file of the form I use the following relevant code:

import { Component } from '@angular/core';
import { IonicPage, NavController, Loading, LoadingController, Alert, AlertController } from 'ionic-angular';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { EmailValidator } from './../../validators/email';


@IonicPage()
@Component({
  selector: 'page-member-login',
  templateUrl: 'member-login.html',
})
export class MemberLoginPage {
  user : FormGroup;   //define the variable to contain form group
  public loading: Loading; 

  constructor(public navCtrl: NavController, 
              private fb: FormBuilder,
              public loadingCtrl:LoadingController,
              public alertCtrl: AlertController,
              public authProvider:AuthProvider) {

    this.user = this.fb.group ({
       email: ['', EmailValidator.isValid],
      password: ['', [Validators.minLength(6), Validators.required]],
    })
  };


loginUser(): void {
  // login code goes here
};




goToResetPassword():void{
  this.navCtrl.push('ResetPasswordPage');
};

}

export interface User {
  email: string;
  password: string;
}

What can I change in the code to make sure autosaved passwords appear and are usable when users come in the second time? Here is the complete error:

1. The browser asks if I want to save password. I say “yes”.
2. Next time I sign in, the username and password appears in the bar on the keyboard.
3. When I click on the username, it doesn’t fill in the form fields.

This is for PWA. I use:

ionic build – --prod

And upload the www files to firebase using

firebase deploy

[robinyo]

See: Firebase Authentication State Persistence

For a web application, the default behavior is to persist a user’s session even after the user closes the browser. This is convenient as the user is not required to continuously sign-in every time the web page is visited on the same device.

Unless you call:

  public signOut(): Promise<void> {
    return this.afAuth.auth.signOut();
  }

Your user’s will remain signed in.

[kwanite]

Thank you very much. I implemented the login using persistence and set persistence to LOCAL because it seemed to be the most resilient one.

Yet users that log out will not be able to use the saved password feature of the browser when they come back and it may demotivate some users. I still would love to be able to get this working with saved password and really cannot figure out the problem. I do not wish to use standard web input components as for styling and other features ion-input works very well.