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");
Related
I am working on a react app using react-router-dom. The default app behaviour is making the user navigate through a sequence of forms , fill them , validate the information submitted and complete signing up. In order to prevent the users from jumping between pages and directly accessing the signup page before all required forms are submitted, I am passing a prop to navigation as shown below.
navigate("pathName", { state: { valid: true } });
Inside the corresponding component , I decode the state value like this :
const location = useLocation();
valid = location.state && location.state.valid
This way if a user directly manipulates the url in browser, the location specific prop will not be present and valid would evaluate to false. In that case , I immediatly take them back to the previous page.
This setup works fine for blocking direct url manipulation and only allows programatic navigation. But the problem is, for one particular flow the app takes users to auth0 -> makes them login and then redirect them back to the app after successful login. But since I have blocked direct url manipulation, the call from auth0 gets blocked too and user is taken back to the auth0 login page.
How can I distinguish a normal browser url manipulation from a auth0 callback, so that I can let the latter go through ?
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.
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.
Background Information:
I have been following admin-on-rest example to create my custom Admin app. I created a custom component that is pretty much the same as https://github.com/marmelab/admin-on-rest-demo/blob/master/src/Login.js
However I want to provide the functionality for users to signup within the application, so I added a Sign Up button, that we clicked will redirect to domain.com/signup
Problem:
After reading the Authentication docs and trying it out myself, I found that on each route change the event AUTH_CHECK is evaluated. However, in input params I get as resource something I already defined in my <Admin> component. Basically, I need a way to "whitelist" a path and allow users to navigate to that path without them being authenticated.
Questions:
Is there a way to create a custom signup page and whitelist the path "/signup" so that authentication is not checked?
Is this something I need to implement with custom React Router routes, or is it something at the authClient level?
Has anyone tried to add a new signup page, and how did you make it work?
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!