Version: 5.0

Handling Application Startup

Overview

When we created the application for the getting started tutorial we made sure Identity Vault was properly initialized before we used it. However, we just jumped right into the first tab of the main part of the app. This is not a realistic experience for our users. Let's implement something more realistic.

Our application currently just starts right up in the application itself and we have a button that the user can press to store the authentication information in the vault. This is not realistic. Our application should have a page where the user logs in.

In our case, this will still just be a button that the user presses to fake a log in, but we are getting a step closer to an actual flow by having the login page.

The Startup Flow

When our application starts, the session can be in one of the following states:

Locked:
1. With valid authentication tokens.
2. With invalid authentication tokens.
Not logged in.

If the application is locked, the application shall give the user the opportunity to unlock the vault. If the unlock fails, the user shall be given the option to either try again or to clear the session data and log in again.

If the user unlocks the vault and the resulting authentication information is valid, the first tab shall be loaded. For our tutorial application, if we have session data the session is, by definition, valid.

If the user unlocks the vault and the resulting authentication information is expired, the login page shall be loaded. Having expired or otherwise invalid authentication information is not technically possible in our tutorial application, but we will code for it none the less.

If the user is not logged in, the login page shall be loaded.

We will build upon the application we created in the getting started tutorial in order to implement a basic application startup workflow.

Let's Code

As mentioned previously, this tutorial builds upon the application created when doing the getting started tutorial. If you have the code from when you performed that tutorial, then you are good to go. If you need the code you can make a copy from our GitHub repository.

Generate New Pages

In order to implement our startup and authentication strategies, we need to have a LoginPage. We will also replace the "default" page (currently the Tab1Page) with a StartPage that will contain our startup logic.

Generate these pages.

terminal


_10ionic generate page login
_10ionic generate page start

Update Routes

With the new pages in place, the routing needs to be fixed. The application's routing scheme has two levels: a base page level and a sub-page level. As such, each of our routes has one of the following formats: /base-page or /base-page/sub-page.

At the base page level, we want to have three different pages: TabsPage, LoginPage, and StartPage. We also want the default route (/) to be the StartPage. Update the src/app/app.routes.ts file to:

Define the /tabs route.
Define the /login route.
Define the /start route.
Create a redirect from / to /start.

src/app/app.routes.ts


_21import { Routes } from '@angular/router';
_21
_21export const routes: Routes = [
_21  {
_21    path: '',
_21    redirectTo: '/start',
_21    pathMatch: 'full',
_21  },
_21  {
_21    path: 'tabs',
_21    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
_21  },
_21  {
_21    path: 'login',
_21    loadComponent: () => import('./login/login.page').then((m) => m.LoginPage),
_21  },
_21  {
_21    path: 'start',
_21    loadComponent: () => import('./start/start.page').then((m) => m.StartPage),
_21  },
_21];

The TabsPage (route: /tabs) has sub-pages. The sub-pages are already set up, but we need to make the following adjustments to src/app/tabs/tabs.routes.ts:

Remove the redirect for / since it was moved to src/app/app.routes.ts.
Change the main path from tabs (which is now defined in src/app/app.routes.ts) to an empty string.

src/app/tabs/tabs.routes.ts


_28import { Routes } from '@angular/router';
_28import { TabsPage } from './tabs.page';
_28
_28export const routes: Routes = [
_28  {
_28    path: '',
_28    component: TabsPage,
_28    children: [
_28      {
_28        path: 'tab1',
_28        loadComponent: () => import('../tab1/tab1.page').then((m) => m.Tab1Page),
_28      },
_28      {
_28        path: 'tab2',
_28        loadComponent: () => import('../tab2/tab2.page').then((m) => m.Tab2Page),
_28      },
_28      {
_28        path: 'tab3',
_28        loadComponent: () => import('../tab3/tab3.page').then((m) => m.Tab3Page),
_28      },
_28      {
_28        path: '',
_28        redirectTo: '/tabs/tab1',
_28        pathMatch: 'full',
_28      },
_28    ],
_28  },
_28];

The `AuthenticationService`

Part of our startup strategy involves authentication. We will not really be performing authentication, but we will add the service so that we have the infrastructure in place so we can later add authentication via a solution such as Auth Connect.

Terminal


_10ionic generate service core/authentication

Generate the authentication service.

Terminal