Preserve auth header for playground

api/package.json

@@ -17,8 +17,10 @@
     "dependencies": {
         "@apollo/server": "^4.5.0",
         "@prisma/client": "^4.11.0",
+        "@types/cookie-parser": "^1.4.3",
         "bcrypt": "^5.1.0",
         "body-parser": "^1.20.2",
+        "cookie-parser": "^1.4.6",
         "cors": "^2.8.5",
         "dotenv": "^16.0.3",
         "express": "^4.18.2",

api/src/app.ts

@@ -1,6 +1,7 @@
 import type { Express } from 'express';
 import express from 'express';
 import expressPlayground from 'graphql-playground-middleware-express';
+import cookierParser from 'cookie-parser';
 import { getChildLogger } from './logger';
 import prisma from './database';
 
@@ -31,12 +32,18 @@ export const createApp = (): Express => {
 
   app.get(
     '/',
-    expressPlayground({
-      endpoint: '/api/graphql',
-      settings: {
-        'editor.theme': 'light',
-      },
-    }),
+    cookierParser(undefined, { decode: (value: string) => value }),
+    (req, res, next) => {
+      const globalHeaders = req.cookies['gql:default'];
+      const playgroundMiddleware = expressPlayground({
+        endpoint: '/api/graphql',
+        settings: {
+          'editor.theme': 'light',
+          'request.globalHeaders': { Authorization: `Bearer ${globalHeaders}` },
+        },
+      });
+      playgroundMiddleware(req, res, next);
+    },
   );
 
   return app;