Login is not persisting in reactjs application. I am using spa reactjs sample. Here is a link https://auth0.com/docs/quickstart/spa/react. I have to login everytime if I refresh the page. Please suggest what needs to be done to persist login after refresh.
please follow this official document points. It might help you
https://auth0.com/docs/quickstart/spa/react/01-login#restoring-login-state-with-social-providers
Related
I'm using ReactJS for my next project and am using JWT and storing it in LocalStorage for persistent login. The issue occurs whenever I refresh my website, the navbar flickers between auth links and guest links. Can anyone help with the flickering/flashing between states while using persistent login?
I am currently learning by doing. So I've created the backend using FeathersJS and am authenticating through the endpoint just fine. When the user gets authenticated I set the 'isLoggedIn' state to true and then pass that along to other components to make sure that the user is logged in so they can access that component.
Now when I see and test it using the REACT DOM Tools, I can see that I can just login by clicking on isLoggedIn and it will give me access to my app bypassing the whole login system.
What is the correct way to create a login setup? Can the isLoggedIn state be hidden somehow? Please help!
I've been looking around for information on how to do this but I haven't found anything that useful yet..
Screenshot
You could make use of session cookies. Or I often find myself using Passport.js. But of course this implys that you have control over the server and database.
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 a login screen. Once login is successful, then I have to open a home page with bootstrap navigation. I have several links in the navigation.
Please suggest me,
How to use and configure 'browserouter'
how to enable/disable homepage when login is successful.
Sorry, I have trouble starting out where to write what.
So if I understand correctly you are using react-router. This is the basic premise around client-side authentication. You should have some sort of state which indeed tells the app the user is logged in. With redux you would save a JWT or cookie in the global state. Then once the user visits the page you would based on the credentials:
1) Redirect the user from login page to home page if he is logged in:
With react-router you would do that with:
this.props.history.push('/')
2) Redirect the user from an unauthorized route (something like user profile page) to the login page:
this.props.history.push('/login')
Keep in mind these are just guidelines and you would implement this based on your application, but essentially you should have everything thought out before doing so.
Hopefully this all helps!
I'm a noob, starting my very first project with Node, Express, and React.
I got the authentication working, I have a Component that calls an action, which calls a store (or should), but this is where I get confused. I don't know where to go.
My LoginActions.login makes an api call to login the user, it comes back successfully and stores a cookie with the session ID. After that, how do I tell the UI to go to the dashboard? How do I make the UI KNOW that the user is actually authenticated, and if it's not, kick him out?
Where am I supposed to check for all that? Is it the store? The component itself?
Any help would be greatly appreciated.
You're not really "supposed" to do it in any specific way. React is more of a library than a framework. You can use it however you see fit.
One option would be to use react-router's onEnter function to verify logged in status and user it's replace method to redirect accordingly.
You could also have your components themselves verify logged in status and instead render your login form if not logged in yet.
Or you could even store your login form at a unique uri and handle all of the authentication via the server, using 302 redirects based on logged in status.
Up to you!