Kinde•13mo ago

Integration with Convex Custom Auth

I am creating a notion-like app with Nextjs. I am using Convex as my backend. I haven't figured out how to integrate it with Kinde as my custom auth provider. Has someone been able to integrate Kinde auth with Convex. If there is a way, could someone help me?

11 Replies

VKinde•13mo ago

Hey! I'm unfamiliar with Convex as a whole, but can certainly help you. Where are you getting stuck? You're using NextJS as the front end; so this would be a good resource! https://github.com/kinde-oss/kinde-auth-nextjs Here seems to be a guide on how to get it set up: https://docs.convex.dev/auth/custom-auth

GitHub

GitHub - kinde-oss/kinde-auth-nextjs: Kinde NextJS SDK - authentica...

Kinde NextJS SDK - authentication for server rendered apps - GitHub - kinde-oss/kinde-auth-nextjs: Kinde NextJS SDK - authentication for server rendered apps

Custom Auth Integration | Convex Developer Hub

Convex can be integrated with any identity provider supporting the

NanaGaisieOP•13mo ago

"use client";

import { ClerkProvider, useAuth } from "@clerk/clerk-react";
import { ConvexReactClient, ConvexProviderWithAuth } from "convex/react";
import { ReactNode } from "react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export const ConvexClientProvider = ({ children }: { children: ReactNode }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <ConvexProviderWithAuth useAuth={useAuth} client={convex}>
        {children}
      </ConvexProviderWithAuth>
    </ClerkProvider>
  );
};

"use client";

import { ClerkProvider, useAuth } from "@clerk/clerk-react";
import { ConvexReactClient, ConvexProviderWithAuth } from "convex/react";
import { ReactNode } from "react";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);

export const ConvexClientProvider = ({ children }: { children: ReactNode }) => {
  return (
    <ClerkProvider
      publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY!}
    >
      <ConvexProviderWithAuth useAuth={useAuth} client={convex}>
        {children}
      </ConvexProviderWithAuth>
    </ClerkProvider>
  );
};

Here is an example with clerk. Kinde auth SDK for next js does not have a client provider. Also, when I tried importing {useKindeAuth} from "@kinde-oss/kinde-auth-nextjs" for the ConvexProviderWithAuth useAuth Prop, I got a type error when I try that.

VKinde•13mo ago

Hey! Let me take a look and see if I can integrate this from my side and will share the results. It should be straightforward, we will write a guide on this as well to help further people once we get this across. I believe we currently are experiencing a bug with the SDK which should be resolved intermittently then we can take a look!

Unknown User•13mo ago

Message Not Public

VKinde•13mo ago

Hey! I'm still looking into this and seeing if we can implement a workaround for the auth provider context to get the auth details directly. i'll let you know when I have something tangible or if it will be a wasted effort.

Unknown User•13mo ago

Message Not Public

NanaGaisieOP•13mo ago

Sure thank you.

VKinde•13mo ago

Hey! Have you checked the above repo that a fellow community member has provided? Btw amazing work there 🔥 @umuthopeyildirim The aud token is there, it just returns an empty array when unspecified which I believe is causing the whole issue. When you make a request without specifying the audience, we return the aud claim as an empty array []. It seems like some libraries basically consider this to mean more or less that it is not valid for any audiences

Unknown User•13mo ago

Message Not Public

swajp•12mo ago

Hi, have you find an easy way to connect kinde with convex or not?

VKinde•12mo ago

I'm waiting to hear back, but it looks like this will have to be supported by an external package. This will most likely look like (or just be) the above one that umuthopeyildrium created above as this would have to be community supported for the time being, so will be offered in a "as-is" state. I'll have more details in the coming days

Gaming

Programming

Integration with Convex Custom Auth