I have a sign-in sign-up page. On sign-up part, The user can sign up and should be authenticated and given a token that is stored in a local storage. after that user will be redirected to a profile page with the token, but before redirecting since the profile page is protected. the token should be validated.
If validated, it should render a profile page, but it's not rendering and I don't know why. That even spit out any errors. But here's the weird part: when I create a user account I logged the JWT token and copy that, use it through Postman, attached the token on the header then use the profile route it will render the HTML. But on Chrome, it doesn't.
Here's a video I made: https://www.youtube.com/watch?v=ufkor1eVxx8
Here's the code for on sign up. (I will refactor everything).
'use strict';
(function () {
const signInForm = document.getElementById('signup-form');
const username = document.getElementById('signup-username');
const email = document.getElementById('signup-email');
const password = document.getElementById('signup-password');
const signUpBtn = document.getElementById('signup-btn');
signUpBtn.addEventListener('click', (e) => {
e.preventDefault();
axios({
method: 'post',
url: '/signup',
data: {
username: username.value,
email: email.value,
password: password.value
}
})
.then(response => {
console.log(response.data) //check my response working
const token = response.data;
if(token) {
window.localStorage.setItem('access_token', token);
// window.location.assign('/profile');
axios({
method: 'get',
url: '/profile',
headers: {
'Authorization': `Bearer ${token}`,
}
}).then( res => {
console.log(res, 'afsdfas')
if(res.status === 200) {
console.log(res.data.decoded) // decoded JWT working
}
})
.catch( err => {throw err});
} else {
console.log('NO TOKEN');
}
})
.catch(err => { throw err });
})
}());
Here's the code for the route profile:
const express = require('express');
const router = express.Router();
const verifyToken = require('../helper.fn/verifyToken');
const jawt = require('../helper.fn/jwt.token');
router.get('/profile', verifyToken, (req, res) => {
// console.log(req.token, 'test'); // token verified here. working.
jawt.checkJWT(req.token)
.then( userDecode => {
console.log(userDecode); // user decoded info working
if(userDecode) {
console.log(userDecode, 'decode') // ! this will run working
res.render('userprofile'); // ! THIS IS THE PROBLEM WON'T RENDER
console.log('gasdfas'); // ! this will run
// res.json({userDecode}); this for testing this works
} else {
res.json({ err: 'something is wrong'})
}
})
.catch( err => { throw err})
});
module.exports = router;
Here's the code for validating the token:
/**
* this function checks if we a token attached to a header
* @param {Object} req
* @param {Object} res
* @param {function} next
*/
module.exports = function(req, res, next) {
const userToken = req.headers.authorization;
console.log(userToken) // logs the bearer and token
if (!userToken) {
res.status(403).json({
error: "FORBIDDEN"
});
} else {
const token = userToken.split(' ')
console.log(token[1]) // I have the token here working
req.token = token[1];
next();
}
};
