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.
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 :)
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 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!
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 was trying to implementing login feature in my react-router redux app.
Following is the scenario
User logs in and he is redirected to his dashboard.
For this when the person enters ID/pass and presses on submit and on success on API call I replace the browserHistory with /app/dashboard. So far so good.
User can select sub sections inside dashboard
So now he can choose sub pages under dashboard and goes to /app/dashboard/:page and it all works fine.
Now say if he reloads the page here it gets redirected to /app/dashboard. This is mainly because on my mount point which is my App Component(/app) is dispatch an action for initial authentication.
This action checks if user is already logged in(which I track from cookies). If he is, he is redirected to dashboard else he is taken to login page.
When I reload /app/dashboard/:page it takes me /app/dashboard because of this initAuth() action is dispatch on App Component.
To handle this what I did was I use the location from props under the components.
This takes of 2 scenarios.
Scenario 1
When I fire initAuth() I fire by passing pathname from location as parameter. If it is login I redirect to the homepage else I leave it.
Scenario 2
Similarly when I log in I read ownProps from mapDispatchToProps and check if the pathname if login I redirect it to /app/dashboard.
This way only if he user is coming from login he is re-directed to dashboard and other pages are not redirected to dashboard.
So I created a function which handles both above scenarios
if(path === constants.LOGIN_URL_PATHANAME){
browserHistory.replace(constants.DASHBOARD_URL_PATHNAME)
}
So though I implemented this but I think there can be a better solution to handle this. Can you please share your feedback?