Graphiql JWT Support

Graphiql JWT Support.md

Graphiql JWT Support

This gist inspried by sasso's comment and gist.

Hot to use

Step 1

Edit index.html, add script after #graphiql element as below.

<div id="graphiql">Loading...</div>
<script src="https://gist.githack.com/wake/d1d64d1170fa860db5e9732a2464c626/raw/910c830e670f89148ef75cc739829dcf35c0e720/graphiql-jwt-support.js"></script>

Step 2

Find fetcher: graphQLFetcher in index.html (near by line 137) , replace with fetcher: graphQLJWTFetcher('{{ route('graphql.query') }}').

Step 3

Enjoy it!

graphiql-jwt-support.js

  var graphiql = document.getElementById ('graphiql')
    , jwtBlock = document.createElement ('div')
    , jwtInput = document.createElement ('input')
    , jwtClear = document.createElement ('button')
    ;

  jwtBlock.innerText = 'JWT Token ';
  jwtBlock.style.background = "linear-gradient(#f7f7f7, #e2e2e2)";
  jwtBlock.style.borderBottom = "1px solid #d0d0d0";
  jwtBlock.style.fontFamily = "system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif";
  jwtBlock.style.padding = "7px 14px 6px";
  jwtBlock.style.fontSize = "14px";

  jwtInput.placeholder = 'Token goes here';
  jwtInput.style.marginLeft = '2px';
  jwtInput.style.padding = '2px';
  jwtInput.value = localStorage.getItem ('graphiql:jwtToken');

  jwtClear.innerText = 'Clear';
  jwtClear.style.border = "none";
  jwtClear.style.fontFamily = "system, -apple-system, 'San Francisco', '.SFNSDisplay-Regular', 'Segoe UI', Segoe, 'Segoe WP', 'Helvetica Neue', helvetica, 'Lucida Grande', arial, sans-serif";
  jwtClear.style.fontSize = "14px";
  jwtClear.style.background = "linear-gradient(#f9f9f9, #ececec)";
  jwtClear.style.borderRadius = "3px";
  jwtClear.style.boxShadow = "inset 0 0 0 1px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255, 0.7), inset 0 1px #fff";
  jwtClear.style.color = "#555";
  jwtClear.style.cursor = "pointer";
  jwtClear.style.display = "inline-block";
  jwtClear.style.margin = "0 5px";
  jwtClear.style.padding = "3px 11px 5px";
  jwtClear.style.textDecoration = "none";
  jwtClear.style.textOverflow = "ellipsis";
  jwtClear.style.whiteSpace = "nowrap";
  jwtClear.style.maxWidth = "150px";
  jwtClear.onclick = function () {
    localStorage.setItem ('graphiql:jwtToken', '');
    jwtInput.value = '';
  };

  jwtBlock.appendChild (jwtInput);
  jwtBlock.appendChild (jwtClear);

  graphiql.parentNode.insertBefore (jwtBlock, graphiql);

  // graphQLFetcher + JWT
  function graphQLJWTFetcher (url) {
    return function (graphQLParams) {

      const jwtToken = jwtInput.value;

      localStorage.setItem ('graphiql:jwtToken', jwtToken);

      let headers = {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      };

      if (jwtToken)
        headers.Authorization = `Bearer ${jwtToken}`;

      return fetch (url, {
        method: 'post',
        headers: 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;
        }
      });
    }
  }