Add Example for PrivateRoute?

[xiaoyunyang]

This is not an issue but rather a suggestion for improving this repo.

I found this example from React Training which shows the implementation of a PrivateRoute that blocks access to private routes if you are not authenticated. This is the definition of a PrivateRoute:

import React from 'react'
import { Route, Redirect } from 'react-router-dom'

const PrivateRoute = ({component: Component, authed, ...rest}) => (
  <Route
    {...rest}
    render={(props) => authed === true
      ? <Component {...props} />
      : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
  />
)

export default PrivateRoute

Based on the doc, it appears react-router-config does not restrict the ability to implement PrivateRoute if you set up the redirect just right. I think redux is probably also required to pass the authed along so private components know if they can display themselves or need to redirect to /login.

Is there a good approach or recommendation for incorporating PrivateRoute into the existing project?

[zacfukuda]

Thank you for pointing out the issue regarding authentication.

As you may know, this app is an example for studying how to use React Router. So I didn’t much care about authentication. However, I believe it is possible to implement authentication logic into react-router-config.

I have’t done the thing before, but what you should do is to integrate RedirectWithStatus in this app with the PrivateRoute you referred from the React Training. (I recently wrote an article about auth, so if you have time please check that out.)

There must be a dozen of ways to do authenticating. You should better find the one that suits best in your occasion. Good Luck.

[xiaoyunyang]

@zacfukuda I think I solved this. I ended up not using the PrivateRouter because I think it's a little too hacky. I made some changes to the react-router-config/renderRoutes.js function. My solution is posted under their Issue 4962. I implemented this solution into your project and it resulted in in pretty much no change to other files of your project. I'll work on a pull request to improve react-router-config probably some times later.

As usual, your new tutorial is useful and thoughtful. I'm working on authentication next but I read that auth0 has some basic service for free users and you have to pay them money for more features. Is there any reason you used auth0 instead of passport.js?

[zacfukuda]

@xiaoyunyang The reason I chose Auth0 is only because I got many of results regarding Auth0 when I googled “react auth example” or something. I’m still in learning process and keeping up with breaking technology like you do. My blog is where I output what learn.

Maybe I should try passport.js as well, although I think I have to run backend-server with Express, which makes thing more complicated. This is a comparison between 3rd-party auth v.s. fullstack auth. (By the way, it seems Auth0 sponsors passport.js.)