I want to display on the Header the button "Login" when the user is logged out, and "Logout" when the user is logged in.
I decided to use Redux for this with the stated "loggedIn". This works fine, except when I reload the page. The "loggedIn" is reset to its default (false).
Is Redux a good approach for this? Note: I am using JWT for authentification
It depends on your app scale, for bigger app use redux to prevent props drilling.
Related
I have a simple login page, when the informations are correct, I redirect the user to another url via window.open() with _self parameter. Eg: window.open("/home", "_self");
The problem is, I save this login information to the Redux store, but naturally Redux resets the store because of window.open()'s page load. I can't use Link on Login button.
So is it possible to redirect to another URL without page load (not using Link as I mentioned) or avoid Redux reset state action?
You might want to use Redux Persist which allows you to store your redux state in the local storage of your device and when your react app renders initially hydrate your redux from the redux persist OR you can pass in query param that indicates somethings like
yourURL.com?isLoggedIn=true
and trap in the query param and render your component as needed.
Hope this helps.
I had to solve it via Link, giving to parameter's value with ternary operator.
code and preview here
I am new to React and I have set up a very basic front-end session.
The user has to sign in on that page (https://react-vc551s.stackblitz.io/signin) in order to get access to https://react-vc551s.stackblitz.io/dashboard. He is also able to log out on that page (https://stackblitz.com/edit/react-vc551s). If the user is logged out and try to access the /dashboard page, he is going to be redirected to the /signin page.
What I have hard time to do is to move the login / logout button to the navbar. My Navbar is a separate component and I don't know how to do it.
If you only need to show button based on user auth. state then, do this-
Save user auth status in local storage or cookie. Initialize the status in state variable(true or false), then in your navbar component add a condition inside your return statement.
{isAuthenticated? <button>Logout</button>:<button>Login</button>}
If I were you, I would use useContext to make my life easier to manage the auth state. The useContext is a global state which can be accessed from everywhere by calling the context. Learn more in React Context
I want to show the welcome component, when the user logged in to the site for the first time. From the next time onwards, when the user signin to the site, the welcome component should not display. There is a button in the Welcome component, "Click here to get started". Is there anyway to achieve that using that button click. When the user signin, I am storing user token and Id in the redux store. Please let me know, in what way i can make that work.
Thanks in Advance.
Redux store is not persisted over page refreshes, therefore I don't think this is what you're aiming for.
Usually this is done by persisting if the user already visited the site on a cookie, or local storage.
Hope this helps :)
When user navigation to app ex: http://myapp.mydomain.com
I initialize a bunch of stuff, make requests to auth the user based on a cookie etc. This setup the main state of my main-reducer.
If a user navigation directly by pasting let say: http://myapp.mydomain.com/userProfile
The main state, will never be setupped. So the trick I'm using is putting the last part of the url (userProfile) in a cookie (or somewhere else) and redirecting to http://myapp.mydomain.com. After auth and requests, I the redirect back to the page the user wants to view. This works, but feels wrong. I was wondering: is there a better way of doing that?
Thanks!
Why don't you just make the route /userProfile as protected route.
Only if the user is authenticated he can see that page if not redirect to root page and re-validate the user.
I have only started with react and redux and designed the login -sign up page.
Have an action that calls login-sign up API and a corresponding reducer.
I display some of this information on page and use it on some others. Now, I would like this state to be maintained when the browser is reloaded. How do I do it?
I have this header component binding this action that logs the user in.
Usually, you either store the state in localStorage, e.g. by using redux-persist or fetch the initial state from your server.