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?
Related
solve me a problem which is it about
I have a project which is it a register page and home page the home page is empty and these are connected with firebase
I have an app with multiple features I want it to work in the home page and be able to connected with firebase
I am pretty new to React and front end world.So ignore mistakes.
So i am using auth0 for authentication in my react app. Login button is a component which redirecta to auth0 authentication button and upon login user can go to /profile component. Using react router for going to profile component.
All this works perfectly in localhost.
But the moment i deployed on s3 and cloudfront. it shows profile key not found so based on various solution (https://stackoverflow.com/a/58978355/13126651)on stack now add i can see my go to profile component however the page is entirely blank nothing is being render on profile component.
UPDATE :- the error is definitely related to cloudfront, because if i directly access my s3 bucket website endpoint,it renders everything works.
I solved it by add error response 403 404 for cloud front.
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
Logging out on page refresh in React + Redux Application, but if I store token in localstorage, then it works fine, but i don't want to store token in localstorage. Is there any other way to achieve it?
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!