Ionic tabs authentication guard JWT ADAL token

Hi all,

my students and I are working on implementing SSO login with ADAL and JWT on an ionic tabbed application.

We use another Ionic application which already implements SSO JWT and ADAL as reference for this, witch uses AuthGuard injectable service implementing canActivate function, this module being imported by the route module, itself imported by the app.module.ts (quite classical construction).

But my question is now for our tabbed application : it uses a tabs component, with ion-tab marks in the html file to navigate from one page to another.

I would like to protect this navigation but I read it is not a very correct design. My point is that I don’t want the user to keep being logged and free to navigate, if his token is timed out / deprecated.

I’m sorry if this is a dumb question but I m a noob in ionic development :slight_smile:

Thanks forward for your answers

Assuming you have a login screen, I would simply use tabs with the router integration. You can create an authentication handler/service that carries a BehaviorSubject authState and can subscribe to that when the app is initialized… if they are authenticated, you would use your NavController’s setRoot() method to set the root to either the login page or tabs page.

Inside the tabs page, you could check, on every nav/router request (or tab change), that their token is still valid. If it is not valid, update the authState, clear their token, and shoot them back to the login page.

If you want to keep them in the tabs, you can use the authState to wrap your tab content/routes in an if/else that displays a “You aren’t logged in… click here to subscribe/login/whatever” when they navigate to the tab rather than throwing them back to a login page.

If you want to remove the tabs themselves, I believe you can simply keep track of an array of tabs and push/pop them and have the main component view update. Might need to think that one through a bit more. Ionic 3 has <ion-tab [show]=true/false> which would determine of that tab is visible or not–easier than keeping track of an array of available tabs manually.

Here is a sample of logging in and seeing different tabs + there is a logout button int he top left menu you can use to kick a user back to the login screen whenever you decide to check to see if their token is expired:

Hi thanks a lot for your answer. We are going to try this :slight_smile: