Cannot get jwt token after setting it to localStorage (without refreshing page)

Question

I am saving jwt token returned from my backend app, after Login as shown below:

const login = (event) => {
  event.preventDefault();
  postWithoutAuth("/auth/login", formValues, enqueueSnackbar)
    .then((response) => {
      localStorage.setItem("currentUser", response.data.id);
      localStorage.setItem("username", response.data.username);
      localStorage.setItem("tokenKey", response.data.token);
      localStorage.setItem("roles", JSON.stringify(response.data.roles));
      navigate("/");
      // window.location.reload(true);
    })
};

And then navigate to home page. At this step, all the set values are present in the localStorage.

But, when I click any list menu and retrieve data, the request hit to backend app does not have jwt value. On the other hand, if I refresh the page after login (as you see in the login methoıd (// window.location.reload(true);), there is no problem.

Now, the only thing I need, to make the frontend app avare of the localStorage values when I navigate to Home page after login. So, how can I do that?

Here is my list method:

useEffect(() => {
    fetchData();
  }, []);

const fetchData = () => {
  const userId = localStorage.getItem("currentUser");
  getWithAuth("/users/")
    .then((response) => {
      setData(response.data);
    })
};

Update-II: Here is the problematic part where jwt is retrieved and pass to the request as axios config:

const AUTH_TOKEN = localStorage.getItem("tokenKey");

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Credentials": true,
    "Content-Type": "application/json",
    Accept: "application/json",
    Authorization: `Bearer ${AUTH_TOKEN}`
  },
};

export const getWithAuth = (url) => {
  const request = axios.get(url, config);
  return request.then((response) => response.data);
};

make sure that the response data doesn't read any undefined data from `response.data...` — Zemichael Tesfaye, Mar 16 '23 at 14:09
Can you show us the code of when you're trying to get the values from localstorage? — RubenSmn, Mar 16 '23 at 14:11
@ZemichaelTesfaye There is no problem regarding to that part and all the data is read ans set to localStorage. I added the list method, the problem is probably related to reading from localStorage — Jack, Mar 16 '23 at 14:21
@Carol does component where you read the localStorage get re-rendered when you navigate from `/auth/login` to `/` routes. I'm thinking the cause is that it's not re-rendered when you navigate. — Zemichael Tesfaye, Mar 16 '23 at 14:27
No, it is not re-rendered. AFter I login, I set localStorage items and navigate to other component. Unless I refresh any page, the localStorage item values are not read. One thing I think, maybe I should set localStorage in my service where all the request passes. I can use a hook, but the only thing that I am not sure, I also need to read localStorage on my `App.js`. Then, is the localStorage values also read on App.js? — Jack, Mar 16 '23 at 14:32
There is an approach but ı think too redundant. https://stackoverflow.com/questions/72918582/why-local-storage-not-working-react-js-in-real-time — Jack, Mar 16 '23 at 14:32

score 0 · Answer 1 · answered Mar 16 '23 at 14:34

0

The problem here is your are not parsing the value from localStorage.

const userId = localStorage.getItem("currentUser");
let currentUserId=  JSON.parse(userId);

This should work perfectly.

answered Mar 16 '23 at 14:34

lutakyn

444
1
7
22

I tried, but it does not make any sense. Actualy it gets userId correctly. But there is another problem, see my new update – Jack Mar 16 '23 at 14:40
yes you have to parse that one also – lutakyn Mar 16 '23 at 14:45
I just need to set and get `AUTH_TOKEN` properly. So, DO I need to use Hook? – Jack Mar 16 '23 at 14:47
Any example please? – Jack Mar 16 '23 at 14:47

Cannot get jwt token after setting it to localStorage (without refreshing page)

1 Answers1