Home Page

Just like the authentication page, the home page is taken from my previous example. The only real difference is me showing a welcoming message to the authenticated user.
    <ion-title>Home Page</ion-title>

	<ion-card *ngIf="user">
			<ion-card-title >{{user.firstName}} {{user.lastName}}</ion-card-title>
	<ion-button expand="block" size="large" type="reset" (click)="logout()">Logout</ion-button> 
import { Component, OnInit } from '@angular/core';

import { AuthService } from '../../services/auth.service';
import { User } from '../../models/user';

  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
export class HomePage implements OnInit {

    private user: User;

	constructor(private authService: AuthService) { }

	ngOnInit() {
		this.user = this.authService.currentUserValue;

    logout() {



As this is a browser-only example we can test it in our browser:
ionic serve
Of course, you can also test it using your Andriod smartphone:
ionic build android
ionic run android

Download The Code

Working example with step-by-step tutorial can be found here:

Here's a Way You Can Support Us And It’s Free

If this article helped you here’s one thing you can do for me. While writing articles I’m using Notion tool for information gathering. It’s a modern alternative to Evernote. If you use Evernote or any similar application give also a chance to Notion. By signing up, you will get access to a very powerful tool, give me one more premium month, and in turn help me to write future articles.

More Ionic 4 Tutorials