Using layout with "withAuthenticationRequired"

Help
, ,
1

We’ve just switch to using Auth0 and I’m trying to update our existing code to work with a auth0 sample code that I got.
Here is what I have in App.js
return (










)

Here is what I have in PrivateRoute.js before using Auth0
function PrivateRoute ({ component: Component, …rest }) {
return (
<Route
{…rest}
render={props => (
<PrivateLayout {…props}>


)}
/>
);
};

Here is my PrivateLayout.js
return (

  <div className="wrapper">

    <div>

      <Header 

        {...rest}

        render={props => <Component {...props} />}

      />

    </div>

    <div className="main-panel">

      {children}

      <div className="bottom-spacing" />

    </div>

  </div>

);

};

Now I’m tryin to integrate with following sample code having hard time being able to render the component with the PriavetLayout:
import React from “react”;
import { Route } from “react-router-dom”;
import { withAuthenticationRequired } from “@auth0/auth0-react”;
import { Loading } from “…/components/index”;
const ProtectedRoute = ({ component, …args }) => (
<Route
component={withAuthenticationRequired(component, {
onRedirecting: () => ,
})}
{…args}
/>
);
export default ProtectedRoute;

Would appreciate all the help.

2

Hi @alex.farokhyans,

Welcome to the Community!

Are you using the React Quickstart? Auth0 React SDK Quickstarts: Login

4

Hi Stephanie,
I’ve been using that as reference, I’m trying to integrate auth0 with our existing react application that uses Azure B2C.

5

Okay, that’s good! The Quickstart is a good place to refer to. I’d also recommend this blog: The Complete Guide to React User Authentication with Auth0

Are there any errors?

Does it look like the using is authenticated? To determine this, you can import the useAuth0 hook and log isAuthenticated like this:

import { useAuth0 } from "@auth0/auth0-react";

const AuthenticationButton = () => {
  const { isAuthenticated } = useAuth0();

  return isAuthenticated ? <LogoutButton /> : <LoginButton />;
};

export default AuthenticationButton;

Would you mind re-sharing your App.js? All that is showing it return ( )

6

index.js
…
ReactDOM.render(

<Router>

  <Auth0ProviderWithHistory>

    <Route component={Main} />

  </Auth0ProviderWithHistory>

</Router>

,

document.getElementById(“root”)

);
…

app.js
…
return (

  //<HashRouter>

    <div>

    <Switch>

        <Route exact path="/">

          <Redirect to="/instruments" />

        </Route>

        <PublicRoute path="/login" component={Login} />

        <PublicRoute path="/forgottenPassword" component={ForgottenPassword} />

        <PrivateRoute

          path="/instruments"

          component={/*requireAuth(Dashboard)*/Dashboard}

        />

        <PrivateRoute

          path="/devicegraph"

          component={/*requireAuth(DeviceGraph)*/DeviceGraph}

        />

        <PrivateRoute path="/files" component={/*requireAuth(Files)*/Files} />

        <PrivateRoute path="/incidents" component={/*requireAuth(Incidents)*/Incidents} />

        <PrivateRoute path="/actions" component={/*requireAuth(Actions)*/Actions} />

        {/* <PrivateRoute path="/apps" component={requireAuth(Apps)} /> */}

        <PrivateRoute

          path="/usersettings"

          component={/*requireAuth(UserSettings)*/UserSettings}

        />

        <PrivateRoute

          path="/changepassword"

          component={/*requireAuth(ChangePassword)*/ChangePassword}

        />

      </Switch>

    </div>

  //</HashRouter> 

);

…

7

i think it work too slow