how to use graphiql when route are secured?

Question

i have an application based on api-platform with secured route using JWT (and the LexikJWTBundle). With the Swagger interface it’s easy to call secured route providing a valid bearer. But with GraphiQL i don’t see anything about security so when a call a secured route it fails.

Any idea ? or shall we prevent graphiql usage in dev ?

Thanks

I don't think GraphiQL supports auth/custom headers. You could also use browser extensions to add custom headers. — Jun 26, 2018 at 17:02
i didn't thought at extension, it's not universal, but i could give it a try — Jun 27, 2018 at 12:01

David MazeDavid Maze 131k29 gold badges175 silver badges215 bronze badges · Accepted Answer · 2018-07-06 13:59:21Z

If you’re using the standalone GraphiQL app, there’s an “Edit HTTP Headers” button at the top-right corner. Click that, click “+ Add Header”, and enter a Header name “Authorization” and Header value “Bearer eyJh…” where the last part is your access token.

For GraphiQL embedded in a Web site, it’s often configured so that it targets the same site, and whatever authentication you need to reach the GraphQL endpoint is the same authentication you need to reach the GraphiQL app. There’s not specifically a path to add custom headers here, but the embedding application server might have a way to provide them.

Update as of August 2021 – the "Request Headers" button may be on the bottom left of the web browser interface and might not look much like a button. This is using express-graphql. It took me a minute to find it. — Aug 4, 2021 at 18:48
Write { "Authorization": "Bearer eyJ..." } in the HTTP headers section. — Sep 22, 2021 at 9:36
I cant load graphiql without getting the error though? Is there a way around that so I can even enter the header override? — Jan 30, 2022 at 8:32

score 0 · Accepted Answer · 2023-09-01 14:16:30Z

The primary question is answered, but I found this question when looking for how to automatically set the Authorization header based on an authentication request. GraphiQL has a preflight script option in settings where you can make an authentication request and set it into a variable to be used in the shared headers.

It wasn’t obvious to me where to find this. It is available in the settings menu within the explorer tab, not the connection settings.

how to use graphiql when route are secured?