Custo Signup Page - reactjs

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?

Related

I am unable to use Isomorphic-reactReferer

I have made a back button for my isomorphic react application and am accessing the current URL of the page to check if my user is coming from the inside my application entry point or directly entering the URL for the subpage of my application into the browser. The thing is that if someone has hit my subpage URL directly then I redirect them to a default page otherwise I allow goBack functionality provided by withRouter HOC from React.
my code to handle Back button functionality looks like this
if(this.props.location===reactReferer.referer()){
this.props.history.push('/about')
else { this.props.history.goBack(); }}
what am I doing wrong as this doesn't seem to be working? I imported the following package and npm installed it 'react-referer'

React Router navigate away to new URL with tests

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");

How to access current page URL without using react router or window.location

I've building a lightweight preact widget that gives users different forms based on current url. I don't want to use preact-router as it would affect the routing of the parent website.
So I went with window.location. But the issue, I'm facing is when users navigate internally from one page to another,unless there is refresh, window.location doesn't update the current URL.
Hence if i want to send form 1 to users at /home and form 2 to users at /settings. Users get the same form for both /home and /settings when users navigate internally and only change when they do a refresh.
Can someone suggest me a lightweight solution to fix this? Does in-memory router works for my use-case?

how to use the current user for other operation in react project

I'm new to react.js. I've created an application in which I'm using firebase google auth provider for signin purpose. I've also used the firebase-ui for signin component. My problem is I cann't find any reference about how to use the current logged in user for other opertions like insert a data, or view existing data in my entire app even with authentication on every page refresh or new tab open. Even keep the user logged in if he not done signout.
I want some blogs to follow and if possible can i get a overall idea about how to solve this situation or any sample project link having this complete reference.
I've followed this url as my project structure.
Looking at this firebase doc: https://firebase.google.com/docs/auth/web/manage-users
It looks simple to try this:
var user = firebase.auth().currentUser
Also React itself won't store this behavior unless you set it in the state somewhere.

ReactJS dynaminc component/routes based on user access

I'm new into ReactJS - I'm trying to implement login system with PHP.
I want to have different type of users - some of them should have access only to some portion of app.
Is there any way to prevent those users from accessing certain routes as /admin ?
What I want is not something as simple function that check's user accessible routes and redirecting -> I would like to HIDE/REMOVE components that user has no access to, so he would download the app containing only /login /info, so he won't even download /admin component in app (won't be able to see the code for it)
You can use Higher-Order Components.
With HOC you can wrap other components.. if user have permissions you can return wrapped component, otherwise return null or redirect user to another route.

Resources