Adding Authentication / PrivateRoute / AuthenticatedRoute to CoreUI 3 Router

I have the latest coreui pro version 3.2
I am looking to create a login page and i can’t find correct documentation to how to implement it correctly with the Router (react-router-dom).

Its not clear to me how can i provide authentication ? (I use JWT)
My application is a dashboard and login is required for everything.
How do i set it up ?

I saw some old examples that uses Router.component and Redirect but the latest version is using Router.render to pass the props…

does anyone have good info on that ?
App.js
render() {

    return (

      <HashRouter>

          <React.Suspense fallback={loading}>

            <Switch>

              <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />

              <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />

              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />

              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />

              <Route path="/apps/email" name="Email App" render={props => <TheEmailApp {...props}/>} />

              <Route path="/" name="Home" render={props => <TheLayout {...props}/>} />

            </Switch>

          </React.Suspense>

      </HashRouter>

    );

  }

}
1 Like

What we did was add a check in /containers/TheLayout.js if there isn’t an authenticated user we redirect them to the login page.

Similarly did that in the Login page, if a user is authenticated then we redirect them to the dashboard.

Using Context, created an AuthContext, and just wrapped the router in that:

<AuthProvider>
  <HashRouter>
    <React.Suspense fallback={loading}>
    ...
    </React.Suspense>
  </HashRouter>
</AuthProvider>

Ideally we would do the check in app.js directly and redirect them accordingly. But since I’m not that well versed in Router, decided to do it this way for now.