JSON WEB TOKEN(JWT)

BY:
MUHAMMAD RASHID MUKHTAR
 CONTENTS

1. Introduction
2. Cookie Based Authentication
3. Token Based Authentication
4. JSON Web Token
5. When to use JWT?
6. JWT Structure
7. How JWT works?
8. JWT v/s other methods
9. Cons
10. Server Side Application
11. Client Side Application
 INTRODUCTION

1. Authentication
2. Ways to authenticate
(i). Cookie based (Stateful Authentication)
(ii). Token based (Stateless Authentication)
 Cookie Based Authentication

 Stateful : An authentication record or session must

be maintained. The server needs to keep track of
active sessions in a database.
 Every request is accompanied by a cookie.
 Whenever the user makes a request, the server
validates the cookie and session Id.
 Basic flow using cookie authentication:
 Procedure

 User enters their login credentials.

 Server verifies the credentials are correct and creates
a session which is then stored in a database.
 A cookie with the session ID is placed in the users
browser.
 On further requests, the session ID is verified against
the database and if valid, the request processed.
 Once a user logs out of the app, the session is
destroyed both client and server side.
 Features

 Stateful
 Coupling with web framework
 Cross Origin Request Sharing(CORS)
 No data storage
 Performance
 Token Based Authentication

 Stateless: The server does not keep a record of which

users are logged in . Instead, every request to the
server is accompanied by a token which the server
uses to verify the authenticity of the request.

 Basic Flow of token based authentication:

 Procedure

 User enters their login credentials.

 Server verifies the credentials are correct and returns a
signed token.
 This token is stored client-side, most commonly in local
storage.
 Subsequent requests to the server include this token as
an additional Authorization header.
 The server decodes the JWT and if the token is valid
processes the request
 Once a user logs out, the token is destroyed client-side.
 Features

 Stateless
 CORS / Cross-Domain
 Data Storage
 Performance
 Compact and Self Contained
 Easy implementation on Mobile

Hence, Token based authentication is better than

Cookie based authentication.
 JSON Web Tokens

 JSON Web Token (JWT) is a compact, open standard means of

representing claims to be transferred between two parties. These are
encoded as a JSON object that is used as the payload of a JSON Web
Signature (JWS) structure or as the plain text of a JSON Web Encryption
(JWE) structure, enabling the claims to be digitally signed.

 In layman’s language, JSON Web Token(JWT) is a self-verified

encoded string that is used in Modern Web/Mobile app for both
Authentication and Authorization. The fact that it is stateless removes the
maintenance efforts that we need for other Authentication and
Authorization tools. It is used as a replacement to cookies, or rather
improvement over cookies.

 Compact and Self Contained.

 Used by Node.js, Ruby, python etc.

 When to use JWT?

 Authentication : Once the user is logged in, each

subsequent request will include the JWT, allowing the
user to access routes, services, and resources that are
permitted with that token. It’s a feature that widely
because of its small overhead and its ability to be easily
used across different domains.

 Information Exchange: JSON Web Tokens are a

good way of securely transmitting information between
parties, because as they can be signed, for example using
public/private key pairs, you can be sure that the senders
are who they say they are. You can also verify that the
content hasn't been tampered. (using header and
payload)
 JWT Structure

JWT Tokens consists of three parts appended by a

(dot).
➢ Header: type of token, hash algorithm
➢ Payload: claims (public, private and reserved)
➢ Signature
HEADER
 PAYLOAD

Common claims are:

 Issuer (iss)
 Subject (sub)
 Audience (aud)
 Expiration time (exp)
 Not before (nbf)
 Issued at (iat)
 JWT ID (jti)
SIGNATURE
OUTPUT (JWT)
 Simple Mechanism

 In JWT, a token is encoded from a data payload

using a secret.
 That token is passed to the client.
 Whenever the client sends that token along with a
request, the server validates it and sends back the
response.
JWT Mechanism
 Step by Step Process

 A client sends username/password combination to the server

 The server validates the authentication
 If authentication is successful, the server creates a JWT token
else establishes an error response
 On successful authentication, the client gets JWT token in the
response body
 Client stores that token in local storage or session storage.
 From next time, the client for making any request supplies the
JWT token in request headers like this. Authorization: Bearer
<jwt_token>
 Server upon receiving the JWT validates it and sends the
