Why am I receiving jwt malformed? - node.js

Question

I am trying to retrieve my jwt token after login within my Profile component and store the token as within localstorage. I know that localstorage isnt the best option but this will be a native mobile app so localstorage from what I know is my best option. However when I sign in , I receive a token , here is an token that Ive received recently
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJjaGVjayI6dHJ1ZSwiaWF0IjoxNTYzMDUzMzk4LCJleHAiOjE1NjMwNTQ4Mzh9.tw8ks-jFZID5rmwhoNTkWV8598niE3zMFIDk4Gz-sVg
when my Profile component trys to retrieve /current it use jwt malformed
Server.js
var express = require('express');
var cors = require('cors');
var bodyParser = require('body-parser');
var app = express();
var port = process.env.PORT || 5000;
var morgan = require('morgan');
const auth = require('./middleware/auth');
const User = require('./models/User');
app.use(cors());
app.use(
bodyParser.urlencoded({
extended: false
})
);
app.use(bodyParser.json());
/*========= Here we want to let the server know that we should expect and allow a header with the content-type of 'Authorization' ============*/
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Headers', 'Content-type,Authorization');
next();
});
// use morgan to log requests to the console
app.use(morgan('dev'));
var Users = require('./routes/Users');
app.use('/users', Users);
// Create a Server
const PORT = process.env.PORT || 5000; // Environment variable or port 5000
app.listen(PORT, () => console.log(`Server started on port ${PORT}`));
module.exports = app;
User.js
const express = require('express');
const users = express.Router();
const cors = require('cors');
const jwt = require('jsonwebtoken');
var exjwt = require('express-jwt');
var jwtauth = require('../middleware/authjwt.js');
const bcrypt = require('bcrypt');
const bodyParser = require('body-parser');
const User = require('../models/User');
const config = require('config');
const auth = require('../middleware/auth');
const secret = 'dasdsad';
users.use(
bodyParser.urlencoded({
extended: true
})
);
users.use(bodyParser.json());
users.use(cors());
users.post('/register', (req, res) => {
const today = new Date();
const userData = {
first_name: req.body.first_name,
last_name: req.body.last_name,
email: req.body.email,
password: req.body.password,
created: today
};
User.findOne({
where: {
email: req.body.email
}
})
//TODO bcrypt
//Need validation to appear on console and in view
.then(user => {
if (!user) {
bcrypt.hash(req.body.password, 10, (err, hash) => {
userData.password = hash;
User.create(userData)
.then(user => {
res.json({ status: user.email + 'Registered!' });
})
.catch(err => {
res.send('error: ' + err);
});
});
} else {
res.json({ error: 'User already exists' });
}
})
.catch(err => {
res.send('error: ' + err);
});
});
users.post('/authenticate', (req, res) => {
User.findOne({
where: {
email: req.body.email
}
}).then(user => {
if (user) {
if (bcrypt.compareSync(req.body.password, user.password)) {
const payload = {
check: true
};
const token = jwt.sign(payload, config.get('myprivatekey'), {
expiresIn: 1440 // expires in 24 hours
});
res.json({
message: 'authentication done ',
token: token
});
console.log('Successful Login');
console.log(user.first_name);
} else {
res.json({ message: 'please check your password !' });
console.log('incorrect password');
}
} else {
res.json({ message: 'user not found !' });
console.log('user cannot be found');
}
});
});
//users.get('/something', [express.bodyParser(), jwtauth], function(req, res) {
// do something
//});
// app.all('/api/*', [express.bodyParser(), jwtauth]);
users.get(
'/current',
exjwt({ secret: config.get('myprivatekey') }),
async (req, res) => {
const user = await User.findById(req.user._id).select('-password');
console.log(user);
res.send(user);
}
);
Login
import React, { Component } from 'react';
class Login extends Component {
constructor() {
super();
this.state = {
email: '',
password: '',
errors: {}
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
onSubmit(e) {
e.preventDefault();
const user = {
email: this.state.email,
password: this.state.password
};
var token = window.localStorage.getItem('token');
fetch('http://localhost:5000/users/authenticate', {
method: 'POST', // or 'PUT'
body: JSON.stringify(user), // data can be `string` or {object}!
headers: {
'Content-Type': 'application/json'
}
});
}
render() {
return (
<div className='container'>
<div className='row'>
<div className='col-md-6 mt-5 mx-auto'>
<form noValidate onSubmit={this.onSubmit}>
<h1 className='h3 mb-3 font-weight-normal'>Please sign in</h1>
<div className='form-group'>
<label htmlFor='email'>Email address</label>
<input
type='email'
className='form-control'
name='email'
placeholder='Enter email'
value={this.state.email}
onChange={this.onChange}
/>
</div>
<div className='form-group'>
<label htmlFor='password'>Password</label>
<input
type='password'
className='form-control'
name='password'
placeholder='Password'
value={this.state.password}
onChange={this.onChange}
/>
</div>
<button
type='submit'
className='btn btn-lg btn-primary btn-block'
>
Sign in
</button>
</form>
</div>
</div>
</div>
);
}
}
export default Login;
This is how I am currently fetching the token within My Profile component
componentDidMount() {
var token = localStorage.getItem('token');
fetch('http://localhost:5000/users/current', {
//cahng taht
method: 'GET',
mode: 'cors',
headers: { Authorization: 'Bearer ' + token }
});
}

Answer 1

I guess the problem is on the expiresIn. 'expiresIn' expressed in seconds or a string describing a time span. You set 1440, which means 1440/60 = 24minutes => expires after 24 minutes not after 24 hours... Could you please try to set as below:
const token = jwt.sign(payload, config.get('myprivatekey'), {
expiresIn: '24h' // expires in 24 hours
});