Back to Blog
Company

How to Add Authentication to Hasura

17 February 2022
Transparent lines
Banner of How to Add Authentication to Hasura

Hasura and GraphQL are amazing, but setting up authentication to work with Hasura can be difficult.

In this article you'll learn how to add authentication to Hasura, so you can sign in users and start using Hasura permissions in your GraphQL API.

Before we continue, let's just set the context.

Hasura has Authorization (which is different from authentication) built in to handle permissions and access control for your GraphQL API.

But Authentication, which handles users, sign-in flow, tokens, etc, is not handled by Hasura. Instead, you need to have your own authentication service that handles all that.

Building such a service is not easy.

But we have a solution for you: Hasura Auth.

Hasura Auth is an open-source service to handle authentication with Hasura. With Hasura Auth you can sign in users and manage roles. Hasura Auth works specifically for Hasura and its permission system.

To get started quickly with authentication for Hasura we recommend creating a Nhost account and creating a Nhost app. At Nhost, we automatically provision a backend for you with Postgres, Hasura, and Hasura Auth. No need worrying about configuration or infrastructure. Instead you can focus on building your app and provide value for your users.

Hasura Auth is Open Source

Hasura Auth is fully open source and is specifically created to handle authentication for Hasura. It's built with TypeScript.

The code is available at https://github.com/nhost/hasura-auth.

Hasura AuthHasura Auth

Users in Your Database

Hasura Auth stores your users in your database. Hasura Auth uses its own auth schema with tables related to authentication, such as auth.users. Users are stored in the auth.users table. If the user signs in with an email and password the password is hashed using bcrypt. However, Hasura Auth has support for even more sign-in methods, such as:

  • Email and Password
  • Magic Link
  • SMS
  • Social Providers such as Facebook, Google, GitHub, and many more.

Features of Hasura Auth

  • 🧑‍🤝‍🧑 Users are stored in Postgres and accessed via GraphQL
  • 🔑 Multiple sign-in methods.
  • ✨ Integrates with GraphQL and Hasura Permissions
  • 🔐 JWT tokens and Refresh Tokens.
  • ✉️ Emails sent on various operations
  • ✅ Optional checking for Pwned Passwords.
  • 👨‍💻 Written 100% in TypeScript.

Easy to use JavaScript SDK

Hasura Auth is part of the Nhost backend stack, and Nhost comes with an easy-to-use JavaScript SDK written in TypeScript.

This is how you use the Nhost JavaScript client.

First initialize the Nhost client:


_10
import { NhostClient } from '@nhost/nhost-js'
_10
_10
const nhost = new NhostClient({
_10
backendUrl: '<nhost-backend-url>',
_10
})

Then sign up a new user:


_10
const { session, error } = await nhost.auth.signUp({
_10
email: 'elon@musk.com',
_10
password: 'spacex-to-mars',
_10
options: {
_10
displayName: 'Elon Musk',
_10
},
_10
})

That's it. It's that simple!

Here's a demo with authentication with Nhost and our JavaScript client:

Read the full JavaScript SDK documentation if you want to learn more. You can also use the JavaScript client together with @nhost/react-auth and @nhost/react-apollo if you plan to use React and the Apollo GraphQL client. Support for more GraphQL clients are coming soon.

Get started

You have two options to get started with Hasura Auth to add authentication to Hasura:

  • Use Nhost (recommended)
  • Self-hosting

Get started with Nhost (recommended)

Create an account and create a new Nhost app. That's it 🤯 (Yes, we try to make it easy to build apps). When you create a new Nhost app we manage all infrastructure and configuration so you get:

  • Postgres
  • Hasura
  • Hasura Auth
  • Hasura Storage
  • Serverless Functions

For a more detailed guide, read our Quick start guide.

Get started with self hosting

Hasura Auth is open-source and available as a Docker image (nhost/hasura-auth). Here's an example of how you can combine Postgres, Hasura, and Hasura Auth using Docker Compose:


_36
version: '3.6'
_36
services:
_36
postgres:
_36
image: postgres
_36
restart: always
_36
volumes: - ./docker/data/db:/var/lib/postgresql/data - ./docker/initdb.d:/docker-entrypoint-initdb.d:ro
_36
environment:
_36
POSTGRES_PASSWORD: ${POSTGRES_PASSWORD:-secretpgpassword}
_36
ports:
_36
- '5432:5432'
_36
graphql-engine:
_36
image: hasura/graphql-engine:v2.1.1
_36
depends_on:
_36
- postgres
_36
restart: always
_36
environment:
_36
HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:${POSTGRES_PASSWORD:-secretpgpassword}@postgres:5432/postgres
_36
HASURA_GRAPHQL_JWT_SECRET: ${HASURA_GRAPHQL_JWT_SECRET}
_36
HASURA_GRAPHQL_ADMIN_SECRET: ${HASURA_GRAPHQL_ADMIN_SECRET}
_36
HASURA_GRAPHQL_UNAUTHORIZED_ROLE: public
_36
HASURA_GRAPHQL_LOG_LEVEL: debug
_36
HASURA_GRAPHQL_ENABLE_CONSOLE: 'true'
_36
ports:
_36
- '8080:8080'
_36
hasura-auth:
_36
image: nhost/hasura-auth:latest
_36
depends_on:
_36
- postgres
_36
- graphql-engine
_36
env_file:
_36
- .env
_36
environment:
_36
HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:${POSTGRES_PASSWORD:-secretpgpassword}@postgres:5432/postgres
_36
HASURA_GRAPHQL_GRAPHQL_URL: http://graphql-engine:8080/v1/graphql
_36
ports: - '4000:4000'
_36
volumes: - ./docker/data/mailhog:/maildir

For this example, please use the .env file here. And start everything with: docker-compose up -d.

Conclusion

We love open source at Nhost. That's why we've open sourced Hasura Auth to make authentication easy with Hasura and make it available for everyone.

Hasura Auth can be used with Nhost if you don't want to manage infrastructure and configuration your self, or as a self hosted alternative with Docker.

If you want to support our open source, please give us a start on GitHub: https://github.com/nhost/nhost. It would mean a lot. Thanks!

Share this post

Twitter LogoLinkedIn LogoFacebook Logo