┌──────────────────────────────────────────────────────────────────────────────────────┐ │ 📄 shadcn/directory/clerk/clerk-docs/guides/development/integrations/databases/fauna │ └──────────────────────────────────────────────────────────────────────────────────────┘
╔══════════════════════════════════════════════════════════════════════════════════════════════╗
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║
<TutorialHero beforeYouStart={[ { title: "Set up a Clerk application", link: "/docs/getting-started/quickstart/setup-clerk", icon: "clerk", }, { title: "Integrate the appropriate Clerk SDK in your local project", link: "/docs/getting-started/quickstart/overview", icon: "code-bracket", }, ]} exampleRepo={[ { title: "Clerk, Fauna, and Next.js Demo Repo", link: "https://github.com/clerk/clerk-fauna-nextjs", icon: "code-bracket", }, ]} />
Integrating Fauna with Clerk gives you the benefits of using a Fauna database while leveraging Clerk's authentication, prebuilt components, and webhooks.
This guide will walk you through the steps to integrate Fauna with Clerk in your Next.js app.
<Steps> ## Get your Clerk Frontend API URL and JWKS URL <SignedIn> Add the following keys to your `.env` file. These keys can always be retrieved from the [**API keys**](https://dashboard.clerk.com/~/api-keys) page in the Clerk Dashboard. </SignedIn> <SignedOut> 1. In the Clerk Dashboard, navigate to the [**API keys**](https://dashboard.clerk.com/~/api-keys) page. 1. Copy the **Frontend API URL** and **JWKS URL**. 1. Paste your keys into your `.env` file.The final result should resemble the following:
NEXT_PUBLIC_CLERK_FRONTEND_API_URL={{fapi_url}}
NEXT_PUBLIC_CLERK_JWKS_URL={{jwks_url}}
/).access provider Clerk {
// Don't change the values of the issuer or jwks_uri fields.
issuer "..."
jwks_uri "..."
// Adds a user-defined role to Clerk JWTs.
role <YOUR_ROLE>
}
Clerk's JWT templates allow you to generate a new valid Fauna authentication token (JWT) for each signed in user. These tokens allow authenticated users to access your data with Fauna's API.
To create a JWT template for Fauna:
fauna.aud claim to the Audience URL you copied from Fauna in Step 2. The URL format should be https://db.fauna.com/db/<YOUR_FAUNA_DB_ID>. You can include additional claims if you’d like, but aud is the only required one. Shortcodes are available to make adding dynamic user values easy.Add the Fauna library to your project.
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm i fauna
```bash {{ filename: 'terminal' }}
yarn add fauna
```
```bash {{ filename: 'terminal' }}
pnpm add fauna
```
```bash {{ filename: 'terminal' }}
bun add fauna
```
You can now create Fauna JWTs in Clerk using the JWT template you created in the previous step. Generate the Fauna JWT by calling Clerk's useAuth().getToken method, and use it to authenticate with Fauna as an end user, as shown in the following example:
'use client'
import React from 'react'
import { useAuth } from '@clerk/nextjs'
import { Client, fql } from 'fauna'
export default function Page() {
const [message, setMessage] = React.useState('')
// The `useAuth()` hook is used to get the `getToken()` method.
const { getToken } = useAuth()
// Create a function to make a query to Fauna.
const makeQuery = async () => {
let client
try {
// Get the custom Fauna token from Clerk.
const clerkToken = await getToken({ template: 'fauna' })
if (!clerkToken) {
setMessage('No token found')
return
}
// Initialize a new Fauna client with the Clerk token.
client = new Client({ secret: clerkToken })
// Make a query to Fauna.
const response = await client.query(fql`'Hello World!'`)
setMessage(JSON.stringify(response))
} catch (error) {
console.error(error)
setMessage('Error occurred')
} finally {
if (client) client.close()
}
}
return (
<>
<button onClick={makeQuery}>Make authenticated query</button>
<p>Message: {message}</p>
</>
)
}
[!NOTE] The
</Steps>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 Fauna database. The caching and refreshing of the token are handled automatically by Clerk.
║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║ ║
╚══════════════════════════════════════════════════════════════════════════════════════════════╝