Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

this is a very weird problem! I'm trying to build a login form which sets a JWT token in localstorage . Other forms then use that token to post requests. I can see the token in my console.log just fine, but sometimes (like 3 out of 5 times), when I am setting localstorage.getitem('idToken') , it shows as null. This behavior most noticeably happens when I remove the console.log(idToken) from my loginUser() function (code in actions.js file - given below). What am I doing wrong? my app is built using React/Redux.

action.js

export function loginUser(creds) {
const data = querystring.stringify({_username: creds.username, _password: creds.password});
let config = {
    method: 'POST',
    headers: { 'Content-Type':'application/x-www-form-urlencoded' },
    body: data
return dispatch => {
    // We dispatch requestLogin to kickoff the call to the API
    dispatch(requestLogin(creds));
    return fetch(BASE_URL+'login_check', config)
        .then(response =>
            response.json().then(user => ({ user, response }))
        ).then(({ user, response }) =>  {
            if (!response.ok) {
                // If there was a problem, we want to
                // dispatch the error condition
                dispatch(loginError(user.message));
                return Promise.reject(user)
            } else {
                localStorage.setItem('idToken', user.token);
                let token = localStorage.getItem('idToken')
                console.log(token);
                // if I remove this log, my token is returned as null during post. 
                dispatch(receiveLogin(user));
        }).catch(err => console.log("Error: ", err))
here's my POST request: 
import axios  from 'axios';
import {BASE_URL} from './middleware/api';
import {reset} from 'redux-form';
 let token = localStorage.getItem('idToken');
 const AuthStr = 'Bearer '.concat(token);
let headers ={
headers: { 'Content-Type':'application/json','Authorization' : AuthStr }
export default (async function showResults(values, dispatch) {
console.log(AuthStr);
axios.post(BASE_URL + 'human/new', values, headers)
    .then(function (response) {
        console.log(response);          
        alert("Your submit was successful");
        //dispatch(reset('wizard'));
    }).catch(function (error) {
        console.log(error.response);
        alert(error.response.statusText);
This GET request works everytime, BTW: 
getHouses = (e) =>  {
    let token = localStorage.getItem('idToken') || null;
    const AuthStr = 'Bearer '.concat(token);
    axios.get(BASE_URL + 'household/list', { headers: { Authorization: AuthStr } }).then((response) =>
            let myData = response.data;
            let list = [];
            let key =[];
            for (let i = 0; i < myData._embedded.length; i++) {
                let embedded = myData._embedded[i];
                list.push(embedded.friendlyName);
                key.push(embedded.id);
            this.setState({data: list, key: key});
        .catch((error) => {
            console.log('error' + error);
I'm at my wit's end! Please help! 
The localStorage.setItem() is a asynchronous task, and sometimes you run let token = localStorage.getItem('idToken') just after the setItem will fail, so you get a null, so please put the getItem operation some later, have a try, it will be different :
setTimeout(function() {
    let token = localStorage.getItem('idToken');
    dispatch(receiveLogin(user));
}, 50);
Move your token logic (i.e. localStorage.getItem('idToken');) inside the exported function and it should work
export default (async function showResults(values, dispatch) {
  let token = localStorage.getItem('idToken');
  const AuthStr = 'Bearer '.concat(token);
  let headers ={
   headers: { 'Content-Type':'application/json','Authorization' : AuthStr 
 axios.post(BASE_URL + 'human/new', values, headers)...
There can't be a case where you set a key value in localstorage and then it returns you null, immediately in the next line.
localStorage.setItem('idToken', user.token);
let token = localStorage.getItem('idToken');
This will only happen if your user.token value is null.
Maybe the case here is your thennable function not returning value to your next then like this:
.then(response =>
     // return response to your next then function
     // this will be passed to next then function as params
     return response.json();
).then(({ user, response }) =>  {
Make a function whose return the value or a default value
const [hideTyC, setHideTyC] = useState(false);
  const loadTyCFlag = (): any => {
      localStorage.getItem("tyc") !== null ||
      localStorage.getItem("tyc") !== undefined
      return localStorage.getItem("tyc") || false;
  useIonViewDidEnter(() => {
    hideTabBar();
    setHideTyC(loadTyCFlag());
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.