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:
Prerequisites
To complete this quickstart, you need:
- Visual Studio Code (or any web IDE you like).
- Ionic Framework.
- An app created at Back4App.
- Follow the New Parse App tutorial to learn how to create a Parse app at Back4App.
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
- Open your
app.component.ts
, importparse
and initialize its connection to Back4App Parse server.
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.
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.
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.
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.
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.
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.
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.
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
.
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.