How to implement JWT in latest Ionic 2 (RC0 right now)

Ionic Framework ionic-v3
1

I am trying to build a fairly standard Ionic 2 app that uses JWT with my own backend Json API.

Does anyone know where to find a complete example of how this code would look in the latest Ionic 2. I found the angular2-jwt plugin, but their code didn’t work in Ionic 2 RC0, and while I have found bits and pieces of answers on other threads, I am not experienced enough to piece everything together on my own.

Basically, the site just needs to have a login page, a restricted area (that you have to be logged in to access), and store the JWT and user data in storage of some sort. I would imagine that this is pretty standard functionality for an Ionic app so I hope that someone can help me with the code samples and actual file names of where to put the code.

Thanks in advance!

3 Likes
2

Please help me to complete the installation guide about the integration of:

  • Ionic 2 RC0
  • TypeScript
  • Angular2-JWT
  • JWT Service

1- Create a blank project:

$ ionic start myApp blank --v2 --typescript --appname “My Application”
$ cd myApp

2.- Install Native Cordova plugin for Login POPUP:

$ ionic plugin add cordova-plugin-inappbrowser

**3.- Install and generate the Auth Provider **:

$ npm install angular2-jwt --save
$ ionic generate provider AuthService

**4.- Add the pages for the users **:

$ ionic generate page Login
$ ionic generate page Signup
$ ionic generate page ResetPassword
$ ionic generate page Profile

5.- Run application on the browser:
$ ionic run browser

3

Are you having this problem?

4

A fantastic tutorial came out yesterday and it was a great help to me solving this, so I’ll post the link here:

My confusion was mostly around not knowing how to make an duse providers/services, and also how to use ionic’s storage instead of localStorage (angular2-jwt’s default). It turns out I really didn’t even need angular2-jwt and I opted for my own auth service (as per the tutorial) to do the job.

The only piece I would still like to add to my app is routes (for each ionic page) with auth guarding for each of the private routes. This would enable me to redirect to a login page immediately based on route. I don’t think routes are possible yet in Ionic 2 RC0 unfortunately.

5

This is an App with Ionic 2 RC0 + JWT:

ionic2-conference-app: Ionic Conference App with JWT authentication

The AuthService is: