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!
Related
In my app I have react-router, redux and redux-first-history all working nicely. Certain routes in certain circumstances must navigate the user to another website e.g. for authentication with SAML. As React Router doesn't have a way to navigate to external sites I have to resort to manipulating the location.href.
An example route test would be:
User lands on a login page (Route handled by RR6)
User enters email address which is checked via an API
Server responds that this user is set up for password login (4) or SAML (5)
Password login - browser shows password box
SAML login - browser navigates to SAML IdP (Handled by manipulating location)
When running tests I get errors from jsdom which is expected:
Error: Not implemented: navigation (except hash changes)
The problem is if I patch the location object in order to test as suggested by many then this breaks React Router navigation.
What is the best way to either handle external navigation or patch things correctly so that my tests work?
Just add another forward slash to the url.
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
navigate("//google.com");
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.
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
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?