sets JWT on all client api requests, saves cookie with jwt

src/api.js

@@ -1,19 +1,25 @@
+import Cookies from 'universal-cookie';
 import superagentPromise from 'superagent-promise';
 import _superagent from 'superagent';
 
+const cookies = new Cookies();
 const superagent = superagentPromise(_superagent, global.Promise);
-
 const responseBody = res => res.body;
 
+const setJwt = () => {
+  const jwt = cookies.get('token');
+  return jwt ? { 'Authorization': `JWT ${jwt}` } : {}
+}
+
 const requests = {
   get: url =>
-    superagent.get(`${url}`).then(responseBody),
+    superagent.get(`${url}`).set(setJwt()).then(responseBody),
 
   post: (url, body) =>
-    superagent.post(`${url}`, body).then(responseBody),
+    superagent.post(`${url}`, body).set(setJwt()).then(responseBody),
 
   put: (url, body) =>
-    superagent.put(`${url}`, body).then(responseBody)
+    superagent.put(`${url}`, body).set(setJwt()).then(responseBody)
 };
 
 export default {

src/auth/index.js

@@ -10,9 +10,7 @@ export default User => ({
    * @returns {*}
    */
   login: (req, res) => {
-    let { email, password} = req.body;
-    console.log(email);
-    console.log(password);
+    let { email, password } = req.body;
 
     User.findByUsername(email, (err, user) => {
       if (err || !user) return res.status(401).json({ message: 'Auth Failed' });

src/components/forms/Form/index.js

@@ -1,5 +1,6 @@
 import React, { Component, createContext } from 'react';
-import { Input, Status } from 'payload/components';
+import { withRouter } from 'react-router-dom';
+import { Status } from 'payload/components';
 import api from 'payload/api';
 
 import './index.scss';
@@ -48,12 +49,12 @@ class Form extends Component {
     if (!isValid) {
       e.preventDefault();
 
-    // If submit handler comes through via props, run that
+      // If submit handler comes through via props, run that
     } else if (this.props.onSubmit) {
       e.preventDefault();
       this.props.onSubmit(this.state.fields);
 
-    // If form is AJAX, fetch data
+      // If form is AJAX, fetch data
     } else if (this.props.ajax !== false) {
       e.preventDefault();
       let data = {};
@@ -70,6 +71,10 @@ class Form extends Component {
       // Make the API call from the action
       api.requests[this.props.method.toLowerCase()](this.props.action, data).then(
         res => {
+
+          // If prop handleAjaxResponse is passed, pass it the response
+          this.props.handleAjaxResponse && this.props.handleAjaxResponse(res);
+
           // Provide form data to the redirected page
           if (this.props.redirect) {
             this.props.history.push(this.props.redirect, data);
@@ -104,15 +109,15 @@ class Form extends Component {
 
     return (
       <form
-      noValidate
-      onSubmit={this.submit}
-      method={this.props.method}
-      action={this.props.action}
-      className={this.props.className}>
+        noValidate
+        onSubmit={this.submit}
+        method={this.props.method}
+        action={this.props.action}
+        className={this.props.className}>
         {this.state.status && !this.state.redirect &&
           <Status open={true}
-          type={this.state.status.type}
-          message={this.state.status.message} />
+            type={this.state.status.type}
+            message={this.state.status.message} />
         }
         <FormContext.Provider value={{
           setValue: this.setValue.bind(this),
@@ -127,4 +132,4 @@ class Form extends Component {
   }
 }
 
-export default Form;
+export default withRouter(Form);

src/components/views/Login/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Cookies from 'universal-cookie';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { ContentBlock, Form, Email, Password, FormSubmit } from 'payload/components';
@@ -7,7 +8,13 @@ import './index.scss';
 
 const mapStateToProps = state => ({
   windowHeight: state.common.windowHeight
-})
+});
+
+const cookies = new Cookies();
+
+const handleAjaxResponse = res => {
+  cookies.set('token', res.token, { path: '/' });
+};
 
 const Login = props => {
 
@@ -19,8 +26,10 @@ const Login = props => {
       <div className="wrap">
         <Logo />
         <Form
+          handleAjaxResponse={handleAjaxResponse}
           method="POST"
-          action="http://localhost:3000/login">
+          action="http://localhost:3000/login"
+          redirect="/">
           <Email label="Email Address" name="email" required />
           <Password error="password" label="Password" name="password" required />
           <FormSubmit>Login</FormSubmit>

src/index.js

@@ -27,7 +27,7 @@ module.exports = {
     options.app.use((req, res, next) => {
       res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
       res.header('Access-Control-Allow-Headers',
-        'Origin X-Requested-With, Content-Type, Accept');
+        'Origin X-Requested-With, Content-Type, Accept, Authorization');
       res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
 
       next();
@@ -35,7 +35,7 @@ module.exports = {
 
     options.app.use(express.json());
     options.app.use(methodOverride('X-HTTP-Method-Override'))
-    options.app.use(express.urlencoded({extended: true}));
+    options.app.use(express.urlencoded({ extended: true }));
     options.app.use(options.router);
   }
 };