i dont know why my token keep returning undefined, please help.

[oluwakayodedev]

So im trying to secure an endpoint that allows user create blog, so anyone wont just go over to the '/blogPublish' and have access to it but i keep getting faced with an error when i try to access it... ILL BE GLAD IF ANYONE CAN HELP

server.js

require("dotenv").config();
const express = require("express");
const mongoose = require("mongoose");
const path = require('path');
const bodyParser = require('body-parser');
const protectedRoute = require("./routes/protect.route.js");
const app = express();

// middleware
app.use(express.json());
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, 'public')));
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});


// routes
app.use("/blog", protectedRoute);


app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
app.get('/signin', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'login.html'));
});

// connect to DB and run server
mongoose
  .connect(process.env.MONGODB_KEY)
  .then(() => {
    console.log("Connected!");
    const port = process.env.PORT;
    app.listen(port, () => {
      console.log("Server is running on port :", port);
    });
  })
  .catch(() => {
    console.log("Connection Failed.");
  });

./routes/protect.route.js

const express = require("express");
const path = require("path");
const authMiddleware = require("../middlewares/auth.middleware");
const router = express.Router();

// Protected Route
router.get('/publishBlog', authMiddleware, (req, res) => {
  res.sendFile(path.join(__dirname, '..', 'public', 'publishBlog.html'));
});

module.exports = router;

authMiddleware

const jwt = require('jsonwebtoken');
const Admin = require('../models/admin.model');

const authMiddleware = (req, res, next) => {
  console.log('Request Headers:', req.headers);

  // Retrieve token from header
  const token = req.header('x-auth-token');
  console.log('Token:', token);

  if (!token) {
    return res.status(401).json({ message: 'No token provided, access denied.' });
  }

  try {
    // Verify the token
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    console.log('Decoded Token:', decoded);

    req.user = decoded.admin;
    next();
  } catch (err) {
    console.error('Token verification failed:', err.message);
    res.status(401).json({ message: 'Invalid token, access denied.' });
  }
};

module.exports = authMiddleware;

and in my publishBlog.html script:

document.addEventListener("DOMContentLoaded", async function () {
  const token = localStorage.getItem('authToken');
  console.log(token);
  if (token) {
    try {
      const response = await fetch('http://localhost:3000/blog/publishBlog', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json',
          'x-auth-token': token // Include token in headers
        }
      });

      if (response.ok) {
        // Success - Continue to the protected area
        console.log('Access to protected area granted');
        // You can process the response here if needed
      } else {
        // Token is invalid or expired
        console.error('Failed to access protected area');
        window.location.href = '/signin'; // Redirect to login
      }
    } catch (error) {
      console.error('Error:', error);
      window.location.href = '/signin'; // Redirect to login
    }
  } else {
    // No token - Redirect to login
    window.location.href = '/signin';
  }

BUT I JUST KEEP GETTING THIS ERROR ON MY TERMINAL, EVEN THO I HAVE AN AUTH Token saved on my local storage authToken | eyJhbGciOiJIUzI1NiIsInR5c:

Request Headers: {
  host: 'localhost:3000',
  connection: 'keep-alive',
  'cache-control': 'max-age=0',
  'sec-ch-ua': '"Chromium";v="128", "Not;A=Brand";v="24", "Google Chrome";v="128"',
  'sec-ch-ua-mobile': '?0',
  'sec-ch-ua-platform': '"Windows"',
  'upgrade-insecure-requests': '1',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36',
  accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7',
  'sec-fetch-site': 'same-origin',
  'sec-fetch-mode': 'navigate',
  'sec-fetch-user': '?1',
  'sec-fetch-dest': 'document',
  referer: 'http://localhost:3000/signin',
  'accept-encoding': 'gzip, deflate, br, zstd',
  'accept-language': 'en-US,en;q=0.9',
  'if-none-match': 'W/"af3-191f78b1f89"',
  'if-modified-since': 'Sun, 15 Sep 2024 21:16:15 GMT'
}
Token: undefined

[NewEraCracker]

One thing.

Double check your cross origin configuration: Add x-auth-token to Access-Control-Allow-Headers.

Or use the cors middleware.

[shib-weber]

Install package cors import it in your main file
Use cors Middleware
Add an addition Middleware for body-parser as well that is : app.use(body Parser.urlencoded({extended : false}))

While generating token during login and sign-up send the token in header response because in your JWT Auth you are trying to receive from header .

Other means : You may try sending token via cookies in that case install cookie-parser and add it's Middleware. Then it has functions like res.cookie and in your JWT Auth you can simple receive it by req.cookie.token .