Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

Nhost

Learn how to integrate Clerk into your Nhost project

Overview

Nhost is the open source Firebase alternative with GraphQL. It offers a realtime GraphQL API with Hasura, a full PostgreSQL database, serverless functions, and storage. Although Nhost offers a built-in authentication and user management service, it requires that you manage the user data yourself and does not provide features like passwordless authentication and multi-session management. Clerk provides these features and more without the hassle of managing your own user and identity service.

The Clerk integration with Nhost enables you to authenticate requests to the Hasura backend using a JSON Web Token (JWT) created with our JWT Templates feature.

Getting started

You can connect your Clerk-authenticated application to a Hasura GraphQL endpoint within minutes.

New JWT template with Nhost

This will pre-populate the default claims required by Nhost and Hasura. You can include additional claims or modify them as necessary. Shortcodes are also available to make adding dynamic user values easy.

Nhost claims

By default, Clerk will sign the JWT with a private key automatically generated for your application, which is what most developers use for Nhost. If you so choose, you can customize this key.

Configure Nhost

The next step is to provide Nhost with the public keys used to verify the JWT issued by Clerk. Assuming you didn’t use a custom key, this can be done by using a JSON Web Key Set (JWKS), which Clerk automatically creates an endpoint for with your Frontend API (https://<YOUR_FRONTEND_API>/.well-known/jwks.json).

From your Clerk JWT template screen, find the JWKS Endpoint input and click to Copy the endpoint.

From your Nhost dashboard, navigate to Settings Environment Variables.

Nhost environment variables

Find the NHOST_JWT_SECRET key and click to Edit the value.

{"jwk_url":"https://<YOUR_FRONTEND_API>/.well-known/jwks.json"}

Replace the URL with the JWKS endpoint you copied from your JWT template.

Add custom JWT secret

With Custom Signing Key

If you used a custom signing key, instead of providing the jwk_url you need to provide the algorithm type and key as JSON object in the NHOST_JWT_SECRET field.

{"type": "HS256", "key": "<YOUR_SIGNING_KEY>" }

Don't forget to click Apply Changes to save your JWT template.

Configure the providers

Both Nhost and Clerk have Provider components that are required to wrap your React application to provide the authentication context.

This is how you would set up a Next.js application using both Providers:

pages/_app.js
import { NhostNextProvider, NhostClient } from '@nhost/nextjs';
import {
ClerkProvider,
RedirectToSignIn,
SignedIn,
SignedOut
} from '@clerk/nextjs';
const nhost = new NhostClient({
subdomain: process.env.NEXT_PUBLIC_NHOST_SUBDOMAIN || '',
region: process.env.NEXT_PUBLIC_NHOST_REGION || ''
});
function MyApp({ Component, pageProps }) {
return (
<NhostNextProvider nhost={nhost} initial={pageProps.nhostSession}>
<ClerkProvider {...pageProps}>
<SignedIn>
<Component {...pageProps} />
</SignedIn>
<SignedOut>
<RedirectToSignIn />
</SignedOut>
</ClerkProvider>
</NhostNextProvider>
);
}
export default MyApp;

Configure your GraphQL client

GraphQL clients (such as Apollo Client and Relay) can help with querying and caching your data. They can also manage UI state, keep data in sync, and boost performance. That said, you can make a GraphQL request to the Hasura backend with the native browser Fetch API.

The last step of integrating Clerk as the modern web authentication solution for Nhost is to pass the JWT in the Authorization header with your requests. You can access the token generated with the Hasura claims by calling getToken({ template: <your-template-name> }) with the name of your template (default is nhost).

Even if you don’t have a database table set up yet, we can make use of the built-in GraphQL introspection system to validate that the authenticated requests are working properly.

Here is an example of using Fetch in conjunction with the useSWR hook in a Next.js application to make a request to the Hasura GraphQL endpoint provided by Nhost:

pages/index.js
import { useAuth } from '@clerk/nextjs';
import useSWR from 'swr';
export default function Home() {
const { getToken } = useAuth();
const subdomain = process.env.NEXT_PUBLIC_NHOST_SUBDOMAIN;
const endpoint = `https://${subdomain}.nhost.run/v1/graphql`;
const query = `query { __schema { types { name } } }`;
const fetcher = async (...args) =>
fetch(...args, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
Authorization: `Bearer ${await getToken({ template: 'nhost' })}`
},
body: JSON.stringify({ query })
}).then(res => res.json());
const { data } = useSWR(endpoint, fetcher);
return <p>GraphQL schema has {data?.data?.__schema.types.length} types</p>;
}

Note that the getToken({ template: <your-template-name> }) call is asynchronous and returns a Promise that needs to be resolved before accessing the token value. This token is short-lived for better security and should be called before every request to your GraphQL API. The caching and refreshing of the token is handled automatically by Clerk.

Was this helpful?

Clerk © 2022