successful response else error.
How JWT works?
 JWT v/s Other Token Methods

 Better than Simple Web Token(SWT) and

SAML(Simple Assertion Markup Language).
 Less verbose.
 Security
 Common parser
 Cons of JWT

➢ Data Overhead.

➢ Security of whole platform will be compromised if the

secret key is leaked.
 jsonwebtoken

 There are many libraries available in different

languages developed already.
 You plug them, and you get two main functionalities
to generating JWT, validate JWT, etc.
 Here we pick an NPM library
called jsonwebtoken which is suggested by the
JWT website.
 Install it globally or for specific project
 Npm install jsonwebtoken –g//for global
 Server Side Sample Application

 We need to create two files other than app.js in our

application at same level.
 Config.js
 Middleware.js
 In config.js, we just define the secret which is master
password.
 This secret will be read by JWT library while creating and
validating tokens.
 In production, we need to store this secret in
environment variable instead of a file.
module.exports = {
secret: ‘bcs6csp19’
};
 Middleware.js
let jwt = require('jsonwebtoken');
const config = require('./config.js'); else {
req.decoded = decoded;
next();
let checkToken = (req, res, next) => {
}
let token = req.headers['x-access-token'] || });
req.headers['authorization’]; } else {
// Express headers are auto converted to lowercase return res.json({
if (token.startsWith('Bearer ')) { success: false,
// Remove Bearer from string message: 'Auth token is not supplied'
});
token = token.slice(7, token.length);
}
} };

if (token) { module.exports = {
jwt.verify(token, config.secret, (err, decoded) => { checkToken: checkToken
}
if (err) {
return res.json({
success: false,
message: 'Token is not valid'
});
}
 Middleware.js

 In the middleware.js, we can write a function that acts as

middleware to get a token from a request and proceeds
only when the token is validated.
 In Last Code
 Capture headers with names ‘x-access-token’ or ‘Authorization.’
 If the header is in ‘Authorization: Bearer xxxx…’ format, strip
unwanted prefix before token.
 Using jwt package and secret string, validate the token.
 If anything goes wrong, return an error immediately before passing
control to next handler.
 Export the middleware function for other modules to use.
 At this moment, we haven’t written any code to create a
token. We will do that next.
 App.js
const express = require('express'); // return the JWT token for the future API
const bodyParser = require('body- calls
parser'); res.json({
let jwt = require('jsonwebtoken'); success: true,
let config = require('./config'); message: 'Authentication successful!',
let middleware = require('./middleware'); token: token
class HandlerGenerator { });
login (req, res) { }
let username = req.body.username; else {
let password = req.body.password; res.send(403).json({
let mockedUsername = 'admin'; success: false,
let mockedPassword = 'password'; message: 'Incorrect username or
if (username && password) { password'
if (username === mockedUsername });
&& password === mockedPassword) {
let token = jwt.sign({username: } }
username}, else {
config.secret, res.send(400).json({
{ expiresIn: '24h’ success: false,
// expires in 24 hours message: 'Authentication failed! Please
} ); check the request'
});
} }
 App.js

index (req, res) {

res.json({ success: true, message: 'Index page'
}); }}
// Starting point of the server
function main () {
let app = express(); // Export app for other routes to use
let handlers = new HandlerGenerator();
const port = process.env.PORT || 8000;
app.use(bodyParser.urlencoded({ // Middleware
extended: true
}));
app.use(bodyParser.json());
// Routes & Handlers
app.post('/login', handlers.login);//login request by client
app.get('/', middleware.checkToken, handlers.index);//get info after checking
app.listen(port, () => console.log(`Server is listening on port: ${port}`));
}
main();
Client Side Implementation

IN ANGULAR
34 Signup, Login & Logout
 Adding Signin Component
35

 Login.component.html Creating a login form

<h2 class="page-header">Login </h2>
<form (submit)="onLoginSubmit()">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" [(ngModel)]="username" name="username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" [(ngModel)]="password" name="password">
</div>
<input type="submit" class="btn btn-primary" value="Login">
</form>

Username, password values

2-way databinding
 import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
Login.component.ts
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';
36
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
username: string;
password: string;

constructor(
private authService: AuthService,
private router: Router,
private flashMessage: FlashMessagesService
){}

ngOnInit() {
}

onLoginSubmit(){
const user = {
username: this.username,
password: this.password
}

this.authService.authenticateUser(user).subscribe(data => {
console.log(data);
});
}

}
 Creating Service
37

 auth.service.ts
registerUser(user){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:8000/users/register', user, {headers: headers})
.map(res => res.json());
}

authenticateUser(username,password){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:8000/login', username,password, {headers:
headers})
.map(res => res.json());
}
38
 authenticateUser function
