Search…
Hasura
The Clerk integration with Hasura enables you to authenticate requests to Hasura using a JWT.
We have an official starting repo with Next.js and Hasura, check it out here.

1. Turn on the integration

To get started, first turn on the Hasura integration in the dashboard:
Your Application → Your Instance → Integrations → Hasura

2. Configure Hasura

2.1. With Hasura Core
Following the documentation here, start Hasura with the following "JWT secret." Replace %FRONTEND_API% with the Frontend API value on the Home page of your Instance dashboard:
1
{"jwk_url":"https://%FRONTEND_API%/.well-known/jwks.json"}
Copied!
2.2. With Hasura Cloud
If you are using Hasura Cloud, go to your project settings. Click "Env vars" on the sidebar and add "New Env Var".
Set the key to HASURA_GRAPHQL_JWT_SECRET and the value to the following. Replace %FRONTEND_API% with the Frontend API value on the Home page of your Instance dashboard:
1
{"jwk_url":"https://%FRONTEND_API%/.well-known/jwks.json"}
Copied!

3. Configure your GraphQL client

Hasura uses the Authorization header to authenticate requests. You can retrieve the necessary header from Clerk by calling getToken("hasura") on the User object.
getToken should be called before every request to your GraphQL API. Each token is short-lived for better security, and getToken automatically handles caching and refreshing.

3.1. Apollo

First, you need to install two dependencies:
1
npm install @apollo/client graphql
2
# or
3
yarn add @apollo/client graphql
Copied!
Now, let's create a new file for our Apollo client:
React
1
// lib/apolloClient.js
2
3
import {
4
ApolloProvider,
5
ApolloClient,
6
HttpLink,
7
from,
8
InMemoryCache,
9
} from "@apollo/client";
10
import { setContext } from "@apollo/client/link/context";
11
import { useUser } from "@clerk/clerk-react";
12
13
const hasuraGraphqlApi = "YOUR_HASURA_GRAPHQL_API";
14
15
export const ApolloProviderWrapper = ({ children }) => {
16
const user = useUser();
17
const authMiddleware = setContext(async (req, { headers }) => {
18
const token = await user.getToken("hasura");
19
return {
20
headers: {
21
...headers,
22
authorization: `Bearer ${token}`,
23
},
24
};
25
});
26
27
const httpLink = new HttpLink({
28
uri: hasuraGraphqlApi,
29
});
30
31
const apolloClient = new ApolloClient({
32
link: from([authMiddleware, httpLink]),
33
cache: new InMemoryCache(),
34
});
35
36
return <ApolloProvider client={apolloClient}>{children}</ApolloProvider>;
37
};
Copied!
To get your HASURA_GRAPHQL_API in Hasura Cloud, you can get it in the projects page, click the cog wheel, and you'll find it under "GraphQL API".
Then, the last step would be wrapping the components you want to give access to Apollo and the GraphQL API with the ApolloProviderWrapper. Remember that there has to be a <SignedIn> component wrapping the ApolloProviderWrapper. You can read more about it here.
Last modified 2mo ago