Using the GraphQL Playground with authentication

Get Help and Help Others
1

I’ve marked some graphql queries as @requireAuth. As a result, when I try to run the query in the graphql playground I get an auth error. That makes sense because I am not logged in as a user.

My auth is set up with Netlify. The docs on authentication say:

Simulating a logged-in user through the GraphQL Playground is no picnic though, but we’re working on improving the experience!

but I can’t find any other info. Is this a ‘solved’ problem and, if so, are there docs or a guide available?

2

When invoking the Redwood GraphQL API, you need to send:

  • Authorization header with Bearer <token> with your access token
  • a Header auth-provider with the provider you use like supabase etc. This will be the provider type setup in your app.

If you are using self-hosted dbAuth, then the Bearer <token> then the token is your user id and you’ll also need to set the cookie (which is encypyted).

Typically, I run the app in dev and then inspect the request and copy the headers/cookie and then set those in the GraphQL Playground in the headers section.

To get a good sense of how things work, run your app and watch the requests made when cells do data fetching – that’s the info you’ll need to send.

There’s really no easy way not to set these up without poking a hole through security in development mode – which is a little risky since if you are not careful could leave your production app open.

Also, many of your services will rely of the context being set with a currentUser and authenticating will set that.

Note: Often JWT’s/access tokens will expire, so you may have to re-set these in your playground after some time has expired.

3

Thanks! I am using Netlify and I just had to add the following

image
image1156×448 25.9 KB

3 Likes
4

I had noticed that the GraphQL Playground had effectively become redundant.
This explains why (that is nice to know) but really doesn’t seem to offer a resolution. What was a nice to have feature now is just about useless :rofl: I have no intention of using “Netlify”. While I do support the strict stance on security first by default I get the feeling there should be some way of sending these header requirements to the GraphQL playground after all it is started automatically as part of Redwood (or perhaps an option to turn that off)
I did rather like the playground a thought I would investigate further,

5

Same thing worked for me with auth0 as auth-provider.

7

I feel like I am going nuts here!

There was a super neat command that would generate the entire request header for the graphql playground.

AHA! And there it is!

yarn redwood setup graphiql <provider>

Sauce: Command Line Interface | RedwoodJS Docs

Thank me later.

1 Like
8

What can I do in case of errors? I am currently using dbAuth and configured it as per documentation. Anyone experienced something similar?

$ yarn redwood setup graphiql dbAuth
✖ Require an unique id to generate session cookie                                                                                     
◼ Generating file in src/lib/generateGraphiQLHeader.{js,ts}...                                                                        
◼ Importing generated headers into createGraphQLHandler                                                                               
◼ Installing packages...                                                                                                              
Require an unique id to generate session cookie //<- this is the error message ;(

edit:

I have used:

yarn redwood setup graphiql dbAuth -i "[userId]"

And it worked. It MUST use proper userId from DB. Adding --view will only display it and NOT generate again (even if -i param is provided).

To generate it again use the same command just WITHOUT --view param.

3 Likes