I am working on a dashboard where when user login, I make a request to an API to confirm the log in details and then I save the response to localStorage(to be able to persist users) and at the same time I have an AuthContext which I also set to the response. After this is done, the user sees the dashboard main page first and the data here is gotten from the useContext Api, instead of me making another api call ....my problem is this works fine when user logs in, but when user reloads, the app breaks because it sees the context value as null...which is the default......Also, if I try getting the data directly from localStorage, it works fine
Related
I am building a fullstack MERN app that allows users to login and perform some actions.
Some components are to display or work with user data like email, name, status etc.
Instead of sending a http request to the backend on every component that needs userData, is it a good practice to persist the userData on #reduxtookit persist not on local storage but session storage because if the user closes the browser without logging out, the data is gone on next session, which sounds good to me as logout would do the same.
So instead of sending a http request with loader function on react router v6.4 on every component. I probably should persist the data on login and use useSelector to access the data from every component that needs to work with it.
My question is: is this a good practice?
I persisted the data on reduxtoolkit persist and the pages were a lot more split second quicker than getting the data straight from the backend.
I just finished my session (cookie) based login system in my React+Redux app.
Then I realized that there is no way how I can check if the user logged out from another location (different chrome tab, removing the cookie, server session invalidation, expiration).
I was looking on Instagram's website what using React too. It seems if you log out in a different browser tab, you can still route to another place in-app until u hit some API fetching... Then website is automatically refreshed...
BUT, there is also some kind of system what realize that user is unlogged even when I do some actions whatnot require API calls.
So how to realize these situations in the best way? How do you handle them when developing.
I'm not exactly sure how Instagrams Authentication works but I'd imagine that it's handled by middleware and when you request an API call, it will check to see if the user has an Auth Token stored in Cookies or whatever before initiating the API Request.
You can easily do this yourself by adding a Redux middleware that checks to see if the cookie is there before dispatching the next action. If it's not there you can return an error message to the user or redirect them or even dispatch a redux action that clears out all loaded data and then finally redirect them back to the login page.
The reason why Instagram is only locking the user when it hits an API call is that you can't really do anything dangerous to the users account if the cookie was deleted as you can't make changes to their account (commenting, posting, changing account settings etc.) without interacting with the API. Therefore, the middleware doesn't have to run every time an action has been dispatched which technically makes their application more performant.
Example Redux middleware
import Cookies from 'js-cookie';
const clientHasToken = store => next => action => {
const authToken = Cookies.get('auth');
if (!authToken) {
// redirects user, but you could do anything here
return window.location.href = '/login';
}
// if user has an auth token, proceed to the next action
next(action);
};
export default clientHasToken;
I’m trying to figure out a React app using JWT for authentication, I dont’t really know how to plan it, for example:
Step 1: The user successfully logs in the app, gets a JWT token that is saved on localStorage.
Step 2: As soon as the user is logged in, the route changes and a request to the REST API is made, the request is authenticated using the token previously saved. The fetched data is now on state.
Step 3: The app has other routes that actually just filters the previously fetched data, so I think making new requests just to check auth would just makes things slower for no reason.
I would like to know a good practice to handle that, maybe check auth after a certain amount of time. Or the right thing to do is make requests on every route change just to check if the user is still authenticated?
The app has other routes that actually just filters the previously fetched data
make requests on every route change just to check if the user is still authenticated
If the user already has the data, it makes no sense from the security point of view to re-authenticate for the same data. Only re-fetch if you need to make sure the data is updated when the route changes.
I've got a React app built using react-boilerplate, and I'm unsure of the best way to deal with authentication. Here's my questions:
If a user authenticates, their token is stored in localStorage. If they leave the app and come back, state is cleared, so I'll have to grab their profile picture and such again, as well as check expiration/validity of their token by pinging the server. Where do I do this? Doesn't make sense to add this to EVERY route's onEnter function.
On each subsequent route change, data will obviously be fetched from the server. Each piece of loaded data on the page (maybe it's graphs, products, account info, whatever) will authorize the user since the token is sent in the header of each request. If one or all of the routes come back as unauthorized, do I redirect them? Make the whole page render an error? Just show an unauthorized error on the one/many sections that were unauthorized?? Not sure how this works.
I am using Express for backend and passport-local for user authentication. The state has a user object with 'isAuthenticated' field to check if the user is authenticated. After the user clicks the login button, I dispatch login action, which sends a post request to the server that handles authentication logic and sets 'isAuthenticated' to true. If the user is logged in, react-redux-router dispatches 'push' to change the location.
None of this seems to work however. When I click the login button, the page simply reloads. I see the actions dispatched for a brief second from the logger middleware but the whole app just reloads. Is there a way to get this to work?
Also, I saw an example that uses server side render to save the state so that when the page refreshes, the 'isAuthenticated' still remains true. Is it possible to achieve the same without using this method or cookies? Would there be a way to get the 'req.isAuthenticated' to the client side similar the how templating engines pass objects from the server side to the client side?
Edit: So passport.js works fine on chrome apparently not Safari but I am still wondering what would be the best way to deal with the second question.