Overview

Introduction

The purpose of this how-to guide is to help developers create a user system that can register users, login users, and check for authentication all in a Ionic application. It makes use of a backend API to generate a JSON Web Token  upon successful user login. The app will then use the token to request resources from the backend.

Below is a brief overview of Ionic, the backend API, and token authentication.

Ionic Framework

The Ionic framework is a mobile cross-platform framework that describes itself as a ‘build once, deploy everywhere’ solution. It makes that claim because it uses web technologies to build hybrid web applications. The framework is built on top of AngularJS and leverages Cordova/PhoneGap to deploy natively to mobile platforms such as Android, iOS, Windows, etc.

RESTful API

The tutorial assumes that the RESTful API has already been developed for use in the Ionic application and will not go over the creation of the API. If you don’t have one setup, refer to this tutorial on how to set one up. For the purpose of this how-to guide I will use a locally hosted API that behaves as follows:

Register API: http://127.0.0.1:8080/API/register

  1. Takes a POST request along with username and password.
  2. Checks if username is unique against the database .
  3. Returns JSON with a success property (Boolean) and a text property that contains a message from the server.

Example response:

apireg

Login API: http://127.0.0.1:8080/API/login

  1. Takes a POST request along with username and password.
  2. Checks if username and password combination
  3. Returns JSON with a success property (Boolean) and a text property that contains a message from the server.
  4. If login is successful a JSON Web Token (JWT) will also be returned in the JSON reply.

Example response:

apilog

JSON Web Token (JWT)

What is a JSON Web Token?

JWT is an open standard that allows for secure transmission of information between entities through a JSON object. The reason JWT is secure is because the information is digitally signed either using a public/private key pair or a secret.

How is it use for Authentication?

When the user logs in successfully, they will be given a token which will then be used in subsequent request for access to resources and services allowed with that token. The token is self-contained meaning that it has all the information about the user and another query to the database for user information is not necessary.

Below is an example of how JWT works.

  1. Client App: POST to API with username and password.
  2. Backend: Generates a JWT.
  3. Client App: Receives a JWT.
  4. Client App: Sends the JWT in the Authorization Header on subsequent requests.
  5. Backend: Check and gets user info from JWT.
  6. Backend: Sends reponse to client app.

<BACK | NEXT>