The Techies' pub

Ionic 2 – Rest Api Authentication (Updated)

This post is an update to my previous post on Rest Api Authentication for your Ionic 2 apps which can be found here.

Ionic 2 has undergone a lot of changes and has been through a lot of releases as well. Finally we now have an RC version which hopefully wouldn’t differ much from the stable version that is yet to be released. (Dude seriously, Angular 2 ? I know, right.. )

I have already explained this code well in my previous post on the same topic. To give you guys a rough overview.

This code contains three functions that make http calls to api endpoints running on the back-end. It also has a function for logout which simply destroys the json-web-token stored in our local storage.

Now open up home.html and add the below code inbetween the <ion-content> tags.

Okay so far we have written code for a login screen and it’s associated functions, a signup page and its associated functions and a user dashboard page which will have a logout button and a get info button.

Now open up app.module.ts and modify it as shown below.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

import{NgModule}from'@angular/core';

import{IonicApp,IonicModule}from'ionic-angular';

import{MyApp}from'./app.component';

import{HomePage}from'../pages/home/home';

import{Signup}from'../pages/signup/signup';

import{Userpage}from'../pages/userpage/userpage';

import{AuthService}from'../pages/home/authservice';

@NgModule({

declarations:[

MyApp,

HomePage,

Signup,

Userpage

],

imports:[

IonicModule.forRoot(MyApp)

],

bootstrap:[IonicApp],

entryComponents:[

MyApp,

HomePage,

Signup,

Userpage

],

providers:[AuthService]

})

exportclassAppModule{}

Now start up your mongodb. Then fire up your backend.

Serve the app using the below command.

1

ionic serve-l

If everything goes fine; you would see our app now has features that enable us to register and then login.

Hope this helped you guys. Kindly share it with someone and help them too.