Express and React Full Stack; issues with mobile (jwt/cookie)(android caching)?

[Ericarthurc]

So I am building a full stack application with express and react. I have designed this thing like 4 different ways and the same issue. So the backend generates a JWT for the user and stores in on them in the database. On login the frontend stores the jwt in the localstorage. Side note; I also did this with backend httpOnly cookies which I know is more secure, but was having the same issue so I tried different ways. Then on the front end either with Redux or ContextAPI it updates the state with the users information, etc... I want to use persistent logins with the JWT; so I can either access it with localstorage or send it with axios using credentials. When the react app mounts I use the 'useEffect' hook to run a function that checks if the JWT key is in the localstorage. If it is then it redirects the user to "/main" using React router and History. 

 

Here is the issue; Android (and maybe iPhone/iPad?; could be just mobile in general) has like this weird lazy loading/caching thing built in... If I open my phones browser (chrome, brave, firefox, etc... happens on all) and load the website it works fine. I can login and it will redirect my React app to /main with all the uses content. But if I close the browser and clear it from recents then reopen the browser, it like 'semi-loads' a weird lazy loaded cached version of the site. And this lazy loading brings really unpredictable state along with it. It jacks up localstorage, it will like semi run my axios function, but the backend never really receives it. It like ignores everything and does what it wants. It's really pissing me off too haha, because this behavior doesn't happen in the browser at all. Only on mobile browsers. I have tried looking it up, but no luck.

 

If you want to look at some of the code here is my github link to it:

https://github.com/Ericarthurc/express-react-auth-local-router (contextAPI with localstorage)

https://github.com/Ericarthurc/express-react-cookie-auth (Redux with backend cookies)

 

Same issue on both; Android semi cached loading is jacking up my state. I used the remote debugger tool a ton too to try and figure out what is going on and the behavior is all over the place. Like with my redux code; it tried to make a axios.get with credentials on boot to determine if the cookie and jwt are still good; but on Android when it semi loads it wont even make the axios.get call but it some how gets the users information... even if the cookie isn't there. It's like ghost data. And I looked through everything but can find where and what is being cached if anything..... freaking driving me crazy! haha

 

I would really appreciate any help; thanks!