Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.devGet API keys

Grafbase

Learn how to integrate Clerk and Grafbase into your application

Overview

Grafbase is the leading provider of instant serverless GraphQL backends.

The Clerk integration with Grafbase enables you to authenticate requests to your Grafbase database using a JSON Web Token (JWT) created with our JWT Templates feature.

This guide will walk you through the necessary steps to make authenticated requests to your Grafbase GraphQL API.

Getting started

The first step is to create a new application from the Clerk Dashboard if haven’t already done so.

In the sidebar, you'll want to navigate to "JWT Templates" then create a new template. Clerk conventiently provides a Grafbase template which will pre-populate the default claims required.

You can also include additional claims, or modify the template as necessary. Shortcodes are available to make adding dynamic user values easy.

If your GraphQL API restricts access based on groups, you’ll need to specify the users groups in the array above.

Configure Grafbase

You'll next need to configure Grafbase so it knows you want to use Clerk as the OIDC issuer.

Signed in user authentication

If you want to enable access to your Grafbase data for any signed-in user, then you’ll want to configure your schema with the allow: private rule:

schema
@auth(
providers: [{ type: oidc, issuer: "{{ env.ISSUER_URL }}" }]
rules: [{ allow: private }]
) {
query: Query
}

Make sure to set the environment variable ISSUER_URL (using the Grafbase CLI, or Dashboard) to be your Frontend API value found on the Clerk dashboard for your instance.

Group-based authentication

If you’re working with group-based user access then you can use allow: groups, and provide an array of groups to your schema @auth rules:

schema
@auth(
providers: [{ type: oidc, issuer: "{{ env.ISSUER_URL }}" }]
rules: [{ allow: groups, groups: ["backend", "admin"] }]
) {
query: Query
}

Make sure to replace YOUR_FRONTEND_API with the Frontend API value found on the Clerk dashboard for your instance.

If needed, you can also use a shortcode to dynamically include the users current organization's role

{
"groups": ["{{org.role}}"]
}

Authenticating requests

You must send OIDC (JWT) tokens using an Authorization: Bearer TOKEN header. Your token must include the group if using group-based authentication.


The useAuth hook os the easiest way to generate JWTs. Use await getToken({ template: "..." }) and specify your grafbase template to retrieve a new JWT.

import { useAuth } from '@clerk/nextjs'
import useSWR from 'swr'
export const useQuery = (query, variables) => {
if (!query) {
throw Error('No query provided to `useQuery`')
}
const { getToken } = useAuth()
const fetcher = async () => {
const token = await getToken({ template: 'grafbase' })
const results = await fetch('YOUR_GRAFBASE_API', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
authorization: `Bearer ${token}`
},
body: JSON.stringify({ query, variables })
}).then(res => res.json())
return results
}
return useSWR(query, fetcher)
}
const YOUR_GRAPHQL_QUERY = `
query {
__schema {
types {
name
}
}
}
`
const SchemaPage = () => {
const { data, error } = useQuery(YOUR_GRAPHQL_QUERY)
if (error) {
return <div>error</div>
}
return <pre>{JSON.stringify({ data }, 2, null)}</pre>
}
export default SchemaPage

Need help?

Was this helpful?

Clerk © 2022