How to deploy Hasura GraphQL engine to Heroku

Habdul Hazeez - Sep 22 '21 - - Dev Community

Introduction

Hasura gives you a GraphQL Application Programming Interface (API) that you can point to your data sources and Heroku provides you a platform that you can host such data sources.

In this article, you'll learn how to deploy a Hasura GraphQL engine on Heroku, and how to secure it from unauthorized access.

First steps

Sign up for an account on Heroku, if you already have an account, you should log in.

Heroku login page on Firefox 92

Once you are logged in, open another tab and navigate to Deploy Hasura with a new Postgres DB on Hasura docs, scroll down until you locate a button which reads "Deploy on Heroku".

Deploy Hasura to Heroku on Hasura dics

Click on it, this should redirect you to Heroku with an Hasura engine ready to be deployed and it'll point to a Postgres database hosted on Heroku

Hasura Engine ready for deployment on Heroku

Fill in your desired details, and click on Deploy app.

It'll take some minutes, and you'll notice the build log.

Build log of Hasura on Heroku

if all goes well, you should have a screen similar to the image below.

Successful deployment if Hasura

Click on View, this will redirect you to a web page console on Hasura, where you can interact with your database hosted on Heroku.

Hasura web page console on Firefox 92

Now, you can perform your desired operation on the database and you also get a nice GraphiQL interface that allows you to interact with your data.

But, you are not done.

Copy the URL of your app and open it in another browser, you'll have access to the Hasura engine without authentication.

Hasura web console in Google Chrome 93
The Hasura GraphQL engine on Chrome

Leave this browser tab open, and let's fix this.

How To Secure Hasura GraphQL Endpoint

Navigate back to the browser that you used to deploy Hasura (in my case it's Firefox), and click on Manage App.

Hasura successful deployment options on Heroku with the option

Locate the Settings tab, scroll down and locate Config Vars and click on Reveal Config Vars

Reveal Config Vars on Heroku

Now, you'll need to add a new KEY and VALUE. This key should be named HASURA_GRAPHQL_ADMIN_SECRET and Its value will be the password that you'll use to log in to your Hasura instance.

New admin secret added to heroku

Click on Add.

Now, navigate to the other browser where you initially logged in without authentication, try navigating to another page, or refresh the page.

You'll be greeted with a login screen.

Hasura Login Screen on Chrome 93

Enter the value of the HASURA_GRAPHQL_ADMIN_SECRET that you saved on Heroku, if it's correct you should have access.

You'll also notice there is a new key under Request Headers called x-hasura-admin-secret.

An authenticated user logged in to a Hasura Web console

Conclusion

This article explained how to deploy an Hasura instance on Heroku and how to secure it using an admin secret that will prevent unauthorized access.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .