Kinde and Convex

Bring real-time interactivity to your app with Convex, a powerful Backend-as-a-Service designed for dynamic React experiences.

Now, with Kinde webhooks, you can seamlessly sync user data from Kinde into your Convex database. This allows you to authenticate queries and mutations in Convex using access tokens generated by Kinde Auth.

Convex and Kinde work great together—this guide shows you how to connect them using webhooks so that your data stays in sync and your app stays secure.

What you need

Link to this section

• A Kinde account (Sign up for free)
• A Convex account (Sign up for free)

Step 1: Set up your Kinde application

Link to this section

1. Sign in to Kinde and select Add application.

2. In the dialog that opens, enter a name for the application (e.g., Kinde & Convex).

3. Choose Front-end and mobile as the application type, and select Save.

4. On the Quickstart page, select React and then select Save.

5. Select Set for both the Set callback URL, and Set logout URL.

   

6. Go to Authentication in the menu and select the Social connections you want to enable for your application (e.g., Google) and select Save.

7. From the Kinde home page, select Settings > APIs > Add API.

8. Type a name for the API (e.g., Convex)

9. Enter convex in the Audience field and select Save. This will enable the Convex backend to connect with your Kinde application.

   

10. From the Kinde home screen, select View details on your Convex application.

11. Go to APIs, you will see the Convex API you created earlier.

12. Select the three dots next to your Convex API and select Authorize application.

    This will add convex into your Kinde JSON web token inside the aud field. It will allow convex to authorize a user using Kinde.

    

Step 2: Set up your Convex project

Link to this section

1. Clone or download the Kinde Convex Auth starter kit from GitHub using the following bash command:

   This will generate a starter React Convex project with sample schema and route files included.

   git clone https://github.com/tamalchowdhury/kinde-convex-auth.git

2. Change into the project directory:

   cd kinde-convex-auth

3. Install the project dependencies:

   npm install

4. Create a .env file with the bash command:

   touch .env

5. Open the .env file with your preferred code editor, and enter the variables found on Kinde > Kinde & Convex (your application) > Quick Start page.

   

6. Run the following command in your terminal. This will prompt you to log into your Convex account and walk you through setting up the project.

   npx convex dev

7. If you see an env variable error, it means you need to add your Kinde domain as the VITE_KINDE_DOMAIN in Convex.

   

8. Go to your Convex dashboard > Project > Settings > Environment Variables.

9. Set the VITE_KINDE_DOMAIN using the credentials from your Kinde Quick start page.

   

10. After the set up is complete, you should see green checkmarks in your terminal. Keep this Convex development running in the background to continue working with your project locally.

    

Step 3: Set up the Kinde webhook

Link to this section

Your Convex project creates a custom endpoint under the /kinde-users-webhook route. If you open the /convex/http.ts file, you can see a new route definition for your Convex backend.

This endpoint will be listening for an incoming POST request from Kinde.

1. Go to your Convex dashboard > Project > Settings > URL & Deploy Key.

2. Select Show development credentials and copy the HTTP Actions URL.

   

3. In Kinde Home, go to Settings > Webhooks.

4. Select Add webhook.

5. Enter the webhook Name and description

6. Add the Endpoint URL. This is the HTTP Actions URL you copied in Convex: https://your_convex_subdomain.convex.site/kinde-users-webhook

   

7. Scroll down and select Add event.

8. Select all the user-specific events your application will listen for, and select Save.

   

9. Select Save on the webhook creation page to finish creating the webhook.

Step 4: Test your Convex application

Link to this section

1. Open a new terminal window, but keep the Convex dev server running in the first one.

2. Enter the following command to run the Vite project.

   npm start

3. Go to http://localhost:3000 and sign in or create a new account.

   Each time a new user signs up or signs in to your application:

   • a webhook fires from Kinde to your Convex backend with the user ID.
   • Convex backend stores the user in the database with the upsertFromKinde handler in the /convex/users.ts file.

   You can find it in Convex, in the Convex dashboard > Data > users table.

   

4. Enter a task and select send. You will see the task show up in your application.

   

The Kinde and Convex webhook result

Link to this section

• The task is saved to the Convex database using the send handler in /convex/tasks.ts file.
• The React client page calls the database using the get handler of /convex/tasks.ts using the useQuery hook in /src/components/Tasks.tsx file.

This happens in real-time thanks to Convex sync.

You can see the tasks in Convex Dashboard > Database > tasks table.

You have done it 🎉

Link to this section

With webhooks in place, your Kinde user data is now automatically synced to your Convex database. This gives your application fast, secure access to user information while avoiding common performance issues like n+1 queries. It also ensures your UI stays responsive to real-time data updates.

Webhooks offer a flexible way to extend Kinde’s authentication and user management into your backend workflows, so you can work with the tools you already use while keeping everything connected.

Follow best practices, test your integration carefully, keep your dependencies up to date, and monitor for any security advisories to ensure everything runs smoothly.

If you need help, reach out to us at support@kinde.com. You can also join the Kinde community on Slack or Discord to connect with the team and others building with Kinde.