React-router resets all states of App component when I change route.

Question

I have 3 components, let's say
<App />, <Login />, <Page />

One should only be able to use page component route only if he is logged in, so i have a state in app component : isAuth which is set to false by default.
I pass it to page component via props and before returning my main stuff on page component, I check if isAuth is false and if it is then I use <Redirect /> to login route.

Now once I am logged in then I set isAuth to true via props I get in login component.
But when I again try to check on page it won't let me because states are reset to initial values.

How do I prevent that?

Answer 1

If you change it manually then you basically reload the app completely which resets the state.

You need to implement a persistent authentication mechanism.

For example, save a user token in local storage.
Then you can check for valid token whenever a user enters the site.

Answer 2

🔫 Rick Grimes Do you use <a> or <Link> tags for navigating between routes?

Also a little bit of code would give us a clearer picture

Answer 3

Basically yeah
But there are ways to minimize the risk such as adding server side authentication

https://www.freecodecamp.org/news/securing-node-js-restful-apis-with-json-web-tokens-9f811a92bb52/

https://developer.okta.com/blog/2019/02/14/modern-token-authentication-in-node-with-express

Answer 4

🇮🇳Vivek🇮🇳
Logout component is in page component, but I won't be able to access it because when route changes isAuth is set to initial value which is False.

Answer 5

So how does the url changes?

Try adding a <Link to={...}>...</Link> and check if pressing it also resets the state

Answer 6

For now I am changing url manually.
Let me check on with <Link>
Meanwhile I uploaded code at
github.com/DeveloperRaj/ExpenseTrackerReact

Answer 7

Oh well, I get it now.

Burey i just tried using <Link> and it is working fine now.

About local storage, anybody can edit it right? Then how do I prevent that happening?

Answer 8

Well then, JWT it is.
I will check for a good video from traversymedia

Thanks both of you Burey and Sarthak 🇳🇵

Answer 9

🔫 Rick Grimes
Then encrypt the authentication token. You needn't hide the local storage data. Encrypt it with password.
I recommend you to use 'jwt' package, NodeJS for encryption instead of custom encryption algorithm.

Answer 10

Burey
No i am not using <a> or <Link> for now but I will be using it in future.

Problem here is, when URL changes all state goes to initial values.

Wait, I'm gonna upload code to GitHub

Answer 11

However, using the local storage in React's function components is a side-effect which is best implemented with the Effect Hook which runs every time the value property changes:

import React from 'react';
const App = () => {
const [value, setValue] = React.useState('');
React.useEffect(() => {
localStorage.setItem('myValueInLocalStorage', value);
}, [value]);
const onChange = event => setValue(event.target.value);
return (
<div>
<h1>Hello React with Local Storage!</h1>
<input value={value} type="text" onChange={onChange} />
<p>{value}</p>
</div>
);
};
export default App;

Answer 12

I think. Because you are already logged in. Is there any logged out component which can set isAuth : false?.

Answer 13

I think. React router doesn't reset state.

Answer 14

Leonard Lee don't spam.

Answer 15

hi

Answer 16

🔫 Rick Grimes I just solved a similar question today.
https://www.sololearn.com/Discuss/2404081/?ref=app

Here a code that demonstrates page protection via login which was further modified code that given from the question.
(i set to private code since part of the code is not belong to me :))

https://code.sololearn.com/Wkr72RF2dNh1/?ref=app

Answer 17

I h.hmumberH
U I'm in
H
Have hi. Haha
his my
M
NM b b. but h.hbhh
JhOhhhh. .
Hav.hn.h . On be there
JhOhhhh
H
Jmumi
Junk n
in.. Ohh
in j
J
number( /n
Nmn~

Answer 18

🤗😎🤗
ChineseChineseh . ChineseChineseh b.jju.
Hihi
Jumbo . Haji b.
H.

Mun .bju.. Chi ChiN.
Nun
Wahhh this jh.h .

Answer 19

Have~m
JNunn . June bm
. Wahhh but I.
Jmu
Bm
H
J
K
Wahhh nnjn