Hardware back button closes the app on Tab enabled Ionic 3 app

When the user hits my profile page(or tab), the user is not logged in then it shows login page as shown below.On the login page where it has header back button and it is working fine (you can see the code below).I need the same functionality when the user hits the hardware back button on Android device.But it closes the app.Can you tell me how to solve this issue? If you need more info please let me know.

my-profile.ts

constructor(public navCtrl: NavController, public app: App, public userService: UserService
        ) {
        if (!this.userService.userDetails) {
            this.app.getRootNav().setRoot('Login', { profile: true });
            return;
        }
    }

login.ts

constructor(public navCtrl: NavController, public navParams: NavParams) {
        this.profile = this.navParams.data.profile;
    }

    back() {
        if (this.profile) {//not logged in user
            this.navCtrl.setRoot('TabsPage');
        }
    }

login.html

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button *ngIf="profile" (click)="back()" tappable><ion-icon name="arrow-back"></ion-icon></button>
    </ion-buttons>
    <ion-title>login</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

</ion-content>