How can I set a root page outside of tabs that don't keep the tabs in place?

The flow of my app means that there are no tabs in place until a user logs in. The first page is a full-screen login screen. Once logged in the user is taken to tabs.ts which holds my tabs code.

One of the tabs has a button in that logs users out:

user.ts:

  // Logout
  logout() {    
    // Log the user out
    this.user.logout();

    // Take user to login screen
    this.navCtrl.setRoot(LoginPage);
  }

I thought that setting the root to LoginPage, which isn't part of any tab page, would remove the tabs. Unfortunately not, and the tabs remain. This is really problematic for obvious reasons.

How can I remove the tabs from this point? I feel like I need to potentially grab the tabs instance and destroy it, but that's a guess and I'm struggling to find anything in the docs.