Inject csrf token into react app

client/index.js

@@ -18,8 +18,10 @@ import render from '../common/app/utils/render';
 const log = debug('fcc:client');
 const DOMContainer = document.getElementById('fcc');
 const initialState = window.__fcc__.data;
+const csrfToken = window.__fcc__.csrf.token;
+initialState.app.csrfToken = csrfToken;
 
-const serviceOptions = { xhrPath: '/services' };
+const serviceOptions = { xhrPath: '/services', context: { _csrf: csrfToken } };
 
 Rx.config.longStackSupport = !!debug.enabled;
 const history = createHistory();

common/app/redux/reducer.js

@@ -30,6 +30,7 @@ export default handleActions(
     username: null,
     picture: null,
     points: 0,
-    isSignedIn: false
+    isSignedIn: false,
+    csrfToken: ''
   }
 );

common/app/routes/Hikes/redux/answer-saga.js

@@ -21,7 +21,7 @@ function handleAnswer(getState, dispatch, next, action) {
   const state = getState();
   const { id, name, challengeType, tests } = getCurrentHike(state);
   const {
-    app: { isSignedIn },
+    app: { isSignedIn, csrfToken },
     hikesApp: {
       currentQuestion,
       delta = [ 0, 0 ]
@@ -76,7 +76,7 @@ function handleAnswer(getState, dispatch, next, action) {
 
   let updateUser$;
   if (isSignedIn) {
-    const body = { id, name, challengeType: +challengeType };
+    const body = { id, name, challengeType: +challengeType, _csrf: csrfToken };
     updateUser$ = postJSON$('/completed-challenge', body)
       // if post fails, will retry once
       .retry(3)

server/middlewares/global-locals.js

@@ -3,6 +3,9 @@ export default function globalLocals() {
     // Make user object available in templates.
     res.locals.user = req.user;
     res.locals._csrf = req.csrfToken ? req.csrfToken() : null;
+    if (req.csrfToken) {
+      res.expose({ token: res.locals._csrf }, 'csrf');
+    }
     next();
   };
 }