Kinde with Hasura

Hasura, with its powerful GraphQL APIs, pairs exceptionally well with authentication solutions like Kinde to provide a seamless authentication experience in your applications.

This article will guide you through the process of integrating Kinde with Hasura, enabling you to leverage Kinde’s user-friendly authentication services alongside Hasura’s robust data management capabilities.

This walkthrough assumes:

• you have configured a Kinde account
• you have already set up a Kinde project (a demo project/starter kit is fine).
• you have a Hasura account.

1. Create Your Application: Navigate to the Kinde dashboard and create a new application. You’ll be asked to provide basic information about your application, such as its name and the authentication methods you wish to enable, etc.

   💡 If you need a demo project to test this out, you can utilize one of the starter kits.

2. Configure JWT Settings: Go to the application settings in your Kinde dashboard and locate the “Tokens” configuration section.

   Here, you’ll define the JWT settings that align with Hasura’s requirements, such as the issuer (iss) claim, token expiration, and the signing method.

   Click on “Enable Hasura mapping”:

   

Important: Make note of the JWT secret or public key provided by Kinde, as you will need this information to configure Hasura in the next steps.

You will need to add the Kinde JWKS endpoint to Hasura, completing the integration.

1. Go to the Hasura Dashboard.

2. Click the “Gear ⚙️” icon.

3. Go to the “Env vars” section and click the ”+ New Env Var” option.

4. Select HASURA_GRAPHQL_JWT_SECRET for the “Key” and paste the JWKS endpoint. It should look like:

   {"jwk_url":"https://<your_subdomain>.kinde.com/.well-known/jwks"}
   

   💡 You can navigate to https://<your_subdomain>.kinde.com/.well-known/jwks directly and see your JWKS manually.

5. Click on “Add”.

You can now attempt to sign in using Kinde’s authentication flow and make a query to Hasura using the JWT token provided upon authentication. If configured correctly, you should be able to query your Hasura database as an authenticated user.

We can now add some data to the Hasura App, to test this.

1. Go to your Hasura app dashboard and create a users table with the following columns:

   • id of type Text (Primary key)
   • name of type Text
   • last_seen of type Timestamp with default value now()

   

2. Create a user role. This role will be incorporate the following permissions:

   • Able to see their records
   • Not able to see other person’s records

   

The implementation details on the front end will vary depending on the frameworks and libraries you’re using. However, Kinde provides SDKs and API endpoints to facilitate authentication flows in your application. You’ll typically need to:

1. Implement Sign-in: Utilize Kinde’s SDK or direct API calls to implement the sign-in flow in your front end. Upon successful authentication, Kinde will return a JWT token.

2. Access Hasura with JWT: Use the obtained JWT token as an Authorization header in your requests to Hasura’s GraphQL API. This token allows Hasura to authenticate and authorize the request based on your configured permissions.

   Accessing the token will depend on what you are building from, but a NextJS example utilizing the Kinde App Router SDK.

   import {getKindeServerSession} from "@kinde-oss/kinde-auth-nextjs/server";
   
   getAccessToken({template: "hasura"});
   

   ❗ Template name might not be “hasura”, check above to reference from your configuration files

3. Manage User Sessions: Implement logic to handle user sessions, token storage, and token refresh (if necessary) to maintain a seamless user experience.

By following the steps outlined in this guide, you can enhance your application’s security and user management capabilities, allowing you to focus on building exceptional user experiences.

Remember, the key to a successful integration lies in careful configuration and testing to ensure seamless authentication flows and secure data access patterns.

Remember to observe good security practices in handling user data and credentials. Regularly update your dependencies and monitor your application for any security advisories.

If you need any assistance with getting Kinde connected reach out to support@kinde.com.

You can also join the Kinde community on Slack or the Kinde community on Discord for support and advice from the team and others working with Kinde.