Store / persist session during server rendering

Question

I came across an issue using following starter repo for react: react-webpack-node

I am ussing sessionStorage for authentication purposes and realised that due to server rendering nature of this starter I am unable to access this session data while app is rendering on the server i.e. to protect my routes, I'd expect following to work:

import React from 'react'
import { Route, IndexRoute } from 'react-router'

import App from 'containers/App'
import LoginPage from 'containers/LoginPage'
import DashboardPage from 'containers/DashboardPage'

export default (store) => {
   const requireAuth = (nextState, replace, callback) => {
     const token = sessionStorage.getItem('token')
     if (!token) {
       replace({
         pathname: '/login',
         state: { nextPathname: nextState.location.pathname }
       })
     }
     callback()
   }

   const redirectAuth = (nextState, replace, callback) => {
     const token = sessionStorage.getItem('token')
     if (token) {
       replace({
         pathname: '/'
       })
     }
     callback()
   }

  return (
    <Route path='/' component={App}>
      <IndexRoute component={DashboardPage} />
      <Route path='/login' component={LoginPage} onEnter={redirectAuth} />
      <Route path='/dashboard' component={DashboardPage} onEnter={requireAuth} />
      <Route path='/logout' component={LoginPage} />
    </Route>
  )
}

But it is not and I believe this is due to session being undefined on server.

Answer 1

You have already point out the problem. You may try to use cookie to store the token because cookie is accessible on both client and server.