In my react app I have protected routes such as /admin.
If a user accesses this route who does not have permissions to view the page I replace the route with a /forbidden route.
From the forbidden page the user can press a back button which works fine, if the request came from in app routing.
What can I do if a user accesses this route directly over the browser?
I want the user to return to the start page but currently he gets redirected to my oidc providers page.
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 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?
I am using React and React-router in my SPA. When user navigates from one view to another, URL gets appended with hash (e.g #/broker/5e1f75c6-5a62-4d60-860c-1dd0d5ff8644?_k=w5wn3g) and this is expected and works fine for all views.
However when user refreshes page on any view, I want React-router to redirect to Index Route irrespective of view the user in. Is there any configuration I can do in React-router to setup this?
Right now React-router tries to navigate to matching route view. I just want to redirect to Index route/index.html without any server side redirects. Any suggestions ?
You can use the replace (or push) function of react-router. Call your history singleton's replace method after you set up the history.
Example
import { hashHistory } from 'react-router';
hashHistory.replace('/');
References
https://github.com/reactjs/react-router/blob/master/docs/API.md