Upon logging in I send a JSON web token to the client-side. I have a custom authInterceptor which sends the JSON web token back to the server side.
When I log in, everything works. Go to different sub-pages, works great. This is because I have a function which either checks for Passport authentication or token authentication, and upon logging in the Passport authentication works.
When I close the browser and return to the site, the JWT cannot decode. The JWT can decode when it is placed just under the encoding function. I have tried both the jwt-simple node module and the jsonwebtoken node modules, and I come back with the same error.
This is my custom function which checks for a valid token:
function checkAuthentication(req, res, next){
if (!req.headers.authorization) {
return res.status(401).send({ message: 'Please make sure your request has an Authorization header' });
}
console.log("Here");
var token = req.headers.authorization.split('.')[1];
console.log(token);
console.log(config.secret);
var payload = null;
try {
console.log("And here....");
payload = jwt.decode(token, config.secret);
console.log(payload);
}
catch (err) {
console.log(err);
return false;
}
if (payload.exp <= moment().unix()) {
return false;
}
req.user = payload.sub;
return true;
}
jwt-simple uses jwt.encode() and jwt.decode, and jsonwebtoken uses jwt.sign() and jwt.verify(). This is what I get in my console:
Here
eyJzdWIiOiI1NmEyZDk3MWQwZDg2OThhMTYwYTBkM2QiLCJleHAiOjE0NTYxOTEyNzQsImlhdCI6MTQ1NTMyNzI3NH0
VerySecretPhrase
And here....
{ [JsonWebTokenError: jwt malformed] name: 'JsonWebTokenError', message: 'jwt malformed' }
This is the authInterceptor on the client-side. I collect the token and set it in the request header:
app.factory('httpInterceptor', function($q, $store, $window) {
return {
request: function (config){
config.headers = config.headers || {};
if($store.get('token')){
var token = config.headers.Authorization = 'Bearer ' + $store.get('token');
}
return config;
},
responseError: function(response){
if(response.status === 401 || response.status === 403) {
$window.location.href = "http://localhost:3000/login";
}
return $q.reject(response);
}
};
});
Glad you got it figured out! The problem, for posterity, was the following: A JWT consists of three components, a header, the payload, and the signature (a good, thorough explanation can be found in this toptal post), so when you were splitting the JWT into components with var token = req.headers.authorization.split('.'), the value you were assigning to token referred to the payload only, rather than the full JWT.
Because the jwt-simple decode method expects the full token and you were only giving it the payload to assess, your code was triggering the 'jwt malformed' error. In your case, since you preceded the token with Bearer in your Authorization header, you could grab the full token with var token = req.headers.authorization.split(' ') instead.
Related
I am currently designing a simple website, where users can log in as a normal user or as an admin. Right now I am coding out the portion for when the user wants to go to an admin only web page, and the server will retrieve the jwt token stored in the local storage on the web browser to validate it.
This is what the local storage looks like
Here is the code for retrieving the jwt token
var verifyFn = {
verifyToken: function (req, res, next) {
const authHeader = localStorage.getItem("jwt_token");
console.log("THIS IS THE HEADER")
console.log(authHeader)
if (authHeader === null || authHeader === undefined ){
return res.status(401).send({ message: 'not authenticated BEARER TOKEN ISSUE' });
}
const token = authHeader
console.log("NEW TOKEN")
console.log(token)
jwt.verify(token, config.jwt.secret, { algorithms: ['HS256'] }, (err, decoded) => {
if (err) return res.status(401).send({ message: 'not authenticated' });
req.decodedToken = decoded;
console.log("DECODED TOKEN: " + req.decodedToken)
next();
});
}
However, whenever I try to run the server and browse to the admin page, there will be an error saying 'localstorage is not defined'. As such, I am not sure about how I can retrieve the jwt_token from the web browser to the server back end.
A server has no access to the browser's localStorage object, as it is accessible from the client only, and does not exist in the server context.
What is usually done is sending the token in an Authorization header. It looks like you are using Node, so consider the following example request using the fetch API on the client:
const jwtToken = localStorage.getItem('jwt_token')
fetch('your-api-url', {
method: 'request method here',
headers: {
Authorization: `Bearer ${jwtToken}`
},
body: JSON.stringify(your request body here)
}).then(response => ...)
In the server, you can then get the JWT token by looking at the request headers, something like this:
var verifyFn = {
verifyToken: function (req, res, next) {
let authHeader = req.headers['Authorization']
// the auth header will have Bearer prepended, so remove it
authHeader = authHeader.replace('Bearer ', '')
console.log("THIS IS THE HEADER")
console.log(authHeader)
if (authHeader === null || authHeader === undefined ){
return res.status(401).send({ message: 'not authenticated BEARER TOKEN ISSUE' });
}
const token = authHeader
console.log("NEW TOKEN")
console.log(token)
jwt.verify(token, config.jwt.secret, { algorithms: ['HS256'] }, (err, decoded) => {
if (err) return res.status(401).send({ message: 'not authenticated' });
req.decodedToken = decoded;
console.log("DECODED TOKEN: " + req.decodedToken)
next();
});
}
So I am writing tests using Mocha, Supertest and Chai. All my API's require an Authorization header which can be gotten from req.headers["authorization"]. This is the current setup of what my test looks like.
...
describe("Upload media files", () => {
it("uploads a file successfully", async () => {
const imagePath = path.join(__dirname, "../../fixtures/profile.jpeg");
const res = await app.post("/api/v1/account/upload") //app is global
.set("Authorization", "ey83hfjksksls...") //right here
.set("content-type", "multipart/form-data")
.attach("media", imagePath);
expect(res.status).to.eql(200);
expect(res.body.data).not.to.be.null;
expect(res.body.data).to.match(/https:/);
});
});
My tests always fail because a 401 is always returned for some reason that I do not know. Here's the function that handle's the decoding of the JWT
async function decodeToken() {
const sessionUser = req.session.userId;
const token = req.headers["authorization"] // token value is present here.
if (!token && !sessionUser) {
return res.status(401).json({
error: "Access denied, no valid credentials.",
});
}
if (token) {
const secret = sails.config.custom.jwtSecret || process.env.JWT_SECRET;
const decoded = jwt.verify(token, secret);
req.me = decoded;
return proceed();
}
const user = await User.findOne({
id: sessionUser,
});
req.me = user;
return proceed();
}
From the function above, when I do a console.log of the token variable, I do get a long string returned which shows that the token is being generated and passed into the .set('Authorization', 'eyeur9339..') header, but the test still fails. I don't know what to do anymore. Any help is appreciated, thank you.
if you use jwt for authorization, use Bearer before token so you should write Bearer, like this :
Bearer 5d5bd7f7e35a86541686f96c9cdd72ed67f5ba223811634e0319af224164823edc2d0090d1f6c2c3b1dec842ea783c71feb443ac2d26e
and for get token from header do like this :
const token = req.headers.authorization.split(' ')[1]
const decodedToken = jwt.verify(token, secret)
I am trying to work with JWT in a node.js application.
I followed this tutorial.
But I am facing problems at the level of the middleware:
function authenticateToken(req, res, next)
which is at the timing 10:30 in the video.
When I run the code I always have:
authHeader == null
I have tried various things to find other possible forms for req.headers['authorization'] like req.headers.authorization but to no avail.
I need to say that I have a route in my app that allows me to login and that I use right before using the route hitting the middleware. But in any case the authHeader keeps being null.
What should I do to make sure I get a valid authHeader as expected for the app to work as in the tutorial and move forward?
In case this may be useful, here is the complete code for the middleware function:
function authenticateToken(req, res, next) {
// Get the jwt access token from the request header.
const authHeader = req.headers['authorization']
const token = authHeader && authHeader.split(' ')[1]
if (token == null) {
console.log('authenticateToken-401')
return res.sendStatus(401)
}
jwt.verify(token, 'myBigSecret', (err, user) => {
console.log(err)
if (err) {
console.log('authenticateToken-403')
return res.sendStatus(403)
}
req.user = user
next()
})
}
And also the code that is run when a user logs in:
app.post('/login', async function(req, res) {
Parse.initialize(process.env.APP_ID);
Parse.serverURL = process.env.SERVER_URL;
Parse.User.logIn(req.body.usrname, req.body.password, {
success: user => {
// Let us handle this using JWT.
const jwtUser = {name: req.body.usrname}
const accessToken = jwt.sign(jwtUser, 'myBigSecret')
res.setHeader("Authorization", 'Bearer '+accessToken);
res.json({accessToken: accessToken})
},
error: (user, error) => {
console.log('Error: '+error);
res.render('pages/login.ejs', {});
},
});
});
You need to set headers in your request, looks like you didn't set headers in your request
On the login code above you have Signed using jwt so that it can be used when client app want to access some restrictable routes on your backend
Now whenever clients want to access route from frontend you need to set authorization token in ajax as header Something like this
$.ajax({
url: "/apiyouwanttoaccess",
method: "GET",
headers: { Authorization: "Bearer " + Cookies.get("token") }
})
The above ajax code should be somewhere around js code where you want to access secure routes.
You have already signed token on your login(2nd code snippet) so it can be used within specific user by setting the cookies
I am trying to build an authentication system so, i used node , mysql,express for that so now i am simply saving and checking user exist in database can access but now i added JWT to it, so now i want this JWT token to store in localstorage or in cookies so, can someone guide me how can i do so
this is my authentication controller.js
var Cryptr = require('cryptr');
cryptr = new Cryptr('myTotalySecretKey');
var express = require('express');
const ap = express();
var jwt = require('jsonwebtoken');
var connection = require('./../config');
module.exports.authenticate = function (req, res) {
var email = req.body.email;
var password = req.body.password;
connection.query('SELECT * FROM users WHERE email = ?', [email], function (error, results, fields) {
if (error) {
res.json({
status: false,
message: 'there are some error with query'
});
} else {
if (results.length > 0) {
decryptedString = cryptr.decrypt(results[0].password);
if (password == decryptedString) {
jwt.sign({ email, password },
'secretkey',
{ expiresIn: '10days' },
(err, token) => {
console.log('token:' + token);
module.exports = token;
console.log(token);
res.redirect('/home.html');
}
);
} else {
res.redirect('/login.html');
console.log("Wrong Input");
}
}
else {
res.redirect('/login.html');
}
}
});
};
now i want to pass the token value to the local-storage or cookies so that i can restrict someone from acessing a page, i am reallly new to node js so any help would be appriciated
First I should notify you that do not put any secret things like password in jwt payload because the values of the payload could be accessed easily, you can try to copy paste a jwt in jwt.io site and see the payload.
set jwt in cookie like below, this will use express cookie method that does set Http Set-Cookie header:
res.cookie('jwt', generated_cookie)
.redirect('/home.html');
Also if you want to use localStorage you can set jwt in header and then in your code get the jwt from the header of login request and save it in localStorage and after that you should pass it as header in all other request, but this approach is a better solution for api calls like when you use react or vue ...
res.set({x-token: generated_token});
// In your code get
// get token from response
localStorage.setItem('token', token);
// now whenever calling api pass token as header
I show you one solution using jwt token, you choose another way:
Back-end file e.g. api.js
let jwt = require('jsonwebtoken')
let secret = 'yourSecret'; //secret key necessary to encode token
let Cryptr = require('cryptr');
let cryptr = new Cryptr('myTotalySecretKey');
module.exports = function(router,upload) {
function tokenAuth(req, res, next){
let token = req.body.token || req.body.query || req.headers['x-access-token']
if(token){
jwt.verify(token, secret, function(err,decoded){
if(err){
res.json({ authenticated: false, message:'Invalid token'})
} else {
req.decoded = decoded;
next()
}
})
} else {
res.json({success:false, message:'No token provided'});
}
}
router.post('/authenticate', function(req, res){
connection.query('SELECT * FROM users WHERE email = ?', [email], function (error, results, fields){
if(error) {
res.json({ success:false, message: err })
}
if(!results.length){
res.json({success:false, message:'User no found'})
} else if (results.length>0){
if(!req.body.password){
res.json({success:false, message:'Password was not provided'});
} else {
var validPassword = cryptr.decrypt(results[0].password);
if(validPassword === req.body.password){
res.json({success:false, message:'Incorrect password'})
} else {
var token = jwt.sign({username: results[0].username, email: results[0].email}, secret, {expiresIn: '24h'})
res.json({success:true, message:'You have logged in correctly!', token: token })
}
}
}
})
})
//If you want create a route for authenticated users for example comment posts, you can use our `tokenAuth function`
router.post('/post/comment',tokenAuth,function(req,res){
//access only for authenticated users
}
return router
}
This tokenAuth function we'll be use in paths restricted to authenticated users
server file e.g. server.js
const express = require('express');
const app = express();
const port = process.env.PORT || 80;
const http = require('http').Server(app);
const routes = require(path_to_api.js)(router);
app.use('/myApi', routes)
//***Here you should implement more details about your project such as routes, body parsers and other middlewares*****//
//Connect to your database
http.listen(port, ()=> console.log(`Server running on ${port}`))
Front-end file e.g. controller.js
function(login){
return fetch('/myApi/authenticate',{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(login)
}).then(result=>result.json()).then(data=> window.localStorage.setItem('token', data.token))
}
//`login` argument should be an object and should be like {username: 'user username', password: 'user password'}
In order to make a user store cookies, you can use the Set-Cookie header. From MDN:
Set-Cookie: <cookie-name>=<cookie-value>
In order to pass a header using Express, you can use res.set(), e.g. res.set("Set-Cookie", "Token=" + token). I also suggest you use the HttpOnly cookie directive, since it seems from your post that you don't access this token directly via Javascript and you simply want to check it when the client requests a webpage: res.set("Set-Cookie", "Token=" + token + "; HttpOnly").
The client will send the Cookie header to you when it requests a resource. You can check this header using req.header('Cookie'), and the output will be "Token=<token>" if the user is authenticated. You can then check this token for authenticity.
I have an authentication service built on IdentityServer3 and a WebAPI Shopper service that is secured with IdentityServer Bearer Token Authentication. I've built a simple MVC client app that can access the Shopper service either as a client app with an access token or on behalf of an authenticated user with an identity token. The Shopper service will return more data to the authenticated user.
Now I'm trying to build a JavaScript client that does the same two-tier level of access to the Shopper service. So far, following some IdentityServer3 JavaScript client examples, I've got the JS client successfully calling the Shopper service on behalf of an authenticated user. (I will probably need to reorganize the code a bit to accommodate the non-authenticated scenario, but that shouldn't be too difficult.) What I don't know how to do from the JavaScript code is request the client access token from the Authentication service, i.e. the JavaScript equivalent of the server-side TokenClient.RequestClientCredentialsAsync("shopper-service") in the MVC client. Does anyone know how to request that token from JavaScript or know of a sample that shows how to do it? Here's the JavaScript code that I have so far for the authenticated case and below that is the working MVC client code:
function display(selector, data) {
if (data && typeof data === 'string') {
data = JSON.parse(data);
}
if (data) {
data = JSON.stringify(data, null, 2);
}
$(selector).text(data);
}
var settings = {
authority: 'https://localhost:44332',
client_id: 'js-sample',
popup_redirect_uri: 'http://localhost:15264/popup.html',
response_type: 'id_token token',
scope: 'openid orvis-shopper-service',
filterProtocolClaims: false
};
var manager = new Oidc.UserManager(settings);
var user;
manager.events.addUserLoaded(function (loadedUser) {
user = loadedUser;
display('.js-user', user);
});
$('.js-login').on('click', function () {
manager
.signinPopup()
.catch(function (error) {
console.error('error while logging in through the popup', error);
});
});
$('.js-call-api').on('click', function () {
var headers = {};
if (user && user.access_token) {
headers['Authorization'] = 'Bearer ' + user.access_token;
}
$.ajax({
url: 'https://localhost:44368/api/Shopper/{5FA13934-AD20-4AB2-A386-11653D71AE55}',
method: 'GET',
dataType: 'json',
headers: headers
}).then(function (data) {
display('.js-api-result', data);
}).catch(function (error) {
display('.js-api-result', {
status: error.status,
statusText: error.statusText,
response: error.responseJSON
});
});
});
The client app code works as I intend and looks like this:
public async Task<ActionResult> Index()
{
string tokenValue;
var user = User as ClaimsPrincipal;
if (user.Identity.IsAuthenticated)
{
tokenValue = user.FindFirst("access_token").Value;
}
else
{
var tokenResponse = await GetTokenAsync();
tokenValue = tokenResponse.AccessToken;
}
var result = await CallShopperService(tokenValue);
ViewBag.Json = result;
return View();
}
private async Task<TokenResponse> GetTokenAsync()
{
var client = new TokenClient(
"https://localhost:44332/connect/token",
"mvc-sample-svc",
"mvcsamplesecret");
return await client.RequestClientCredentialsAsync("shopper-service");
}
private async Task<string> CallShopperService(string token)
{
var client = new HttpClient();
client.SetBearerToken(token);
var json = await client.GetStringAsync("https://localhost:44368/api/Shopper/{5FA13934-AD20-4AB2-A386-11653D71AE55}");
return json;
}
JS implicit client is also able to get back you access token, as long as you set token in response_type which you did according to your pasted script.
The Oidc-client.js builds up an authorize challenge URL and redirect browser to it, which is where login flow begins. After user signs in, then they get bounced back to your client page following same redirect path. When your client page loaded (depends on which flow your client is configured, it should be hash fragment by default), oidc-client grabs token from URL (everything after #) and transforms it into JSON object then save in local storage (which means you can check it there too).
I would suggest following method to help you debug:
Turn on traffic monitoring tool (e.g. fiddler) to ensure response that returned back from your identity server after login does contains access token (you can decode token string using https://jwt.io/), if not, check if authorize request url formed correctly
If response returned from identity server does contains access token , then you can debug oidc-client.js javascript by setting a breakpoint at _signinEnd method
Hope it helps
Updated, from comment section
For "anonymous token" senario? See this example if that is what you are looking for github.com/IdentityServer/IdentityServer3/issues/1953