Setup Auth0 Authentication in Hasura
Hasura can work with any authentication method that can produce a JWT with custom claims. We will explore setting up Auth0, then configuring Hasura to allow it to authenticate our users. Finally we'll modify Auth0 to allow for adding in necessary roles, and claims to identify your user.
Instructor: [0:00] First, we'll sign up for Auth0. Now we have a fresh account. The first thing we'll need to do is get the URL of our account, so it's, code daily, but also it's US region. You can find that here by going to custom domains and seeing that it is code daily US Auth0 or whatever your domain happens to be.
[0:18] Now that we have this we can construct the URL that we can then give to Hasura to authenticate a JWT that comes in. To do that we add a Hasura GraphQL JWT secret. The type will be RS256 and the JWK URL is going to be our domain that we said with this additional extension, well known JWK JSON.
[0:46] If we take a look at this in a browser we can see that it's just going to be a bunch of keys that will allow Hasura to verify and validate tokens that are issued by our Auth0 account. Now that we've added this to our Hasura, we need to start our Hasura back up. We can say, docker compose up. I have alias to D up.
[1:13] It will now create the container and just apply this GraphQL secret. Then we can CD into Hasura and open up the console. Before we can get a JWT to test with Hasura we first need to do a couple things, the first being, users. We have a user here, which is just me.
[1:35] The second is a role. This role will have to line up with your permissions inside of Hasura. If we click, create role, you can create any type of role. We have the name here called user and so when we assign and create a JWT we'll use the user role in Hasura.
[1:58] With a role Auth created we need to then apply that role to the user, so that when they authenticate we can see which roles that they have. You can do that here by going to the user, clicking on roles, and clicking assign roles. But, we already have that role assigned to that user. So, now when that user authenticates we can actually get access to this list of roles.
[2:18] Auth0 allows us to run custom code after various actions by the user. We go to actions and go to flows, the thing that we care about is after the user logs in. Once the user logs in we can then run some custom code called inject Hasura. Those are created over here and we'll take a look at that.
[2:42] On this particular execution whenever a user logs in, it is filled with the roles for this particular user. We can see if the user has any roles, if their email address has been verified. If it has not been, we will deny them access. Otherwise we'll add our custom Hasura claims to the JWT token. If you look here we'll add the JWT with the default role being whatever the first role is.
[3:07] Then the second being the allowed role. So, if the user had more than the user role, maybe a manager role or some other sort of role, then we could allow the user to then select that in our application code. Then additionally we'll parse in a user ID. This user ID will then be crucial for inserting automatic stuff into our database.
[3:32] Before we login we'll need to build out a URL to allow us to login. If we go to applications we have a default app that's automatically created, we will need this client ID. We will additionally need to set up a callback URL. This callback doesn't matter for us in this particular thing, but this will need to be your application's URL for callbacks to receive the token.
[3:56] Now we're ready to login. If we open up a new tab, a new browser, you can see here that we have our domain name with the /authorize. The response type is ID token. This will be our JWT request with the redirect URI that we had set and the client ID of that particular generic default application that Auth0 initializes with.
[4:18] Once I press this I'll be prompted with the login, so I'll go ahead and login. You see up here in the browser we now received an ID token at our callback URL. If we copy this and we go to a site like jwt.io and paste it in, you can now see that our claims our here with the allowed roles, the default role is our first role, and we have a user ID that aligns with our particular user in Auth0.
[4:51] Now, we're ready to check this out inside of Hasura. If we grab our token, we can go into the Hasura console which is now validating against our well known JWKS.JSON. We'll remove the admin secret and we'll set authorization and say bearer, and paste in our token there. Don't worry about these. These are from removing that admin secret. If we click on this decoded JWT we can see that it is a valid token. Then, we can see our Hasura claims as well as other various pieces.