Using Authorizer with Hasura
Tags: hasura, oauth, opensource, graphql
Published: 2022-04-19 03:42:01

[Hasura](https://hasura.io/) gives you instant GraphQL / Rest API on top of SQL databases like Postgres and MySQL.

It takes away the pain of writing basic CRUD (Create, Read, Update, Delete) APIS. It also gives column and row level authorization layer using JWT tokens. This helps in having secured APIs without writing any backend code.

On the other hand [Authorizer](https://authorizer.dev) is database independent open source authentication and authorization solution built using GraphQL. You can bring in your database and have authentication layer ready for your users in seconds. Motive of Authorizer is to save your user data in your database without having the pain of developing highly secure auth system.

In technical terms you get an JWT token with authorizer.dev which you can use with Hasura to verify the permission for a given user.

### You can check a video tutorial for same

{% youtube IyGwikTpPHM %}
 
Now you get following things:

- GraphQL API out of the box with Hasura for your database
- Authentication with Authorizer
- Authorization (Role based access) with Hasura auth system
- Secure session management with Authorizer
- Multiple login recipes with Authorizer
- And your data stays within in your database

Here is how the broader picture looks like

![hasur-authorizer-architecture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vbjmddne9v6mtwu8344j.png)

Also [authorizer-react]([https://www.npmjs.com/package/@authorizerdev/authorizer-react](https://www.npmjs.com/package/@authorizerdev/authorizer-react)) / [authorizer-js]([https://www.npmjs.com/package/@authorizerdev/authorizer-js](https://www.npmjs.com/package/@authorizerdev/authorizer-js)) takes away the pain of 

- Securely managing JWT token
- Creating login / signup page
- Creating forgot password page


Isn’t that great! all in one place and under your control 🎉

No more need to pay 3rd party applications which can own your data and you might have to write some logic to stitch the data with your database.

![gif](https://media.giphy.com/media/lJ0JGfNBrRWJVCRChd/giphy-downsized.gif)

## Here are 5 simple steps to achieve this

### Step 1: Deploy Authorizer instance

Deploy production ready Authorizer instance using one click deployment options available below

| **Infra provider** |                                                                                                                **One-click link**                                                                                                                |               **Additional information**               |
| :----------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------: |
|    Railway.app     | <a target="_blank" href="https://railway.app/new/template?template=https://github.com/authorizerdev/authorizer-railway&amp;plugins=postgresql,redis"><img src="https://railway.app/button.svg" style="height: 44px" alt="Deploy on Railway"></a> | [docs](https://docs.authorizer.dev/deployment/railway) |
|       Heroku       |             <a target="_blank" href="https://heroku.com/deploy?template=https://github.com/authorizerdev/authorizer-heroku"><img src="https://www.herokucdn.com/deploy/button.svg" alt="Deploy to Heroku" style="height: 44px !important;"></a>             | [docs](https://docs.authorizer.dev/deployment/heroku)  |
|       Render       |                     <a target="_blank" href="https://render.com/deploy?repo=https://github.com/authorizerdev/authorizer-render"><img alt="render button" src="https://render.com/images/deploy-to-render-button.svg" /></a>                      | [docs](https://docs.authorizer.dev/deployment/render)  |

For more information check [docs](https://docs.authorizer.dev/getting-started/)

### Step 2: Setup Instance

- Open authorizer instance endpoint in browser
- Signup with a secure password
- Configure social logins / smtp server and other environment variables based on your needs

For more information please check [docs](https://docs.authorizer.dev/core/env/)

### Step 3: Setup Hasura Instance

- Signup to https://cloud.hasura.io/
- Create a free tier project

### Step 4: Configure Database with Hasura

- Open the dashboard of hasura cloud ( go to https://cloud.hasura.io/)
- Click on settings icon of your hasura project ( which is in top-right corner )
- Go to Env vars section

Check the [hasura docs](https://hasura.io/docs/latest/graphql/cloud/getting-started/index/) for more information.

> Note if you have used single click deployment option for authorizer you can get database URL from respective platform's env sections.

### Step 5: Configure JWT token Authorization Script

In order for Hasura to authorize a user, JWT token needs to have specific keys, you can add those keys by modifying JWT token script in your Authorizer Dashboard.

Example:

```js
function(user,tokenPayload) {
  var data = tokenPayload;
  data['https://hasura.io/jwt/claims'] = {
    'x-hasura-user-id': user.id,
    'x-hasura-default-role': tokenPayload.allowed_roles[0],
    'x-hasura-allowed-roles': user.roles
  }

  return data;
}
```

![sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45d40ae1dz21ppox82pz.png)
 

Once user login they get `id_token` which should be used with hasura queries as `Authorization: Bearer ID_TOKEN`. This will help in making Authorized requests.

You can configure access control for various roles that your application needs. You can also configure same roles in your authorizer dashboard.

For more information on access control check [hasura docs](https://hasura.io/docs/latest/graphql/core/auth/authorization/basics/)

You can also stitch Authorizer Graphql Endpoint with Hasura Remote Schema, that way you can have single endpoint for all your GraphQL queries / mutations.

For more information check:

Site: https://authorizer.dev
Docs: https://docs.authorizer.dev
Youtube: https://youtube.com/playlist?list=PLSQGbUjHc6bpaAgCiQPzNxiUPr7SkDAFR
Github: https://github.com/authorizerdev/authorizer
React-SDK: https://github.com/authorizerdev/authorizer-react
JS-SDK: https://github.com/authorizerdev/authorizer-js
Join Discord: https://discord.gg/Zv2D5h6kkK