Securing Your GraphQL Endpoint With Dgraph and Auth0 — Part 1 | by Flo Ragossnig | Apr, 2022

Setting up Dgraph

This is the first part of a series of articles which will explain how to set up Dgraph with an example Quote Application.

The final goal is establishing a secure GraphQL endpoint where your frontend application and backend scripts can query and mutate data via JWT. We will go through all the necessary steps with setting up Dgraph, Auth0 and Dgraph with Auth0 with the example of a simple application. If you have already set up Dgraph and know how to work with it, you can safely skip this part.

With the rise of the NoSQL movement, a variety of products has appeared in the product catalog of Big Tech — Google GCP, Amazon AWS, Microsoft Azure — they all have seen the potential of storing data in aa new, unorthodox way. Flexibility, potential scale and ease of use led developers all over the world to create an inexorable wave of new technology.

GraphQL experienced kind of the same pattern. Since more and more applications were becoming frontend heavy, the need for developers to develop and maintain those applications became more and more important.

But since no one who landed at this article, wants to read an essay of how Dgraph came together, I will leave it here and continue with the actual task. However, if one of you wants to know more, check @matt tanner’s article over at the Dgraph blog.

Dgraph so far is the only real GraphQL database out there and thus, in my opinion, a must have for web development in the near and semi-far future. But before you give them all your money, let us set up a free test-account to see for yourself if Dgraph will be the tool of your choice too!

After you have signed up you should get redirected to your admin interface, where you can either do the Interactive Tutorial or straight away Launch a backend. Since developers are usually in a rush, let’s skip the tutorial and launch our backend right away.

Redirect after you have signed up to Dgraph. Click on “Launch a backend” to get started.

We now land on the cluster selection (the page where Dgraph wants you to spend some money), where we select the Free shared cluster option. This won’t give you much juice (1MB data transfer per day and a storage of 25MB) but it’ll be more than enough for what we are going to do. You can also choose a name for your backend — I have chosen Test Quotes — but you can name it whatever you want. Ideally you want to set the cluster region to somwhere near you, but that’s also not a must since we’re only testing. Although, if you are planning to go for a paid version later on, you might wanna choose the appropriate location now. Click Launch and we are ready to go 🚀

Launch a new backend. Click on “Free” to get started.

You now see quite a few things but actually most of it is unimportant right now. Let’s start with some basic setup we need for later. Since we are planning to run some queries from a node environment, we need a Client Key for our (non publicly accessible) nodes. Go to Settings > API Keys > Create New and select Client. Let’s give it the name Client Key and click Create.

Save the key somewhere! It won’t be shown again!

Navigate to Settings > API Keys > Create New to generate a Client Key.

Add a schema

Next up let’s create the schema! I won’t go into detail of how to write GraphQL schemata, so if you need some more information here I’d suggest starting at the official GraphQL website. To create the schema simply click on Schema in the nav tabs menu. Make sure GraphQL s´Schema is selected up top (DQL is Dgraph’s own query language and something for another blog post). Once here we can start writing our nodes which we later want to query.

We want to build a backend that allows us to store quotes and their authors. Since we want to keep it as simple as possible, the Quote only has a field text which holds the text form of the quote and a field Author which links the author of the quote to the quote. The Author only has a field name which represents the full name of the author. The id fields are necessary to be able to run queries and mutations against this nodes. The exclamation marks denote that the field is mandatory. Hit Deploy to deploy the schema to your backend.

// Quote
type Quote {
id: ID!
text: String!
author: Author!
}
// Author
type Author {
id: ID!
name: String!
}
Start writing your first schema in Scheme > GraphQL Schema.

Once your schema is, Dgraph has automatically created a ton of resolvers to manipulate your data. If you want to know what Dgraph did you can explore the stuff in GraphQL > Explorer. While we are here let’s add our first data. Start typing mutation in the center field followed by any name which you wanna give this mutation (I have chosen AddQuote ), then fill in the fields on the right. Make sure you have filled all the mandatory fields, which are:

Also make sure you have numUids selected, which tells you the amount of touched nodes during a query/mutation. If numUids: 0, something went wrong. If you just want to copy and paste my quote, then go ahead.

mutation AddQuote {
addQuote(
input: {
text: “Before you marry a person, you should first make them use a computer with slow Internet to see who they really are.”,
author: {name: “Will Ferrell”}}
) {
numUids
}
}
Run a mutation to add a quote plus its corresponding author to the database.

Run a query and check what’s in the database

It’s time to check if the mutation has worked! Start typing query followed by any name (I have chosen QueryQuote) and then queryQuote to get all quotes plus the corresponding author. Add another query, eg. QueryAuthor , to our task list. By clicking the ▶️ button on top you will be forced to select the task (let’s select QeryQuote ) and check the outcome.

Finally check your database entries by creating to queries (one for Quote and one for Author).

As you can see, you can also query Authors only too. Since there is no connection between the Author and the Quote, running an Author query will not give you any information about his quotes.

There is a ton of things you can do with GraphQL and Dgraph but for the sake of simplicity, let’s stop here. In part 2 of this series, we will set up Auth0 to get you going with securing your Dgraph endpoint.

Leave a Comment