I'm creating a portal in React, and I need to allow login/logout of users, where if you are logged you can see some pages, otherwise you can't.
So far I've thought about having a variable 'isLogged' in the state of each component which need the user to be logged to be seeen, and pass the variable in the props among the these components.
Then, I saw I can also use the localStorage to save this variable (I'm ok with the fact that the user would remain logged as long as he will clear his chace).
The question I have is: is this ok, or it is not the right way to manage the session user (also considering security issues)?
If so, which is the correct one?
If it's useful to know, I'm not using Redux, and probably the portal will exploit only https protocol.
It may be very late but still You could try out this which is one of the best way to handle auth user
React - What is the best way to handle authenticated/logged in state?
Related
I've been working with react from past 1.5 years. When I came across redux it's good library for state management of an app but when it comes to local storage I think it's good to store user session because redux store will change because of page refresh. So I'm little bit confused what to do with redux also it's little complex writing code. Can somebody help me which is better to use for storing user session? Thank you :)
The purpose of Redux (or any other state management tool for SPAs) is to help you manage your app's state when the app is loaded in the browser. You can't "keep it" after you close the app. Use JWT or cookies for storing info about user sessions in the browser.
Also, you don't have to use Redux for your state management if you find it too complex. React's Context Api may be sufficient. But again, not for storing user sessions.
I am creating a React app as a personal project. I am using OAuth with implicit grant flow, which has my user redirect to a different page for auth, then redirects back to my app. Everything is working as I expect, but when the user is redirected, all my state is cleared.
For example, my user finds a specific book from a list of books, this takes the user from the index page to that specific book's show page, and the book's ID is saved in component's state. When the user wants to save this book to their personal account, they log in through OAuth and come back. Now the book is no longer saved in the state and the user needs to search and find it again as a logged in user. I want to avoid using redux and react-router if possible, and the only workaround that I've thought of so far is to save the book ID into localStorage, which I'm not sure is a good practice.
Is there any other way I can get around this?
When you redirect the user to the login page, you can provide a URL param like afterLoginRedirectionUrl that contains the book id, e.g. /books?activeBookId=3
In the log in component, after success, redirect to that url if the param afterLoginRedirectionUrl is present. This way, when going back to /books?activeBookId=3, you can set the initial state of your component to the active book id present in the URL.
About your comment:
I want to avoid using redux and react-router if possible
Redux or react-router won't solve this problem. They store the data in the same way you do it right now, In memory, and as soon as you refresh or close the page all the data will be lost.
About using localStorage: if it is working for you, you can continue using it. It is standard and supported in all major browsers. In case you are dealing with very structured data, maybe it will be good to take a look to IndexedDB too.
I have a ReactJS front-end app mixed with a Laravel back-end app.
I'm facing a problem with auth. I'm authenticating the user with Laravel auth but I have some trouble on displaying components. I have some posts (/posts/1 or /posts/2 etc...) and when the user visits the page, he can modify the post if he is the author.
I'm storing as a state the id of the user and checking like this :
if(this.props.user.id === this.props.posts.id_user) ...
But this is really unsafe since the state can be modified by anyone with the dev tool. By modifying the state, the user could modify a post even if he is not the author because all displayed components managing the edit would be accessible for him.
Is there a "magic" trick to prevent it?
First of all, the state you are talking about is the app state, the one that resides in the browser, if the user change that state, the effects will only be affected by the user itself, in his browser, theoretically, is not changing the data or state in your backend/database, unless you don't implement the same validation you are talking about.
If you do if(this.props.user.id === this.props.posts.id_user) in your front, you absolutely have to do it in your back, that is the place where the real validation counts, that's where the user can't change the user id, because, for example, you will be using the one in the user session that is stored in cookies or a Redis server.
Always validate in the backend
I'm quite new with react-apollo, however wasn't sure how to approach this problem. I'm authenticating a user with a mutation but would like to access that same user object, that's returned in other components again (live navbar, to render button options, or a profile button once logged in). Should I just fetch the current logged in user everytime I need it? I.e.
query GetUser {
id
name
role {
name
}
dob
}
Append this at the end of every component that needs it? I'm not sure if the best way might be to just cache it after logging in once versus this Even then how do you specifically cache it? I know inheritently it caches it as well, so its not like i have redundancy in fetching, however i might in code. What are some approaches y'all took.
in react applications to save user data for authentication you have to save user data in storage like local storage and store to your global state of your application like redux and mobx to access from all over the application.
i recommend to you using redux.
note:
every time when start application you have to store data from storage to global state again.
also you can use apollo-cache-persist but i don't tried this!
BACK STORY: I am creating a react app which uses back-end-api JSON based authentication for log-in, after user is validated back-end returns a JSON token for future requests.
WHAT AM I DOING NOW: I am passing down that token from one component to another using props (and yes, that's not very elegant nor clean).
WHAT I AM LOOKING FOR: Someone after seeing the project suggested me to store the token & other redundant data in browser memory. Now, I don't know how to do that nor I was able to find any resources.
BUT: I believe that this problem can be solved by redux. But I want to create a react only app first before jumping to redux or some other advanced stuffs.
So, how do I store these type data in browser memory itself?
Or, is there any more elegant solution to this?
Also, gimme some advice about session management. Like when token expires the user is shown a dialog and redirected back to login page.
why not you simply go for LocalStorage ? like this
localStorage.setItem('user_info', JSON.stringify(response));
For more info refer here
https://www.w3schools.com/html/html5_webstorage.asp
https://www.w3schools.com/html/html5_webstorage.asp
Update
To get values from locastorage you can use the syntax below -
localStorage.getItem('user_info');
Redux is a state container for react. It helps you to manage all states in react app. But you can still live without it (barely) using local state and props. Besides, you can use localStorage and cookies to store whatever you want.