How to Connect Supabase to Hasura

In the Supabase Dashboard, navigate to Project Settings in the left sidebar, then click on Database. Under Connection string, you will find the URI format connection string. Copy the one labeled Session Mode (port 5432) for Hasura — this gives direct access to PostgreSQL. Do not use the pooler connection (port 6543) unless Hasura specifically requires it for high-concurrency scenarios. Replace [YOUR-PASSWORD] with the database password you set when creating the project.

1# Connection string format
2postgresql://postgres.[project-ref]:[password]@aws-0-[region].pooler.supabase.com:5432/postgres

Open your Hasura Console (Hasura Cloud dashboard or local console at localhost:8080). Navigate to the Data tab and click Connect Database. Choose PostgreSQL as the database type. Enter a display name like 'supabase' and paste the connection string from the previous step. Click Connect Database to establish the link. Hasura will introspect the schema and detect all tables, views, and relationships.

1# If using Hasura CLI with docker-compose, add the database URL as an env var
2# docker-compose.yml
3services:
4  graphql-engine:
5    image: hasura/graphql-engine:v2.38.0
6    environment:
7      HASURA_GRAPHQL_DATABASE_URL: postgresql://postgres.[project-ref]:[password]@aws-0-[region].pooler.supabase.com:5432/postgres
8      HASURA_GRAPHQL_ADMIN_SECRET: your-admin-secret
9      HASURA_GRAPHQL_ENABLE_CONSOLE: 'true'

After connecting, Hasura shows untracked tables and relationships. Click Track All to expose all your Supabase tables through the GraphQL API. Hasura automatically detects foreign key relationships and creates object (one-to-one) and array (one-to-many) relationships. Review the detected relationships and rename them if needed for a cleaner GraphQL schema. You can also add custom relationships manually.

To use Supabase auth with Hasura, configure Hasura to verify Supabase JWTs. Set the HASURA_GRAPHQL_JWT_SECRET environment variable with your Supabase project's JWT secret (found in Dashboard under Project Settings > API > JWT Settings). This lets Hasura read the user's role and ID from the JWT. Then create Hasura permission rules that reference the x-hasura-user-id session variable, which maps to the Supabase auth user ID.

1# Set JWT secret in Hasura environment
2HASURA_GRAPHQL_JWT_SECRET: '{"type":"HS256","key":"your-supabase-jwt-secret-here"}'
3
4# The JWT from Supabase contains:
5# {
6#   "sub": "user-uuid",  -> maps to x-hasura-user-id
7#   "role": "authenticated"
8# }
9
10# In Hasura Console, set custom claims mapping:
11# x-hasura-user-id: sub
12# x-hasura-default-role: authenticated
13# x-hasura-allowed-roles: [authenticated, anonymous]

With JWT verification configured, create permission rules in the Hasura Console under the Permissions tab for each table. For the 'authenticated' role, set select, insert, update, and delete permissions with row-level rules like user_id equals X-Hasura-User-Id. This is Hasura's equivalent of Supabase RLS. Choose whether to use Hasura permissions, Supabase RLS, or both — using both is the most secure but requires maintaining two permission systems.

With everything configured, query your Supabase data through the Hasura GraphQL endpoint. Send the Supabase JWT as a Bearer token in the Authorization header. Hasura processes the JWT, applies permissions, and returns the filtered data. You can use any GraphQL client like Apollo, urql, or plain fetch. The GraphQL endpoint is your Hasura URL with /v1/graphql appended.

1// Query Supabase data through Hasura GraphQL
2const HASURA_URL = 'https://your-hasura-instance.hasura.app/v1/graphql'
3
4async function fetchTodos(supabaseAccessToken: string) {
5  const response = await fetch(HASURA_URL, {
6    method: 'POST',
7    headers: {
8      'Content-Type': 'application/json',
9      'Authorization': `Bearer ${supabaseAccessToken}`,
10    },
11    body: JSON.stringify({
12      query: `
13        query GetMyTodos {
14          todos(order_by: { created_at: desc }) {
15            id
16            title
17            is_complete
18            user {
19              email
20            }
21          }
22        }
23      `
24    }),
25  })
26
27  const { data, errors } = await response.json()
28  if (errors) throw new Error(errors[0].message)
29  return data.todos
30}