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 :)
Related
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.
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 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'm using React to build an website where the user needs to login.
The website keeps states from the user.
This is the state of auth.
This state isn't changed much.
When I refresh the page my state gets refreshed too!
I want to keep the state if someone refreshes the page.
I looked at: https://hackernoon.com/how-to-take-advantage-of-local-storage-in-your-react-projects-a895f2b2d3f2 but that is only for states in current page only.
I want to save the main state of the app no matter on what page the user is on when page is refreshed.
How to do that?
I don't know what code you guys need, so ask me and Ill add it to the question.
I really need help with this.
You can save your state in localstorage using redux-persist. It will also update localstorage when redux state will be updated and persist when page reloaded
I have auth component working greatly till I implemented a page for the user to change the user's info. I experienced some unknown results till I found out that after user's info being changed by that action, the user data loaded by auth component in session still remains the same. I wanted to know if there is any way to force auth component reload the user data from database again?
I considered re-logging in the user but it makes the logs complicated and places some bad traces in program. is there any more beautiful way to do so?
$this->Session->write('Auth', $this->User->read(null, $user_id));
you got to update it, cake does not do everything for you ;)