React Router Authentication

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
  ]
})

If you have any issues, hit me up!