React Router authentication, onEnter, requireAuth, PlainRoute & a follow up to a github issue

I was looking through the issues of a popular boilerplate today and there was a question about how folks would handle authentication with this new style of creating routes (PlainRoute).

Here’s what you need to know:

• `requireAuth` is a React Router function. It takes 3 arguments: nextState, replace, callback
• replace is all we’re after, but you have the ability to do more if you choose to
• within `requireAuth`, invoke whatever technique you’re using to identify a user or a token
• If a token exists, carry on
• If a token does not exist, replace history with an unauthenticated route
• If you decide to use a callback, the transition will be blocked until `callback` is called (in the docs)

function requireAuth (nextState, replace, callback) {
  const token = localStorage.getItem('@TOKEN')
  if (!token) replace('/')
  return callback()

}

// ...

export const createRoutes = (store) => ({
  path: '/',
  childRoutes: [

    // Authenticated
    {
      component: CoreLayout,
      onEnter: requireAuth, // add this
      indexRoute: Dashboard,
      childRoutes: [
        ProfileRoute(store),
        BillingRoute
      ]
    },

    // Not-authenticated
    {
      component: ModalLayout,
      childRoutes: [
        LoginRoute
      ]
    },

    // Other Not-authenticated routes
    HelpRoute,
    ContactRoute
  ]
})

I hope this helps! If you need a hand, or have a better way of handling this, ping me!