How to use Graphiql when /graphql protected by JWT token (authorization header)

[sulliwane]

My /graphql route is protected by JWT token, so every HTTP request needs to set:

 headers: {
      Authorization: 'Bearer ' + token
    }

To get through the authentication middleware and hit /graphql.

How to manage this authentication step when using graphiql ? graphiql is so convenient, it's a pity to not use it :(
thanks for any suggestion!

[KyleAMathews]

Download @skevy's https://github.com/skevy/graphiql-app and your header. I have the same setup as you and use this daily.

[sulliwane]

@KyleAMathews awesome, I will give it a shot (my main computer is linux distro though...). thanks

[skevy]

@sulliwane - I'm sure it would compile on Linux - just haven't tried.

[sulliwane]

I just tried npm install && npm start under linux (ubuntu 14.04) and graphiql-app-V0.3.1, but got blank screen, see here: skevy/graphiql-app#10

I close this issue as I have the answer now.

[cancan101]

Any reason to close this issue and opposed to adding the header editor to the (main) graphiql?

[sulliwane]

No reason, indeed it would be nice if we could set the header directly into graphiql app. (I'm using graphiql-app right now.)

[leebyron]

GraphiQL is generic and doesn't know anything about the network! This is great because you can configure it to use whatever your GraphQL server uses. This is how @skevy was able to build a standalone app version of GraphiQL.

I suggest taking a look at the example - where you see graphQLFetcher is where you can configure your network fetching however you like, in your case by including any authentication details that may be necessary.

Often, when your GraphQL endpoint is behind a authorization feature like this, it is common to expose the GraphiQL tool via a different endpoint on your server.

[MarkAndrewJohnson]

@leebyron I would agree being generic is a reason not to automate everything. I would think, though, that being generic is exactly why it DOES makes sense to have a field allowing custom headers to be set manually by the user!

I'm also unclear as to your last statement. It doesn't avoid the need for auth tokens to be pushed around.

[eugenehp]

@MarkAndrewJohnson @sulliwane @cancan101 @KyleAMathews Guys, it would be interesting to get your opinion on this graphql/express-graphql#101