Best practice for bypassing a login when already authenticated

Ionic Framework ionic-v3
1

I have an app that requires login, so I set the rootPage to LoginPage. However, I’d like to bypass the login page if the user is already logged in (I’m authenticating against an OAuth service and storing the token data using SqlStorage).

I got it “working” by adding code to the login page to check storage and then setRoot to the HomePage, but when the app starts it still shows the login page for a split second before moving to the “Home” page.

So I thought maybe adding a check at the App level would be better, but I seem to get the same result (flicker of the Login page before showing the Home page).

I ended up here: https://github.com/driftyco/ionic/issues/5543 which led me to here: http://ionicframework.com/docs/v2/components/#navigating_from_root – but I can’t seem to get it to work without the delay.

Any thoughts?

Thanks,
Brian

2

I can’t claim it’s a “best practice”, but what I do is to have a DispatchPage with a blank template that is set as the root by the app. Its constructor injects NavController, and can call setRoot to either the HomePage (if the user is logged in) or to the LoginPage (if not).

2 Likes
3

Thanks for the response, that does make sense and is a pretty simple workaround. I haven’t tested on a device or anything yet, just working in chrome. I’m wondering if the splash screen would cover up the flicker or not. In any case I suppose you could use your method and maybe make the blank “DipsatchPage” have some sort of “loading” animation/placeholder. I’m still hoping there’d be a way to do change/set the rootPage before displaying the initial rootPage, but I’ll move on and come back to this later.

Thanks again!

4

Hey…
i am using firebase authentication and I have this code in my app.ts

firebase.auth().onAuthStateChanged((user) => { if (user) { // If there's a user take him to the home page. this.rootPage = TabsPage; } else { // If there's no user logged in send him to the LoginPage this.rootPage = LoginPage; } });

Hope it helps.

5

Hi,
It is good to move the user loggedin functionality in app.component.ts. You can set the rootpage after getting the result from the OAuth service.

@Component({
    templateUrl: 'app.html'
})
export class MyApp {
    @ViewChild(Nav) navCtrl: Nav;

    public rootPage;// Just declare the property, don't set a value here

    constructor(...) {
      this.platform.ready().then(() => {
        Splashscreen.hide();

        // Get the status from the storage
        this.storage.get('login:status').then(loggedIn => {
          this.rootPage = loggedIn ? HomePage : LoginPage;
        });
      });
    }

}

Do not assign a value for rootPage before platform ready.Hope it helps