Building Ionic Login Sample App. Part 1


This sample app demonstrates how you can create Login form in an Ionic project that will validate user credentials stored in the database.

This is the first part and we will demonstrate how to set up the app and create its UI.


Want to know more?

You can also check this document that explains how to quickly create a ready-to-go login page by using our predefined Login Screen Layout with further modifying it according to your needs:


Downloads and Resources

You can also try it yourself by creating from the backup:

  1. Download the app backup file.
  2. Click Create new app.
  3. Click From backup and select the project backup file on your drive.
  4. Type in the app name.
  5. Click Create:

Creating from backup

But if you are interested in the detailed tutorial, please follow the tutorial steps below.

Creating UI

  1. Navigate to the dashboard. Here, from the Apps tab, click Create new app.
  2. Select the Ionic application for its type and Blank as a template. Name it Ionic Login App and confirm by clicking Create:

Creating a new app

  1. Unfold the Pages folder. Clicking the cog icon, rename Screen1 to loginPage:

Renaming Screen1 to loginPage

  1. Click CREATE NEW > Page and name it Welcome:

Creating a new page - welcome

It's time that we can proceed to define both pages' appearance.

Defining loginPage UI

  1. Open the loginPage DESIGN panel.
  2. Expand the OUTLINE view (on the left), select the Page component, then, under the PROPERTIES panel, set the Header and Footer properties to False:

Disabling Header and Footer

  1. Then, drag & drop the Image component from PALETTE - it will be our Logo.

Defining App Logo

  1. Collapse the page OUTLINE view, then select the Image component and, under the PROPERTIES panel, define it as follows:
    • Class: login-logo;
    • Responsive: True:

Image component

  1. Then, for the Image property, click the Change button: this will open the Media Manager. Click Upload file and upload your own logo (it should be prepared beforehand). Go back to the list, select the uploaded image, and click Apply:

Working with Media Manager

  1. Next, drag & drop the Card component under the logo, that is to be defined as the Login form.
  2. Finally, place the Text component inside Card Item Title, set its Container property to h1 and replace the default text of the Text property with Log In to Your Account!:
  1. For the Card Item, clear the Text field.
  2. Open the SCSS panel panel (on the left) and add the class for your logo by inserting the following code:
.login-logo {
    display: block;
    margin: 0 auto;
    width: 150px;
    height: 150px;
    margin-top: 45px;

Here is how it should look like:


Defining Form

  1. Now, locate the Form component in the PALETTE, and place it into the Card1 under the heading:
  1. Drag & drop two Input components and one Button inside the previously added Form component (you can check it under the OUTLINE view):

Defining Card component

  1. Select the first input, expand its Icon property under the PROPERTIES panel and, from the drop-down, select success for Color and set its Slot to Start; then click the No icon button and select the mail icon for Style:
  1. Now, insert Enter your email for the Placeholder property and set the Type property to Email.
  2. Also, expand the Label property to clear its Text field:
  1. Then, unfold the Form Control section and set Validation > Required to true, also, define the [(ngModel)] as email:

Defining Input1

  1. Now, select the second input, expand its Icon property, from the drop-down, select success for Color and set its Slot to Start; then click the No icon button and select the lock-closed icon for Style.
  2. Now, expand the Label property and clear its Text field.
  3. Then, insert Enter your password for the Placeholder property, select Required to true, Type to Password and add an [(ngModel)] = password:

Defining Input2

  1. Select the Button component and go its Styles properties tab. There, from the drop-down, select success for Button Color and then set its Shape property to Round:

Defining Button

  1. Then, go to the Common tab and set the Text property to Log In:
  1. Now, navigate to the CODE panel of loginPage and create two variables there: email and password, both of String type:

Defining Welcome Page UI

  1. Switch to the Welcome page, expand the OUTLINE view and select the Page component. Under its PROPERTIES panel, set Footer to False and confirm:
  1. Then, in the header, select the Toolbar title component and insert Welcome! for its Text property:
  1. Drag & drop another Button inside the Toolbar buttons area (on the left) and set its Component property to Ionic Menu Button and Button Color to success (to access this property, select the Styles tab):

Defining Header Toolbar Button

  1. Now, to create a logout button, drag & drop another Button to the Toolbar. This should be defined as follows:
    • Button Color: success (to access this property, select the Styles tab);
    • Component: Ionic Button;
    • Slot: Primary;
    • clear the Text field.
  2. Now, expand the Icon property and select the log-out icon for its Style property and set Slot to Icon Only:

Defining Sign Out button

  1. Then we need to connect these two pages. Navigate to the DESIGN panel of the loginPage and expand the EVENTS tab below. For the Button1 component, select Click as an event, and Form submit as an ACTION.
  2. Then, select the Form1 component for the Component name. Save the changes:
  1. After that, add one more event in the EVENTS tab to redirect user to the Welcome page after a successful login. Select Form1 from the COMPONENT drop-down, then Form submit from the EVENT drop-down and Navigate to page as ACTION with Welcome for its route; save:

Don't forget to save all the app changes.

Finishing Touches

You might also like to beautify your app UI. To do it, add the below code to the SCSS panel panel of loginPage:

ion-content {
  --background: no-repeat center/cover url("");

The tab should look like this:


Modifying SCSS of loginPage

Similarly, add the same code to the SCSS panel panel of the Welcome page:

ion-content {
   --background: no-repeat center/cover url("");

App Testing

You can now click the TEST button in the App Builder Toolbar to test how your app works on this step.
Enter any email and password in the form fields and click the Log In button. You will be navigated to the Welcome page:


App testing

What’s Next

Now, let's proceed with Part 2 which shows how to import the database services into the app and use it for handling user login and logout.