How to Create Ionic 7 Login and Register UI with Angular

In this Ionic tutorial, we will learn how to create a responsive login and registration form with Angular 16 using Ionic UI components.We have created authentication tutorials on the following platforms Angular, Firebase, Node, Express and MongoDB.

Complete Angular Firebase Authentication Tutorial.

Create Angular JWT Authentication with Node and Express Server.

Creating a login and registration form is merely effortless; all credit goes to the Ionic’s ready-made UI components.

Ionic makes frontend developers job effortless and makes the development process of login UI so simple.

To make the Ionic Form layout, we will also take the help of Ionic Grid system, Form elements such as input fields and Buttons.

Our Ionic/Angular Form app will have login and registration pages so we will also learn to implement Ionic routing to navigate between components.

Install Ionic Angular Project

Ionic CLI tool must be configured on your development machine, use below command to install this go-to tool:

sudo npm install -g @ionic/cli

To get started with Login & Registration UI, Install the blank Ionic/Angular project by running the following command.

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

Get inside the project directory.

cd ionic-form-ui

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

Generate Components

To create the Ionic form we need to generate components for Login, Sign Up, and Forgot Password pages.

In Ionic we call pages to components, run the following command to create the pages.

ng generate page login

ng generate page registration

ng generate page forgot-password

We have generated the following components which you can see in your IDE or text-editor as well.

Configure Ionic Routing

In the home page we will create the log-in and sign-up button, clicking on these button user will navigate to their respective page. Here is your routing structure in app-routing.module.ts file.

In the next step, we will learn how to enable the routing in Ionic app.

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

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'registration',
    loadChildren: () => import('./registration/registration.module').then( m => m.RegistrationPageModule)
  },
  {
    path: 'forgot-password',
    loadChildren: () => import('./forgot-password/forgot-password.module').then( m => m.ForgotPasswordPageModule)
  },
];

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

export class AppRoutingModule { }

Add Angular [routerLink]="['...']" directive in Ionic buttons to enable the navigation between components. Open home.page.html file and add the following code.

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Form
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="auth-form">
  <ion-grid>
    <ion-row>
      <ion-col align-self-center>
        <ion-button [routerLink]="['/registration']" expand="block" color="primary">Register</ion-button>

        <span class="divider line one-line">or</span>

        <span class="already">Already a user?</span>

        <ion-button [routerLink]="['/login']" expand="block" color="danger">Sign In</ion-button>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Create Ionic Login UI Form

To create login form template we need to use the Ionic UI components such as ion-input and ion-button.

Open login.page.html file and paste the following code in it.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Log In</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form>
    <ion-item lines="full">
      <ion-label position="floating">Email</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>

    <ion-item lines="full">
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" required></ion-input>
    </ion-item>

    <ion-row>
      <ion-col>
        <ion-button type="submit" color="danger" expand="block">Sign In</ion-button>
        <a [routerLink]="['/forgot-password']" class="small-text">Forgot Password?</a>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

To go back to the previous page we used the ion-back-button component, we build the login form in Ionic Angular using input, button components.

Create Register Form Page

To create a sign up form we will add the first name, last name, email and password field in the Ionic’s register page and the open the registration.page.html file and add the following code in it.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Register</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form>
    <ion-item lines="full">
      <ion-label position="floating">First name</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>

    <ion-item lines="full">
      <ion-label position="floating">Last name</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>

    <ion-item lines="full">
      <ion-label position="floating">Email</ion-label>
      <ion-input type="text" required></ion-input>
    </ion-item>

    <ion-item lines="full">
      <ion-label position="floating">Password</ion-label>
      <ion-input type="password" required></ion-input>
    </ion-item>

    <ion-row>
      <ion-col>
        <ion-button type="submit" color="danger" expand="block">Sign Up</ion-button>
      </ion-col>
    </ion-row>
  </form>
</ion-content>

Create Forgot Password

Next, we will create a forgot password form in the Ionic page. If a user forgets his or her password then he will enter his email address and will get instruction on his registered email id to create a new password.

Open the forgot-password.page.html file and add the following code inside of it.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>Reset Your Password</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form>
    <ion-item lines="full">
      <ion-label position="floating">Email</ion-label>
      <ion-input type="email" required></ion-input>
    </ion-item>

    <ion-row>
      <ion-col>
        <ion-button type="submit" color="danger" expand="block">Send</ion-button>
      </ion-col>
    </ion-row>

    <small>
      Please provide the username or email address that you used when you signed
      up for your Evernote account.
    </small>
  </form>
</ion-content>

Start the Ionic application:

ionic serve -l

Conclusion

Thats it for now finally we have completed Ionic Login UI tutorial and learned how to create basic sign-in and sign-up form templates or pages in Ionic Angular application.

Also, you can download the complete code from GitHub.