adds authentication middleware to graphql playground, enables flexible content mutations

src/auth/jwt.js

@@ -8,13 +8,11 @@ module.exports = (User, config) => {
   opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme('JWT');
   opts.secretOrKey = config.user.auth.secretKey;
 
-  return new JwtStrategy(opts, (token, done) => {
-    if (token) {
-      User.findByUsername(token.email, (err, user) => {
-        if (err || !user) done(null, false);
-        return done(null, user);
-      });
-    } else {
+  return new JwtStrategy(opts, async (token, done) => {
+    try {
+      const user = await User.findByUsername(token.email);
+      return done(null, user);
+    } catch (err) {
       return done(null, false);
     }
   });

src/client/components/Routes.js

@@ -11,7 +11,6 @@ import Logout from './views/Logout';
 import NotFound from './views/NotFound';
 import CreateFirstUser from './views/CreateFirstUser';
 import MediaLibrary from './views/MediaLibrary';
-import GraphQLPlayground from './views/GraphQLPlayground';
 import Edit from './views/collections/Edit';
 import EditGlobal from './views/globals/Edit';
 import { requests } from '../api';
@@ -50,9 +49,6 @@ const Routes = () => {
         if (initialized === true) {
           return (
             <Switch>
-              <Route path={`${match.url}${config.routes.graphQLPlayground}`}>
-                <GraphQLPlayground />
-              </Route>
               <Route path={`${match.url}/login`}>
                 <Login />
               </Route>

src/client/components/views/GraphQLPlayground/index.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-redux';
-import { Playground, store } from 'graphql-playground-react';
-import config from '../../../securedConfig';
-import { getJWTHeader } from '../../../api';
-
-const GraphQLPlayground = () => {
-  const headers = getJWTHeader();
-  const endpoint = `${config.serverURL}${config.routes.api}${config.routes.graphQL}`;
-
-  return (
-    <Provider store={store}>
-      <link
-        href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Source+Code+Pro:400,700"
-        rel="stylesheet"
-      />
-      <Playground
-        headers={headers}
-        endpoint={endpoint}
-      />
-    </Provider>
-  );
-};
-
-export default GraphQLPlayground;

src/graphql/index.js

@@ -26,11 +26,11 @@ class GraphQL {
     this.Query = { name: 'Query', fields: {} };
     this.Mutation = { name: 'Mutation', fields: {} };
 
+    this.buildBlockType = buildBlockType.bind(this);
     this.buildBlockInputType = buildBlockInputType.bind(this);
     this.buildMutationInputType = buildMutationInputType.bind(this);
     this.buildWhereInputType = buildWhereInputType;
     this.buildObjectType = buildObjectType.bind(this);
-    this.buildBlockType = buildBlockType.bind(this);
     this.registerCollections = registerCollections.bind(this);
   }
 

src/graphql/schema/buildObjectType.js

@@ -232,7 +232,7 @@ function buildObjectType(name, fields, parentName) {
       const type = new GraphQLList(new GraphQLUnionType({
         name: combineParentName(parentName, field.label),
         types: blockTypes,
-        resolveType(data) {
+        resolveType: (data) => {
           return this.types.blockTypes[data.blockType];
         },
       }));

src/index.js

@@ -1,5 +1,6 @@
 const express = require('express');
-
+const graphQLPlayground = require('graphql-playground-middleware-express').default;
+const passport = require('passport');
 const connectMongoose = require('./mongoose/connect');
 const expressMiddleware = require('./express/middleware');
 const initWebpack = require('./webpack/init');
@@ -24,7 +25,6 @@ class Payload {
 
     // Setup & initialization
     connectMongoose(this.config.mongoURL);
-
     this.router.use(...expressMiddleware(this.config));
 
     // Register and bind required collections
@@ -42,8 +42,30 @@ class Payload {
       this.express.use(initWebpack(this.config));
     }
 
-    // Init GraphQL
-    this.router.use(this.config.routes.graphQL, new GraphQL(this.config, this.collections).init());
+    if (process.env.NODE_ENV !== 'production' || this.config.productionGraphQLPlayground) {
+      // Init GraphQL
+      this.router.use(
+        this.config.routes.graphQL,
+        (req, _, next) => {
+          const existingAuthHeader = req.get('Authorization');
+          const { token } = req.cookies;
+
+          if (!existingAuthHeader && token) {
+            req.headers.authorization = `JWT ${token}`;
+          }
+          next();
+        },
+        passport.authenticate(['jwt', 'anonymous'], { session: false }),
+        new GraphQL(this.config, this.collections).init(),
+      );
+    }
+
+    this.router.get(this.config.routes.graphQLPlayground, graphQLPlayground({
+      endpoint: `${this.config.routes.api}${this.config.routes.graphQL}`,
+      settings: {
+        'request.credentials': 'include',
+      },
+    }));
 
     // Bind router to API
     this.express.use(this.config.routes.api, this.router);