39

 Writing authenticateUser function in Login.component.ts

file
this.authService.authenticateUser(user).subscribe(data => {
if(data.success) {
this.authService.storeUserData(data.token, data.user);
this.flashMessage.show('You are now logged in',
{cssClass: 'alert-success', timeout: 5000});
this.router.navigate(['dashboard']);
} else {
this.flashMessage.show(data.msg, {cssClass: 'alert-danger', timeout: 5000});
this.router.navigate(['login']);
}
});

Upon successful login

- Store tokens and user data in local storage (create storeUserData function in auth.service.ts)
- display login success flashMessage
- Redirect to dashboard page
When login fails
- login failed display flashMessage
- Redirect to login page
 storeUserData function
40

 Auth.service.ts and storeUserData

authenticateUser(user){
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:3000/users/authenticate',
user, {headers: headers})
.map(res => res.json());
}

storeUserData(token, user){
localStorage.setItem('id_token', token); Localstorage saved as string
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
}
 Dashboard
41

 Upon Successful Login Dashboard

Stored token and user information in localStorage

 Logout
42

 Auth.service.ts and logout function

storeUserData(token, user){
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
}

logout(){
this.authToken = null;
this.user = null; Clear the value of the login variable
localStorage.clear(); Empty local storage
}
 Logout HTML
43

 Logout
 Navbar.component.html
<ul class="nav navbar-nav navbar-right">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLinkActive]="['active']" [routerLink]="['/login']">Login</a></li>
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a
[routerLinkActive]="['active']" [routerLink]="['/register']">Register</a></li>
<li><a (click)="onLogoutClick()" href="#">Logout</a></li>
</ul>

Add Logout button to menu

Clicking onLogoutClick () will be executed
onLogoutClick () function in Navbar.component.ts
 Logout Feature
44
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { FlashMessagesService } from 'angular2-flash-messages';

@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

constructor(
private authService: AuthService,
private router: Router,
private flashMessage: FlashMessagesService
){}

ngOnInit() {
}

onLogoutClick(){
this.authService.logout();
this.flashMessage.show('You are logged out', {
cssClass: 'alert-success',
timeout: 3000
});
this.router.navigate(['/login']);
return false;
}

}
45 Protected Requests & Auth Guard
 Protected Request
46

▪ Token authentication for page requests

▪ Set up accessible pages only by presenting tokens while
logged in
▪ The Dashboard page is only accessible when logged in
▪ The Profile page requires a token to be presented (token
validation on the server)
▪ Server-side http: // localhost: 3000 / users / profile page
already has token authentication enabled
▪ How do I set it up?
 Setting up the token authentication service
47

 Add the token authentication service to the getProfile () function

in the Auth.service.ts file.
getProfile(){
let headers = new Headers();
this.loadToken();
headers.append('Authorization', this.authToken);
headers.append('Content-Type', 'application/json');
return this.http.get('http://localhost:3000/users/profile', {headers: headers})
.map(res => res.json());
}

storeUserData(token, user){
localStorage.setItem('id_token', token);
localStorage.setItem('user', JSON.stringify(user));
this.authToken = token;
this.user = user;
}

loadToken(){
const token = localStorage.getItem('id_token');
this.authToken = token;
}
 profile.component.ts
48

import { Component, OnInit } from '@angular/core';

import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
user: Object;

constructor(
private authService: AuthService,
private router: Router
){}

ngOnInit() {
this.authService.getProfile().subscribe(profile => {
this.user = profile.user;
},
err => {
console.log(err);
return false;
});
}
}
 Profile
49

 Profile.component.html

Display user information only when logged in

Create div area only if user information user exists

<div *ngIf="user">
<h2 class="page-header">{{user.name}}</h2>
<ul class="list-group">
<li class="list-group-item">Username: {{user.username}}</li>
<li class="list-group-item">Email: {{user.email}}</li>
</ul>
</div>
Thank you!