Cross-platform mobile application of Login/Sign-up using Ionic framework

4 min readJul 7, 2022

Design the login and signup app mobile application using web-technologies.

This article is the continuity of my previous article [url of the article]

Goal of the article

The goal of this article is to implement the login and signup pages/design of the application and switch/move between two views by clicking on the button.

Outcome of the article

After reading this article, you gain the experimental knowledge of how to develop the cross-platform apps in ionic with prior experience of android and iOS development.

Let’s start the implementation

Inside the ‘app’ folder, there is an app called ‘home’. We don’t require home application. Our goal is to make login application. So rename the home folder to login folder.

Directory is `Mart-24/src/app/home` to `Mart-24/src/app/login`. Rename all the files inside this folder to login as well.

Change all the paths and variables in all nested files of login folder. The content of the files becomes,

Login Application

Follow the below steps to implement the login and signup application:

Change the color of the top header. Go into the login.page.html file and add color=”danger” attribute in <ion-toolbar> tag. Ionic offers Primary, Secondary, Tertiary, Success, Warning, Danger, Light, Medium and Dark color. If don’t want to show the name of the app in the header, use ‘hidden’ attribute inside the <ion-header> tag and it will hide the header from the application view.
Details can be found here: https://ionicframework.com/docs/theming/colors

<ion-header>
  <ion-toolbar color=”danger”>
    <ion-title>Mart-24</ion-title>
  </ion-toolbar>
</ion-header>

2. Remove all the content inside the <ion-content> tag and add the <ion-row> and <ion-col>. Inside the them, add <ion-icon name=”cart-outline”> tag with the attribute of ‘name’ that is used to used the name of the icon.
You can use any icon of your choice from here: https://ionic.io/ionicons

<ion-row>
  <ion-col>
    <ion-icon name=”cart-outline” color=”light”></ion-icon>
  </ion-col>
</ion-row>

3. Add new tag <ion-item> and add two label tag <ion-label> which display the application name and description.

<ion-item lines=”none” color=”danger” class=”text1">
  <ion-label>Mart-24</ion-label>
</ion-item><ion-item lines=”none” color=”danger” class=”text2">
  <ion-label>an online grocery store</ion-label>
</ion-item>

4. For email and password input from the user, add two text field using <ion-input> inside the <ion-item> tag.

<ion-item lines=”none” color=”light” class=”rowStyle”>
  <ion-input type=”text” placeholder=”your email” required >
  </ion-input>
</ion-item><ion-item lines=”none” color=”light” class=”rowStyle”>
  <ion-input type=”password” placeholder=”your password” required> 
  </ion-input>
</ion-item>

5. Now, add the ‘login’ button below the text input fields. Ionic provide a <ion-button> tag for clickable buttons.

<ion-item lines=”none” class=”align” color=”danger”>
  <ion-button color=”danger” class=”rowStyleButton”>
     Login
  </ion-button>
</ion-item>

Run the application

Open the terminal and go into the project directory.
Run the command. It will redirect to browser and open the app. Change to mobile view from inspect element tool.

$ ionic serve

Sign-up application

Open the terminal and make sure you are in project folder. Run the below command:

$ ionic generate page signup

It will create a new folder ‘signup’ inside the ‘src/app/signup’. Open the signup.page.html and copy paste the code from login.page.html file. Because the sign-up page is same as login with additional field of username. Also change the button text from ‘login’ to ‘sign-up’.

<ion-item lines=”none” color=”light” class=”rowStyle”>
   <ion-input type=”text” placeholder=”your name” required>
   </ion-input>
</ion-item>

Connectivity of Signup page with login page

Open the login page ‘login.page.html’ and add the new button to connect the sign-up page. Bind the button tag with click event using user-defined function ‘gotoSignup()’ which redirect to signup page.

<ion-item lines=”none” class=”signupButton” color=”danger”>
   <ion-button color=”danger” class=”rowStyleSignupButton”   
    (click)=”gotoSignup()”>
    Don’t have an account? Sign Up
   </ion-button>
</ion-item>

Now define the gotoSignup() function definition inside the login.page.ts file. Import the ‘NavController’ from ‘ionic/angular’ library and use ‘navigateForward’ option to move to another app view.

Let’s try the login page with ‘Sign Up’ button click, it will redirect to Sign-up page.

Similarly, we have to connect the signup page with login page as well. Add ‘cancel’ button below the ‘Sign up’ button inside the ‘signup.page.html’.

<ion-item lines=”none” class=”align” color=”danger”>
   <ion-button color=”danger” class=”rowStyleButton” (click)=”gotoLogin()”>
    Cancel
   </ion-button>
</ion-item>

Similarly to gotoSignup() function, define gotoLogin() function in ‘signup.page.ts’ file.

The design of the both login and signup pages are completed and the goal of this article is achieved. In my next article, I am continue this application ‘Mart-24’ with user authentication using Firebase database.

You can find the code of the application here:

https://github.com/muhammad-usman-108/Mart-24