├── .gitignore
├── package.json
├── README.md
├── server.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blog",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "start": "node server.js"
 8 |   },
 9 |   "author": "",
10 |   "license": "ISC",
11 |   "dependencies": {
12 |     "body-parser": "^1.17.2",
13 |     "express": "^4.15.3",
14 |     "jsonwebtoken": "^7.4.1"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # JWT Authentication
 2 | This is an application that is used to explain how jwt works 
 3 | 
 4 | # Instructions to run
 5 | Clone the project
 6 | ```
 7 | git clone https://github.com/sudheeshshetty/JWT_Auth.git
 8 | ```
 9 | Install the dependencies
10 | ```
11 | npm install
12 | ```
13 | Start the server
14 | ```
15 | npm start
16 | ```
17 | Go to browser and open the url `localhost:3000`
18 | The dummy users are 'xxxx' and 'yyyy' with pasword being the same as that of username.
19 | 
20 | Try logging in using different names and also with valid name and password.
21 | You will get a token displayed if you login using valid username and password.
22 | 
23 | Try clicking `getlist` button  wihtout entering anything in the token text box.
24 | You will see that you will get error message.
25 | 
26 | Try sending wrong token in that text box. You will still see the error.
27 | 
28 | Now try passing the valid token that was displayed in screen. You will see the list of users.
29 | For this example we are passing the token through text box. You may edit the code so that the token will be stored somewhere and then when a user who has logged in clicks, you send that token so that it won't be a head ache for the user to copy the token everytime.
30 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | var express = require('express');
 2 | var app=express();
 3 | var bodyParser= require('body-parser');
 4 | var jwt=require('jsonwebtoken');
 5 | 
 6 | var users=[
 7 | {
 8 |   name:"xxxx",
 9 |   password:"xxxx"
10 | },
11 | {
12 |   name:"yyyy",
13 |   password:"yyyy"
14 | }
15 | ]
16 | app.use( bodyParser.json() );
17 | app.use(bodyParser.urlencoded({
18 |     extended: true
19 | }));
20 | 
21 | app.use(express.static('./'));
22 | 
23 | app.get('/', (req,res)=>{
24 |     res.sendFile('index.html');
25 | });
26 | 
27 | app.post('/login',(req,res)=>{
28 |     var message;
29 |     for(var user of users){
30 |       if(user.name!=req.body.name){
31 |           message="Wrong Name";
32 |       }else{
33 |           if(user.password!=req.body.password){
34 |               message="Wrong Password";
35 |               break;
36 |           }
37 |           else{
38 |               var token=jwt.sign(user,"samplesecret");
39 |               console.log(token);
40 |               message="Login Successful";
41 |               break;
42 |           }
43 |       }
44 |     }
45 |     if(token){
46 |         res.status(200).json({
47 |             message,
48 |             token
49 |         });
50 |     }
51 |     else{
52 |         res.status(403).json({
53 |             message
54 |         });
55 |     }
56 | });
57 | 
58 | app.use((req, res, next)=>{
59 |         // check header or url parameters or post parameters for token
60 |         console.log(req.body);
61 |         var token = req.body.token || req.query.token || req.headers['x-access-token'];
62 |         if(token){
63 |           console.log("token");
64 |           jwt.verify(token,"samplesecret",(err,decod)=>{
65 |             if(err){
66 |               res.status(403).json({
67 |                 message:"Wrong Token"
68 |               });
69 |             }
70 |             else{
71 |               console.log("success");
72 |               req.decoded=decod;
73 |               next();
74 |             }
75 |           });
76 |         }
77 |         else{
78 |           res.status(403).json({
79 |             message:"No Token"
80 |           });
81 |         }
82 | });
83 | 
84 | app.post('/getusers',(req,res)=>{
85 |     var user_list=[];
86 |     console.log("here");
87 |     users.forEach((user)=>{
88 |         user_list.push({"name":user.name});
89 |     })
90 |     res.send(JSON.stringify({users:user_list}));
91 | });
92 | 
93 | app.listen(3000, function(){
94 |   console.log('listening on port 3000');
95 | });
96 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <title>
 5 |             Authentication
 6 |         </title>
 7 |         <!-- Latest compiled and minified CSS -->
 8 |         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 9 | 
10 |         <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous"></script>
11 | 
12 |         <!-- Latest compiled and minified JavaScript -->
13 |         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
14 |     </head>
15 |     <body>
16 |         <h3 class="text-center">Authentication</h3>
17 |         <div class="container">
18 |             <form>
19 |                 <div class="form-group">
20 |                 <label for="username">Username</label>
21 |                 <input type="text" class="form-control" id="username" placeholder="Username">
22 |                 </div>
23 |                 <div class="form-group">
24 |                     <label for="password">Password</label>
25 |                     <input type="password" class="form-control" id="password" placeholder="Password">
26 |                 </div>
27 |                 <button type="button" class="btn btn-primary center-block" onclick="auth()">Submit</button>
28 |             </form>
29 |             <div id="token-display">
30 |             </div>
31 |         </div>
32 |         </br>
33 |         </br>
34 |         <div class="container">
35 |             <form>
36 |                 <div class="form-group">
37 |                     <label for="token">Token</label>
38 |                     <input  type="text" class="form-control" id="token" placeholder="token" ></input>
39 |                 </div>
40 |                 <button type="button" class="btn btn-primary center-block" onclick="getlist()">Get List</button>
41 |             </form>
42 |             <div id="list">
43 |             </div>
44 |         </div>
45 |         <script type="text/javascript">
46 |             auth= function(){
47 |                 var xhttp = new XMLHttpRequest();
48 | 
49 |                 data={name:document.getElementById("username").value,password:document.getElementById("password").value}
50 |                 xhttp.onreadystatechange = function() {
51 |                     if (xhttp.readyState==4 && xhttp.status==200) {
52 |                         var response = JSON.parse(xhttp.responseText);
53 |                         document.getElementById("token-display").innerHTML = response.token;
54 |                     }
55 |                     if(xhttp.readyState==4 && xhttp.status==403){
56 |                       document.getElementById("token-display").innerHTML=JSON.parse(xhttp.responseText).message;
57 |                     }
58 |                 };
59 |                 xhttp.open("POST", "http://localhost:3000/login", true);
60 |                 xhttp.setRequestHeader("Content-type", 'application/json; charset=UTF-8');
61 |                 xhttp.send(JSON.stringify(data));
62 | 
63 | 
64 |             }
65 |             getlist= function(){
66 |                 console.log("here");
67 |                 var xhttp = new XMLHttpRequest();
68 | 
69 |                data={token:document.getElementById("token").value}
70 |                console.log(data);
71 |                 xhttp.onreadystatechange = function() {
72 |                     if (xhttp.readyState==4 && xhttp.status==200) {
73 |                         var response = JSON.parse(xhttp.responseText);
74 |                         var ul=document.createElement("ul");
75 |                         document.getElementById("list").innerHTML="";
76 |                         for(var i=0;i<response.users.length;i++){
77 |                             var li=document.createElement("li");
78 |                             li.appendChild(document.createTextNode(response.users[i].name));
79 |                             ul.appendChild(li);
80 |                         }
81 |                         document.getElementById("list").appendChild(ul);
82 |                     }
83 |                     if(xhttp.readyState==4 && xhttp.status==403){
84 |                       document.getElementById("list").innerHTML=JSON.parse(xhttp.responseText).message;
85 |                     }
86 |                 };
87 |                 xhttp.open("POST", "http://localhost:3000/getusers", true);
88 |                 xhttp.setRequestHeader("Content-type", 'application/json; charset=UTF-8');
89 |                 xhttp.send(JSON.stringify(data));
90 | 
91 | 
92 |             }
93 |         </script>
94 |     </body>
95 | </html>
96 | 


--------------------------------------------------------------------------------