Ionic

How to add a login screen to your Ionic framework project

Introduction

In this section you learn how to create a page, implement sign up, sign in and sign out to your Ionic app.

This is how it will look like:

User Registration with Email Verification App

Prerequisites

To complete this quickstart, you need:

At any time, you can access the complete Ionic Project built with this tutorial at our GitHub repository.

Step 1 - Install parse SDK

Considering you have an existing Ionic project, the first thing you need to do is to install parse SDK. You can do it by running:

$ npm install parse

Step 2 - Set up app’s credentials

  1. Open your app.component.ts, import parse and initialize its connection to Back4App Parse server.

app.component.html

1
2
  Parse.initialize("YOUR-APP-ID", "YOUR-JS-KEY");
  Parse.serverURL = 'https://parseapi.back4app.com/';

If you don’t know how to find your keys, check out the first Ionic tutorial Start From Template.

Step 3 - Create the LogIn Page

Now, let’s create our LogIn page. Luckly, Ionic does everything to us. All we need to do is to run the following command:

$ ionic generate page Login

In this page view, we need to add inputs for username and password and two buttons, one for signing up and another one for signing in.

login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <h4 text-center margin-top>Insert your credentials</h4>

  <ion-item>
    <ion-label stacked>Username</ion-label>
    <ion-input [(ngModel)]="username"></ion-input>
  </ion-item>

  <ion-item>
    <ion-label stacked>Password</ion-label>
    <ion-input type="password" [(ngModel)]="password"></ion-input>
  </ion-item>

  <div text-center margin-top>
    <button ion-button margin-right (click)="signUp()">
      SIGN UP
    </button>

    <button ion-button color="secondary" (click)="signIn()">
      SIGN IN
    </button>
  </div>

Let’s implement now the methods signIn() and signUp() referred in our Login view.

login.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  signUp() {
    Parse.User.signUp(this.username, this.password).then((resp) => {
      console.log('Logged in successfully', resp);

      // Clears up the form
      this.username = '';
      this.password = '';

      this.toastCtrl.create({
        message: 'Account created successfully',
        duration: 2000
      }).present();
    }, err => {
      console.log('Error signing in', err);

      this.toastCtrl.create({
        message: err.message,
        duration: 2000
      }).present();
    });
  }

Learn more about signUp() at Parse Documentation.

login.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  signIn() {
    Parse.User.logIn(this.username, this.password).then((resp) => {
      console.log('Logged in successfully', resp);

      // If you app has Tabs, set root to TabsPage
      this.navCtrl.setRoot('HomePage')
    }, err => {
      console.log('Error logging in', err);

      this.toastCtrl.create({
        message: err.message,
        duration: 2000
      }).present();
    });
  }

Learn more about Parse.User.logIn() at Parse Documentation.

This is how it should look like.

Login page

Step 4 - Implement Log out

Let’s move to our HomePage (or the page the user will be directed after logging in) and implement the sign out.

First, go ahead, open home.html and add a button for doing so.

home.html

1
2
3
4
5
6
7
  <h2 text-center>You are logged in!</h2>

  <div margin-top text-center>
    <button ion-button (click)="logOut()">
      Log out
    </button>
  </div>

Now, let’s implement the logOut() method and also add a Toast component if the request fails.

home.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  logOut() {
    Parse.User.logOut().then((resp) => {
      console.log('Logged out successfully', resp);

      this.navCtrl.setRoot('LoginPage');
    }, err => {
      console.log('Error logging out', err);

      this.toastCtrl.create({
        message: 'Error logging out',
        duration: 2000
      }).present();
    })
  }

Find more about Parse.User.logOut() at Parse Documentation.

It should look like this.

Login page

Step 5 - Set root page

An important feature of parse is that it remembers if a user is logged or not in a device. It means that even if the user closes the app, you can still restore his session when the app is open.

With that, we can determine if the app initial page will be our LoginPage or HomePage.

To do so, we just need to call currentAsync(). It will return the user logged in or null.

app.component.ts

1
2
3
4
5
6
7
8
9
  Parse.User.currentAsync().then(user => {
    console.log('Logged user', user);

    this.rootPage = user ? 'HomePage' : 'LoginPage';
  }, err => {
    console.log('Error getting logged user');

    this.rootPage = 'LoginPage';
  })

Learn more about Parse.User.currentAsync() at Parse Documentation.

Finally, it’s all set up!

At this point, just run ionic serve and you will have a sign in, sign up and sign out features working that also remembers the logged user until he/she logs out.