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

Part 2/3

This is the second part of a series of articles which will explain how to set up Auth0 for an example Quote App which we will build using Dgraph. If you’re new to this, you might want to read part 1 to know what is gyong on.

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 Auth0 and know how to work with it, you can safely skip this part.

If you were following part 1 of this series, at the moment your GraphQL endpoint (your Quotes and Authors) is not publicly queryable. Since you are probably interested in building an application that will let your users query the quotes from their browser, we will have to change this. Unfortunately, if you set Quote and Author public, anyone can add, update, delete and query your nodes!

You could of course build your own authentication server but why inventing the wheel again if something awesome like Auth0 is already out there and, on top of that, works perfectly together with Dgraph? You won’t have to deal with certificates and all sorts of security vulnerabilities — Auth0 takes care of that! To put it in the words of Auth0

Auth0 is a flexible, drop-in solution to add authentication and authorisation services to your applications. Your team and organization can avoid the cost, time, and risk that come with building your own solution to authenticate and authorize users.

Enough said I guess, let’s set up an account — it’s free!

Go to Auth0 and signup. Select the private option and opt out from all the marketing emails. Click Next and we are ready 🚀 — how easy was that?

After registering with your email, select “Personal” and opt out from the marketing mails.

You will be redirected to your Dashboard which lets you do all sorts of stuff. You will also be granted a 22-day trial period to try out all the things Auth0 can do before you end up with the free account. But no worries Auth0 offers a lot of features completely for free and it’s definitely enough for our little experiment.

We are now ready to setup an application that is appropriate for our needs. Navigate to Applications > Applications and click on the Default app which is already there. This is a generic application, meaning that it is not set up for a particular use yet. Since I assume that you are interested in creating a web application with a modern framework (eg. React), click on QuickStart and select Single-Page App.

In the follow-up screen you can choose in between Angular, JavaScript, React, and Vue — it does not really matter which one of them you choose here but if you select the one you are working with later on, then you will get templates and code examples of how to integrate Auth0 into your application. You can always change this later.

When clicking on the default app Auth0 has generated for you, click on “Quick Start” and select “Singe-Page App”.

Once this is done let’s switch to Settings and give our app the name Quote App. Obviously this can be any other name as well.

Give you app a name.

Next up, scroll down to Application Properties, enter a URL for a logo if you wish and select Single Page Application from the Application Type dropdown.

In the Application Properties section, select “Single Page Application” from the “Application Type” dropdown.

Now, in the Application URI’s section, add your localhost to the Allowed Callback URLs list, Allowed Web Origins and Allowed Origins (CORS). If you want to allow your app to logout users too, you need to add your local dev endpoint to the Allowed Logout URLs as well. In case of a React application this is usually http://localhost:3000 . This is necessary in order to allow you to use the Auth0 SDK in your frontend application and allow you to test logins to your app while still developing.

Add your local development endpoint to the Allowed Callback URIs.

Finally, scroll all the way down (if you want you can quickly stop at Refresh Token Rotation and switch on the Rotation — but this is not mandatory) and click Save Changes.

Our entire project would make no sense if we don’t have at least one user which is allowed to login into our application. So let’s set one up right here from our dashboard. Go to User Management > Users and click + Create User. Give the user an email address (this can be any but if you want to also test password resets later on, you might want to use a real email address) and a password. The user also needs a Connection, which is basically the database where the user data is stored. Thanks to Auth0 we already have a default connection Username-Password-Authentication which has been generated on account creation. There are lots of other connection you can use (eg. there’s also a default Google Social Connection) but let’s stick with that one.

To add a user enter an email address and a password.

If you get an error that your password is too weak here, either select a harder password or change the password strength in Authentication > Database > Username-Password-Authentication > Password Policy .

In case you want to change the password policy for your “Username-Password-Authentication” connection.

Good job! We’re almost done too. This user is not authorized to use our Quote App yet but once this user has performed his first login, the user gets automatically signed up for our application (this feature can also be disabled under Authentication > Database > Username-Password-Authentication > Settings > Disable Sign Ups ).

I have created a CodeSandbox example where you can test your very own setup. Just replace your Auth0 domain and client ID for your Quote application in the index.js

// part of index.js<Auth0Provider
domain=”<your-auth0-domain>”
clientId=”<your-client-id>”
redirectUri={window.location.origin}
>

You can find both, the domain and client ID in your Auth0 dashboard under Applications > Quote App > Settings .

We’re done! I hope this has all worked out for you! I let you do it to experiment a bit with your frontend application. In part 3 of this series, we will bring Dgraph and Auth0 together, which will allow us to have a secure GraphQL endpoint for our demo application.

Leave a Comment