I need some help.
I want to get the token from localStorage, but some how it doesn’t work.
It happens when the page moves to dynamic route page.

Using Next.js,JavaScript,Supabase,Express,Prisma

api/middlewares/isAuthenticated.js

const jwt = require("jsonwebtoken");

function isAuthenticated(req, res, next) {
  console.log("request header is", req.headers.authorization);  // <-- Somehow this is undefined when go to dynamic route

  const token = req.headers.authorization.split(" ")[1];
  console.log("token is ", token);

  if (!token) {
    return res.status(401).json({ message: "error" });
  }

  jwt.verify(token, process.env.SECRET_KEY, (err, decoded) => {
    if (err) {
      console.log("err");
      return res.status(401).json({ message: "error" });
    }

    req.userId = decoded?.id;
        next();
  });
}

module.exports = isAuthenticated;

/api/routers/users.js

const router = require("express").Router();
const { PrismaClient } = require("@prisma/client");
const isAuthenticated = require("../middlewares/isAuthenticated");

const prisma = new PrismaClient();

router.get("/find", isAuthenticated, async (req, res) => {
  try {
    const user = await prisma.user.findUnique({ where: { id: req.userId } });

    if (!user) {
      res.status(404).json({ message: "not found" });
    }

    res.status(200).json({
      user: { id: user.id, email: user.email, username: user.username },
    });
  } catch (error) {
    res.status(500).json({ message: error.message });
  }
});

router.get("/profile/:userId", isAuthenticated, async (req, res) => {
  const { userId } = req.params;

  try {
    const profile = await prisma.profile.findUnique({
      where: {
        userId: parseInt(userId),
      },
      include: {
        user: {
          include: {
            profile: true,
          },
        },
      },
    });
    if (!profile) {
      return res
        .status(404)
        .json({ message: "cannot find profile" });
    }

    res.status(200).json(profile);
  } catch (error) {
    res.status(500).json(error.message);
  }
});

module.exports = router;

The endpoint “users/find” can get token,but “users/profile/:userId” cannot get token.
The endpoint’s name is correct.

I want to get token from below.

/client/context/auth.js

"use client";
import React, { ReactNode, useContext, useEffect, useState } from "react";
import apiClient from "../lib/apiClient";


type AuthContextTypes = {
  user: null | { id: number; username: string; email: string };
  login: (token: string) => void;
  logout: () => void;
};

type AuthProviderProps = {
  children: ReactNode;
};

const AuthContext = React.createContext<AuthContextTypes>({
  user: null,
  login: () => {},
  logout: () => {},
});

export const useAuth = () => {
  return useContext(AuthContext);
};

export const AuthProvider = ({ children }: AuthProviderProps) => {
  const [user, setUser] = useState<null | {
    id: number;
    email: string;
    username: string;
  }>(null);

 
  useEffect(() => {
    const token = localStorage.getItem("auth_token");

    console.log("Token from localStorage:", token); 
    if (token) {

      apiClient.defaults.headers["Authorization"] = `Bearer ${token}`;
       apiClient
        .get("/users/find")
        .then((res) => {
          setUser(res.data.user);
        })
        .catch((error) => {
          console.error("User authentication failed:", error);
          // Optional: You can handle the error here (e.g., clear the token, show an alert, etc.)
        });
    }
  }, []);

  const login = (token: string) => {
    localStorage.setItem("auth_token", token);
    apiClient.defaults.headers["Authorization"] = `Bearer ${token}`;

    try {
      apiClient.get("/users/find").then((res) => {
        setUser(res.data.user);
      });
    } catch (error) {
      window.alert(error);
    }
  }; // Closing bracket added here

  const logout = () => {
    console.log("I am deleteing the header");
    localStorage.removeItem("auth_token");
    delete apiClient.defaults.headers["Authorization"];
    setUser(null); // Clear the user state on logout
  };

  const value = {
    user,
    login,
    logout,
  };

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};