How to conditionally set root page in Ionic 5

Ionic Framework
1

Hello,

Using Ionic 5.4, I want to set root page based on some condition while first app initialization.

I’m using Firebase to autenticate users, so I want to redirect to TabsPage when user is already logged, and to StartPage when is not logged.

I’m trying to set the rootPage on the app.component.ts as follow:

rootPage:any = ‘StartPage’;

and in initializeApp():

this.authSvc.Session.subscribe(session=>{

    if(session){

        this.rootPage = 'TabsPage';

    }

      else{

        this.rootPage = 'StartPage';

      }

  });

I took this example for a forum of ionic V4

Thanks

2

I wish I could get people to stop using phrases like “Ionic 4” and “Ionic 5”, but that appears to be an uphill battle. In any event, the version of the Ionic Framework that you’re using if you’re feeling the need to ask this question with that code is likely using the Angular router. You can learn all about how to operate it in this guide.

1 Like
3

My solution was save the user with the NativeStorage plugin, and verify if user exist in the app.module.

4

that is the wrong approach, firebase maintains the current user for you

5

Yes, but when I try to get the current user, it takes so much time, and it charge the loginPage for 1 or 2 seconds, and then pass to the homePage. I’ve tried with primises, callbacks, observables and so on.

6

As u determine the right session in an async way u need to present a loading spinner (or any waiting ui) for navigating to the proper direction until things resolved

One way is via a splash page that navigates to tabs or start once resolved

Consequence of the async nature of firebase and many other ways to het session data etc

1 Like
7

Where can I put some code to keep the splash until firebase charge user data?

8

the splash is the first page the user navigates to, so that is the placeholder for the code that does the waiting, then you navigate away as per earlier description.

So a separate page