Rendering react router modal with Auth0

Question

I have an authenticated React app using Auth0 and I'm trying to implement a route (/paywall) that renders a modal on top of my index page ("/") with content. I'm using the official React Router docs as an example (https://reacttraining.com/react-router/web/example/modal-gallery) but my app breaks whenever I add the location prop to my component. It gets hungup on my /callback route and never authenticates - I've hunted down all my location props and they all seem to pass properly.

my App with Switch:

  const location = useLocation();

  const background = location.state && location.state.background;

return (
          <Router>
             <Switch location={background || location}>
                 <Route
                    exact
                    path="/"
                    render={props => {
                        return (
                          <SecuredRoute
                            component={Dashboard}
                            source={source}
                            auth={auth}
                            {...props}
                          />
                        );
                      }
                  />
                  <Route path="/paywall" children={<h1>PAYWALL</h1>} />
             </Switch>
             {background && <Route path="/paywall" children={<Modal />} />}
           </Router>
)

any my SecuredRoute component from the official Auth0 example:

export default ({ component: Component, auth, source, ...rest }) => {
  const isAuthenticated = auth.isAuthenticated();
  const isEmailVerified = auth.isEmailVerified();
  const isPhoneVerified = auth.isPhoneVerified;

  if (isAuthenticated === true && (isEmailVerified === true || isPhoneVerified === true)) {
    if (auth.checkSource(source.sourceId) === false) {
      return <Redirect to={{ pathname: '/whereami' }} />;
    }

    auth.pollAuthenticated(rest.location);
    return (
      <div className="container">
        <Component auth={auth} source={source} {...rest} />
      </div>
    );
  }

  return <Redirect to={{ pathname: '/callback', state: { referrer: rest.location || '' } }} />;
};

and my callback component:

// Render Component
const Callback = props => {
  const handleAuthentication = location => {
    if (/access_token|id_token|error/.test(location.hash)) {
      props.auth.handleAuthentication();
    } else {
      let referrer = '/';
      if (location.state && location.state.referrer) {
        referrer = location.state.referrer.pathname;
      }
      props.auth.checkSession(referrer);
    }
  };
  handleAuthentication(props.location);
  return <Spinner fullscreen />;
};

Coding Morrison Coding Morrison · Accepted Answer · 2019-12-27T16:33:36

I work with the Auth0 Community. We actually have a React Quickstart that should help in the transition of getting a successful login. What I would recommend is comparing it against your current setup and see what may be missing.

https://auth0.com/docs/quickstart/spa/react

Rendering react router modal with Auth0

1 Answers