Node.js won't render on Chrome but renders on Postman with JWT authentication

177 views Asked by At

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();
  }

};
0

There are 0 answers