Skip to content

Instantly share code, notes, and snippets.

@iamsaso

iamsaso/index.html

Last active September 21, 2022 11:04
Show Gist options
  • Star 30 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save iamsaso/3c3d728e0049d5b66a2c19b349b7f164 to your computer and use it in GitHub Desktop.
Save iamsaso/3c3d728e0049d5b66a2c19b349b7f164 to your computer and use it in GitHub Desktop.
Download ZIP
GraphiQL with JWT
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
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;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.10.2/graphiql.js"></script>
</head>
<body>
<div class="jwt-token">JWT Token <input id="jwt-token" placeholder="JWT Token goes here"></div>
<div id="graphiql">Loading...</div>
<script>
var search = window.location.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',
headers,
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.
ReactDOM.render(
React.createElement(GraphiQL, {
fetcher: graphQLFetcher,
}),
document.getElementById('graphiql')
);
</script>
</body>
</html>
@victorcastro
Copy link

victorcastro commented Dec 5, 2017 •
edited

Sugiero esta mejora

Style

<style>
            .jwt-token input {
                display: inline-block;
                width: 80%;
                padding: 5px;
                border: 0px;
                margin-left: 5px;
                font-size: 12px;
                color: #777777;
                border-radius: 3px;
            }

            .jwt-token button#remove-token{
                background: linear-gradient(#f9f9f9,#ececec);
                border-radius: 3px;
                box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.7), inset 0 1px #fff;
                color: #555;
                border: 0px;
                margin: 0 5px;
                padding: 3px 11px 5px;
            }
</style>

HTML

<div `class="jwt-token">`
     <label>Token</label>
     <input id="jwt-token" placeholder="Paste token (without Bearer)">
     <button id="remove-token">✖</button>
</div>

Javascript

<script>
var remove_token = document.getElementById('remove-token');
remove_token.onclick = function(){
      document.getElementById('jwt-token').value = localStorage.removeItem('graphiql:jwtToken');
}
</script>

@demeralde
Copy link

Works for me, but I'm using django-graphql-jwt and had to replace 'Bearer' in the Authorization header with 'JWT'

@blowsie
Copy link

blowsie commented Feb 3, 2020

Storing JWT in localstorage is a bad idea :)

@romaad
Copy link

romaad commented Jul 7, 2020

Storing JWT in localstorage is a bad idea :)

You know the difference between testing and prod right ?

@blowsie
Copy link

blowsie commented Jul 8, 2020

Storing JWT in localstorage is a bad idea :)

You know the difference between testing and prod right ?

Yes, and?

@craigmit
Copy link

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

Made a version using flexbox, which fixes this:
https://gist.github.com/craigmit/44499818664fc34083f2aa96069f0636

image

@romaad
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

@saminwankwo
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