Ionic 2 – Rest Api Authentication (Updated)

Hi Friends,

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.. )

Let’s begin.

A video screencast of this post.

 

The complete code for this post – here.

Back-end code for this post – here.

We’ll be using the back-end which we created here.

Start a new project using

Open it up in your editor and follow the steps below.

First of all let’s create two more pages using the below commands.

Once these 2 pages are created create a new file called authservice.ts inside home directory and add the below code.

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.

Now open up home.ts file and add the below code.

Now open up signup.html and add the below code inbetween the ion-content tags.

Then open up signup.ts file and add the below code.

Please note that we now have an AlertController which is used to create and manage alerts.

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

Open up userpage.ts and add the below code as well.

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.

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

Serve the app using the below command.

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.

Thanks for reading. Peace.. :)

  • prabhat

    HI,

    Thanks for this helpful article.

    Can you please help me with angular validation in this demo.

  • Can

    I was trying to use your code with ionic 2 and angular two but it gives me two errors.
    1) Property ‘success’ does not exist on type ‘{}’.
    2)Property ‘msg’ does not exist on type ‘{}’.

    rising from the userpage.ts in getinfo() method

    can you help me about them?

    • Reedwan Ciao

      im also having this, any solution?

      • Kasper Meinema

        Change data to (data : any).

        this.authservice.getinfo().then(data => {
        >>
        this.authservice.getinfo().then((data: any) => {

    • twinsfan1100

      Did this problem get solved?

      • I hope you are running this after starting up your db bro. This error usually occurs when a blank obj is returned. i.e., {}

        • Shoeb Hussain

          Its Returning a Blank object even after starting the db
          please help..

          • Kasper Meinema

            See my solution in the other comments

  • Vincentcchgto Chan

    I would like to get the server code to change from mongodb to mysqldb ? Please provide the code here. Many many thanks.