Published in

Accessing GraphiQL over a JWT protected route in ExpressJS

If you’ve set up a GraphQL endpoint, protected with a JWT and you want to use GraphiQL for local development, here you go…

Accessing /graphql without JWT

Step #1

Enable bodyParser.json() middleware in your Express app. This is required for parsing JSON posted by GraphiQL.

const express = require('express')const bodyParser = require('body-parser')const app = express()if (process.env.NODE_ENV !== 'production') {// only used for accessing Graphiql with JWT auth, during developmentapp.use(bodyParser.json())}...

Step #2

Download ModHeader Google Chrome extension for sending custom HTTP headers along with your requests.

Step #3

Obtain a JWT token which can be used for authentication.

Step #4

4.1 Visit your protected GraphQL endpoint in Chrome. It will probably throw an Unauthorized error (if you are using PassportJS) or something similar.

4.2 Click on the ModHeader icon and paste in your token like the following. Make sure the Authorization header is ticked.

ModHeader with JWT token

4.3 Try Reloading.

If everything works as expected, you’ll get to see the GraphiQL screen.

Recommend this post if the trick worked for you. Consider subscribing if you are into software development.



Notes on Software Engineering, DevOps & Cloud

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rajat Saxena

Rajat Saxena

Software Engineer; Builds Internet Based Businesses & Apps; Solopreneur