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. — Iwan Wijaya, Jun 26 '18 at 17:02
i didn't thought at extension, it's not universal, but i could give it a try — Rebolon, Jun 27 '18 at 12:01

score 8 · Accepted Answer · answered Jul 06 '18 at 13:59

8

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.

answered Jul 06 '18 at 13:59

David Maze

130,717
29
175
215

1

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. – Nik P Aug 04 '21 at 18:48
2

Write `{ "Authorization": "Bearer eyJ..." }` in the HTTP headers section. – UaT Sep 22 '21 at 09:36
I cant load graphiql without getting the error though? Is there a way around that so I can even enter the header override? – user2445793 Jan 30 '22 at 08:32

Galen Howlett · Answer 2 · 2023-09-01T14:16:30.900

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?

2 Answers2