Ionic 5 Angular Login & Register Form UI Tutorial

Ionic 5 Angular login & registration form tutorial; Throughout this guide, you will find out how to create login and signup authentication pages or UI templates in an Ionic application using Angular forms from scratch.

Login and Registration is the basic building block of every web and mobile application. To access the app feature, a user has to first signup then signin using email and password.

This Ionic 5 forms ui tutorial aims to ease down your efforts and explain how to easily create a login ui template in Ionic, likewise how to create a signup ui template in Ionic using angular forms api.

Ionic 5 Login and Signup UI Tutorial

  • Step 1: Getting Started
  • Step 2: Create Pages in Ionic
  • Step 3: Set Up Routes and Navigation
  • Step 4: Create Registration Page UI
  • Step 5: Build Login Page UI in Ionic
  • Step 6: Start Ionic App

Getting Started

The first and foremost thing is to install ionic cli, so execute the below command on the command prompt:

npm install -g @ionic/cli

Further, you may use command to create the Ionic Angular app:

ionic start ionic-auth-ui blank --type=angular

Get into the app folder:

cd ionic-auth-ui

Create Pages in Ionic

Head over to the terminal, type the commands for creating login and signup ui pages and execute the commands.

ng generate page login

ng generate page signup

We are not using the home page, so we deleted it; nevertheless, you can keep it intact.

Set Up Routes and Navigation

Enabling navigation in the app requires adding routes, so we made little changes in the app routing module.

Open and update the given code in the app-routing.module.ts file.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'signup',
    pathMatch: 'full'
  },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'signup',
    loadChildren: () => import('./signup/signup.module').then( m => m.SignupPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Create Registration Page UI

This step consists of creating the registration auth page, and we are using the ngModel form directive to design the signup form page ui in ionic. On the home HTML page, add name, email, password and confirm password from input fields.

Update signup.page.html file:

<ion-header>
  <ion-toolbar color="danger">
    <ion-title>Create new account</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="danger">
  <ion-item color="danger">
    <ion-label position="floating">Name</ion-label>
    <ion-input [(ngModel)]="name" type="text" required></ion-input>
  </ion-item>

  <ion-item color="danger">
    <ion-label position="floating">Email</ion-label>
    <ion-input [(ngModel)]="email" type="text" required></ion-input>
  </ion-item>

  <ion-item color="danger">
    <ion-label position="floating">Password</ion-label>
    <ion-input [(ngModel)]="password" type="text" required></ion-input>
  </ion-item>

  <ion-item color="danger">
    <ion-label position="floating">Confirm Password</ion-label>
    <ion-input [(ngModel)]="confirm_password" type="text" required></ion-input>
  </ion-item>

  <ion-button class="ion-margin-top" type="submit" expand="block" color="light" (click)="onSubmit()">
    Create Account
  </ion-button>

  <ion-item color="danger" class="ion-text-center">
    <ion-label>Or</ion-label>
  </ion-item>

  <ion-button color="dark" expand="block" fill="outline" [routerLink]="['/login']">Login</ion-button>
</ion-content>

In this step you require to open and add the following code inside the signup.page.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.page.html',
  styleUrls: ['./signup.page.scss'],
})

export class SignupPage implements OnInit {

  name: string = "";
  email: string = "";
  password: string = "";
  confirm_password: string = "";  

  constructor() { }

  ngOnInit() { }

  onSubmit() {
     alert(
      this.name + ', ' + this.email + ', ' + this.password + ', ' + this.confirm_password
     )
  }

}

Ionic Registration Page template

Build Login Page UI in Ionic

Gaining access to the application requires the login ui template; we are creating an ionic login ui template. Hence, in the login page template, add the following code.

Open and update login.page.html file:

<ion-header>
  <ion-toolbar color="danger">
    <ion-title>Login</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content color="danger">
  <ion-item color="danger">
    <ion-label position="floating">Email</ion-label>
    <ion-input [(ngModel)]="email" type="text" required></ion-input>
  </ion-item>

  <ion-item color="danger">
    <ion-label position="floating">Password</ion-label>
    <ion-input [(ngModel)]="password" type="text" required></ion-input>
  </ion-item>

  <ion-button class="ion-margin-top" type="submit" expand="block" color="light" (click)="onSubmit()">
    Signin
  </ion-button>

  <ion-item color="danger" class="ion-text-center">
    <ion-label>Or</ion-label>
  </ion-item>

  <ion-button color="dark" expand="block" fill="outline" [routerLink]="['/signup']">Create Account</ion-button>
</ion-content>

Open and update login.page.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})

export class LoginPage implements OnInit {
  email: string = "";
  password: string = "";

  constructor() { }

  ngOnInit() { }

  onSubmit() {
    alert(
     this.email + ', ' + this.password
    )
 }
}

Create Login Page UI in Ionic

Start Ionic App

We can now test the Ionic 5 login and signup pages, but we need to start the app development server. There are many ways through which you can run the app. But, we are letting how to test the app in the emulator or virtual design.

Add the platform:

# iOS
ionic cordova platform add ios

# Android
ionic cordova platform add android

Create the runnable build:

# iOS
ionic cordova build ios

# Android
ionic cordova build android

Start the project on the virtual device:

# iOS
ionic cordova run ios -l

# Android
ionic cordova run android -l

Summary

Well, I guess that’s about it; In this quick guide, we have discussed how to create authentication UI templates in the Ionic Angular application. We mainly learned how to design login and signup user interface templates for handling authentication in Ionic using Angular forms api. We hope you would like this tutorial and share it with others.