Auth0 Home Blog Docs

How do I create an authentication layer without public routes (React)?

react

#1

Hey, I followed this tutorial.

I’m now wondering how I create an authentication layer around my whole application instead of displaying any public routes like the tutorial has.

I have tried authenticating my app by doing the following:

import * as React from "react";
import { Route, RouteComponentProps } from "react-router";
import { Router } from "react-router-dom";
import { WebAuthentication } from "./auth/WebAuthentication";
import App from "./master/App";
import Callback from "./master/Callback";
import history from "./services/history";

const auth = new WebAuthentication();

const handleAuthentication = (props: RouteComponentProps<{}>) => {
  if (/access_token|id_token|error/.test(location.hash)) {
    auth.handleAuthentication();
  }
};

const Routes: React.SFC = () => {
  return (
    <Router history={history}>
      <main role="main">
        {auth.authenticated ? (
          <Route path="/" render={props => <App auth={auth} {...props} />} />
        ) : (
          auth.login()
        )}
        <Route
          path="/callback"
          render={props => {
            handleAuthentication(props);
            return <Callback {...props} />;
          }}
        />
      </main>
    </Router>
  );
};
export default Routes;

When the application loads in the browser it redirects to the Auth0 login page, when I login I am then redirected back to my application, then I’m redirected back to the Auth0 login page again. When I login for the second time the application loads correctly.

The auth.authenticated method returns false because I’m guessing the handleAuthentication method hasn’t finished running when this conditional statement is ran:

{auth.authenticated ? (
  <Route path="/" render={props => <App auth={auth} {...props} />} />
) : (
  auth.login()
)}

It seems to be very hard just to get my whole application authenticated. Can anybody show me an example of a React application that uses Auth0 but has no public routes, or let me know where I am going wrong in my example?

Thanks