Skip to content

Instantly share code, notes, and snippets.

Last active September 21, 2022 11:04
Show Gist options
  • Save iamsaso/3c3d728e0049d5b66a2c19b349b7f164 to your computer and use it in GitHub Desktop.
Save iamsaso/3c3d728e0049d5b66a2c19b349b7f164 to your computer and use it in GitHub Desktop.
GraphiQL with JWT
<!DOCTYPE html>
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
#graphiql {
height: 100vh;
.jwt-token {
background: linear-gradient(#f7f7f7, #e2e2e2);
border-bottom: 1px solid #d0d0d0;
font-family: system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif;
padding: 7px 14px 6px;
font-size: 14px;
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<div class="jwt-token">JWT Token <input id="jwt-token" placeholder="JWT Token goes here"></div>
<div id="graphiql">Loading...</div>
var search =;
var parameters = {};
document.getElementById('jwt-token').value = localStorage.getItem('graphiql:jwtToken');
function graphQLFetcher(graphQLParams) {
const jwtToken = document.getElementById('jwt-token').value;
let headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
if (jwtToken) {
localStorage.setItem('graphiql:jwtToken', jwtToken);
headers = {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': jwtToken ? `Bearer ${jwtToken}` : null
return fetch('/query', {
method: 'post',
body: JSON.stringify(graphQLParams),
credentials: 'include',
}).then(function (response) {
return response.text();
}).then(function (responseBody) {
try {
return JSON.parse(responseBody);
} catch (error) {
return responseBody;
// Render <GraphiQL /> into the body.
// See the README in the top level of this module to learn more about
// how you can customize GraphiQL by providing different values or
// additional child elements.
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
Copy link

Works great. Except the graphiql screen falls off the bottom.

Made a version using flexbox, which fixes this:


Copy link

romaad commented Feb 18, 2021

Storing JWT in localstorage is a bad idea :)

You know the difference between testing and prod right ?

Yes, and?

It's not a bad idea if you're testing

Copy link

how do you do the jwt token input box on your graphql playground, i have been trying to test

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment