
But since the login is the very first page that would be shown when the app is opened on a device, this is the place where it really makes sense.

Within our routing we have only added this guard to the login page, but of course it could be added to other pages as well. Otherwise, the guard will return true and the page the user wanted to access will be shown as usual.

Therefore the idea is to use a guard that checks if we’ve already seen the tutorial and shows it if not. Of course we could also make the tutorial page simply the first page, but usually you don’t want to bore your users more often than necessary with this page. We’ll see how each of the different guards work along the tutorial, for now we start with the introduction logic. We can use multiple guards for a page, and we use canLoad instead of canActivate since this will protect the whole lazy loaded module and not even load the file if the user is not allowed to access a path!īy securing the /tabs path at the top level, we also automatically secure every other path and page that you might later add to your tabs routing, since the guard will always be applied in that case. AuthGuard: Secure the internal pages of your app.AutoLoginGuard: Automatically log in a user on app startup if already authenticated before.IntroGuard: Check if the user has already seen the intro and show the page if not.We have the following guards for specific reasons:

Our routing file is a bit messed up from the generation of additional pages, and we also want to add a few guards to our pages. We will use the Capacitor Storage plugin so we don’t need any additional Cordova plugin or other library.
