I implemented verification by using passport-jwt in my back-end and then I made post request from client to server:
export const fetchVerifyUser = async (token) => {
try {
const response = await axios.post(
"http://localhost:5000/verify",
{},
{
headers: { Authorization: `Bearer ${token}` },
}
);
console.log(response.data);
return response.data;
} catch (error) {
throw error;
}
};
When the user login in and the token appears I see all users data in network and in console.log() that I had written inside useEffect()
const Header = () => {
const [anchorEl, setAnchorEl] = useState(null);
const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = useState(null);
const isMenuOpen = Boolean(anchorEl);
const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
const navigate = useNavigate();
const token = localStorage.getItem("token");
const dispatch = useDispatch();
const profile = useSelector((state) => state.auth.user);
useEffect(() => {
if (token) {
fetchVerifyUser(token);
console.log(profile.user);
}
}, [token, profile.user]);
// ...other logic of the component
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar
position="static"
sx={{ backgroundColor: "rgb(31, 37, 61)" }}
color="default"
>
<Toolbar>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="open drawer"
sx={{ mr: 2 }}
>
<MenuIcon sx={{ color: "white" }} />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ display: { xs: "none", sm: "block" }, color: "white" }}
>
Cryptocurrency Dashboard
</Typography>
<Box sx={{ flexGrow: 1 }} />
<Box
sx={{
display: {
xs: "none",
md: "flex",
alignItems: "center",
},
}}
>
<IconButton size="large" sx={{ color: "white" }}>
<Badge color="white">
<DashboardIcon />
</Badge>
</IconButton>
<IconButton size="large" sx={{ color: "white" }}>
<Badge color="white">
<InfoIcon />
</Badge>
</IconButton>
{token && (
<IconButton size="large" sx={{ color: "white" }}>
<Badge color="white">
<Tooltip title={profile.user?.user}>
<PersonIcon />
</Tooltip>
</Badge>
</IconButton>
)}
{!token && <ButtonSignIn />}
{token && <ButtonExit onClick={() => handleClickExit()} />}
</Box>
<Box sx={{ display: { xs: "flex", md: "none" }, color: "white" }}>
<IconButton
size="large"
aria-label="show more"
aria-controls={mobileMenuId}
aria-haspopup="true"
onClick={handleMobileMenuOpen}
color="white"
>
<MoreIcon sx={{ color: "white" }} />
</IconButton>
</Box>
</Toolbar>
</AppBar>
{renderMobileMenu}
{renderMenu}
</Box>
);
Earlier, I had tried to render the user’s name inside a ToolTip, but when I refreshed the page, the user’s name inside the ToolTip disappeared. That’s why I decided to use Passport middleware. How can I connect my verification using passport-jwt and render the user’s name even after refreshing the page? Thanks.