Securing Graphiql with firebase login

In Firebase auth for graphql clients I covered how to use firebase client side auth to lock down your Apollo Graphql server. Developers and other admins are probably going to need to use the Graphiql tool too for ad hoc querying and troubleshooting. The problem is, you don’t want to leave that publicly open, and yet the graphiql standard app doesn’t have any auth built in.
Luckily, you can put a simple wrapper around graphiql which will insist on authentication, and once authenticated you can use the technique described in Firebase auth for graphql clients to accept graphiql connections only from specific users. As a further lockdown, you can lock down the production API not to allow Introspection queries and turn off graphql support, and have a staging instance of the API to deal with Graphiql requests.

Tech

My client side UI is entirely in Vue, but it turns out that the graphiql plug in is react based, so I’ll write this one in React. Luckily Google have an example firebase auth for react, so I can pretty much use that as a starting point. For a limited tech user base, it doesn’t need to be fancy, and I can use the same firebase auth database as for the main Vue UI. I’m also using Material-ui for React, but will just stick with the Google example for the Login page styling. The simplest way to build a react act from scratch is to use this template, and then get rid of what you dont need, then modify as follows.

The source

Index.html

app.css
firebaseui-styling.global

index.js

secrets.js

dependencies

Giql.jsx
This is all there is to the app – with the uri and port of the API set appropriately. For testing I’m attaching to a local version of the API. In real life, I’d be using a staging instance. Of interest here
  • Firebase provide a simple prewritten UI. It’s not that pretty, but it’ll do for this purpose. Most of the auth code is taken from the Google example.
  • firebaseAuth() is used to create a userID token that the api already knows how to decode and validate as desribed in Firebase auth for graphql clients
  • The graphiql wrapper is pretty minimal, with the only tweak being to modify the GraphIql Logo component to hold the logged in user avatar instead. This is clickable to give a way to sign off if necessary.

Screenshot

And here’s what it looks like when logged in – Graphiql with firebase auth!