Improve altair experience (#50)

* Automatically set Auth headers and add preRQ script

- Automatically install the GQL explorer plugin
- Update Altair version

* Update login script to only login when the JWT expires

- Move Login script to external file
- Exclude `static/` directory from esLint

.eslintrc.cjs

@@ -1,4 +1,5 @@
 module.exports = {
+  ignorePatterns: ["static/*"],
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',

package.json

@@ -17,7 +17,7 @@
     "start": "node dist/main.js"
   },
   "dependencies": {
-    "altair-express-middleware": "^5.0.28",
+    "altair-express-middleware": "^5.2.11",
     "cors": "^2.8.5",
     "express": "^4.18.2",
     "express-rate-limit": "^6.7.0",

src/packages/api-playground/api-playground.ts

@@ -1,9 +1,34 @@
 import { altairExpress } from 'altair-express-middleware';
 import type { Express } from 'express';
 import { getEnv } from '../../env.js';
+import { readFileSync } from 'fs';
 
 export default (app: Express) => {
   const { GQL_API_URL: endpointURL, GQL_API_WS_URL: subscriptionsEndpoint } = getEnv();
   const initialQuery = '{ plan { id name } }';
-  app.use('/api-playground', altairExpress({ endpointURL, initialQuery, subscriptionsEndpoint }));
+  const initialHeaders = { Authorization: 'Bearer {{user}}', 'x-hasura-role': 'viewer' };
+  const initialPreRequestScript = readFileSync('static/api-playground/pre-request-script.js').toString();
+  const initialSettings = {
+    addQueryDepthLimit: 5,
+    enableExperimental: true,
+    'plugin.list': ['altair-graphql-plugin-graphql-explorer'],
+    'request.withCredentials': true,
+    'schema.reloadOnStart': true,
+    'script.allowedCookies': ['user'],
+    tabSize: 2,
+    theme: 'dracula',
+  };
+
+  app.use(
+    '/api-playground',
+    altairExpress({
+      disableAccount: true,
+      endpointURL,
+      initialHeaders,
+      initialPreRequestScript,
+      initialQuery,
+      initialSettings,
+      subscriptionsEndpoint,
+    }),
+  );
 };

static/api-playground/pre-request-script.js

@@ -0,0 +1,24 @@
+const nowInSeconds = () => Date.now() / 1000;
+const tokenExpiry = await altair.storage.get('token_exp') || 0;
+
+if (nowInSeconds() >= Number(tokenExpiry)) {
+  // Fetch a new token from the Gateway
+  const res = await altair.helpers.request(
+    'POST',
+    '/auth/login', // AUTH ENDPOINT OF THE DEPLOYMENT
+    {
+      body: { username: '<YOUR_AERIE_USERNAME>', password: '<YOUR_AERIE_PASSWORD>' }, // CREDENTIALS TO LOG IN AS
+      headers: { 'Content-Type': 'application/json' }
+    });
+  if(res.success) {
+    const token = res.token;
+    await altair.storage.set('token', token);
+    // Set JWT expiry
+    const atob = await altair.importModule('atob');
+    const body = JSON.parse(atob(token.split('.')[1]));
+    await altair.storage.set('token_exp', body.exp);
+  } else { altair.log(res); }
+}
+// Set the token in the environment
+const token = await altair.storage.get('token');
+altair.helpers.setEnvironment('user', token);