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.
Related
So I have a React app where it has an App component. Inside this app component, I'm reaching out to the server to check the user's auth status. Now I only want to check this one time when the app is opened for the first time.
I'm also using react-router-dom for routing. Now the problem is when I enter a path manually in the address bar it renders my App component again. The same doesn't happen when I navigate with the Link component of react-router-dom. Because of this behaviour, my auth status sets to false (it is default to false in App) even when the user is logged in. Then it again reaches to the server, and then sets the auth status to true again. How can I fix this so that the app component doesn't re-render and I don't see that login screen even for a while when I'm logged in when entering paths manually?
First query the localstorage for Auth Status and if it returns fail, Query with api call and add Auth Status to localStorage and proceed further. asat!
You may suspect of what would happen if user manually update the local storage. Since if you send the auth tokens on every api. No need to worry about that.
Have a great day :)
I've a problem with react-admin when user logout. Steps:
Log in the app mydomain.com
The user goes to mydomain.com/users
The user push "logout button"
Now, the URL is mydomain.com/login
Log in the app with another user
Now, the URL is mydomain.com/users again....
I want to, once you have logged out, if you wants to log another time, the app must send you to home page (/) not the last page before you logged out.
It's possible? Thanks a lot!
You should not need to wipe the history; there is something wrong with your code.
Your main app routes that need auth should be protected, e.g. if there is no auth cookie or session users should get redirected to log in, for example.
When a user logs in, they should be directed to the base route of your app, e.g. www.yourdomain.com/
It's hard to know what wrong with out seeing your code, or what your using for routing but clearing history is not the right approach.
The same problem has been bothering me for a while but never been forced to change it for me until recently. I'm not sure if you are using custom Login or Logout component, but if you do, what you need to do is quite simple without clearing the history(which I think it is unnecessary and potentially dangerous?).
This is what I did.
import { useHistory } from 'react-router-dom';
in your Login or Logout component define, const history = useHistory();
when handling login or logout function of your own, push the main route.
for example, login(auth).then(result => history.push('/'))
Done.
Frankly, I've tried on Login instead of Logout but if you are going to implement on Logout, make sure you put that code AFTER Logout component finishes rendering.
I am using reactjs+redux with firebase. I am calling a method signInWithRedirect for social providers authentication. Here after calling the method user is redirected to social auth page and then redirected back to my application. To get the authentication result firebase docs says that use getRedirectResult. I am using it but the problem is getRedirectResult gets called after few seconds and I would like to show some loader till it is called.
I am able to show loader by storing a flag in localstorage. Till here everything works fine, but when I close the window while user is redirecting to the social auth page the flag is set to true and when I open my application again instead of my login page I see loader, as there is no way for my application to know which state it is in, called from getRedirectResult or fresh load.
You can use sessionStorage instead of localStorage. It will only persist in the current window and will be cleared when the tab is closed.
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!