oluwani•3w ago

Convex & Kinde

This guide outlines the Kinde-specific setup for Convex, following a flow similar to the Convex & Clerk integration but focusing on how to integrate Kinde with Convex. It addresses many of the questions raised by the Kinde developer community. The tutorial provides clear, actionable steps for integrating Kinde authentication with Convex while adhering to best practices. https://dev.to/sholajegede/convex-kinde-2pe1 Under the hood The authentication flow looks like this under the hood: 1. The user clicks a register or login button. 2. The user is redirected to a hosted Kinde page where they sign up or log in via whatever method you configure in Kinde. 3. After a successful sign up or login, their details are sent through a webhook and stored securely in Convex, after which they are redirected immediately back to your page, or a different page which you configure via the Kinde postLoginRedirectURL prop. 4. The KindeProvider now knows that the user is authenticated. 5. The useKindeAuth and AuthTokenFetcher fetches an auth token from Kinde. 6. Then the react useEffect hook sets this token to a setAuth instance of Convex. 7. The ConvexProvider then passes this token down to your Convex backend to validate. 8. Your Convex backend retrieves the domain, clientId and redirectUri from Kinde to check that the token's signature is valid. 9. The ConvexProvider is notified of successful authentication, and now your entire application knows that the user is authenticated with Convex. useConvexAuth return isAuthenticated: true and the Authenticated component renders its children. The configuration in the ConvexKindeProvider.tsx file takes care of refetching the token when needed to make sure the user stays authenticated with your backend I look forward to your comments, questions and suggestions.

DEV Community

Convex & Kinde

This guide outlines the Kinde-specific setup for Convex, following a flow similar to the Convex &...

2 Replies

ark•2w ago

For those who require the ctx.auth (using Next.js), sadly this method will return null when trying to call ctx.auth.getUserIdentity(). So, to fix this, you should follow Convex's custom integration and have something like this:

export default function useAuthFromKinde() {
    const { isAuthenticated, isLoading, getIdTokenRaw, idTokenRaw } = useKindeBrowserClient();
    const fetchAccessToken = useCallback(
        async () => {
            return getIdTokenRaw();
        },
        [idTokenRaw]
    );

    return useMemo(
        () => ({
          isLoading: isLoading ?? false,
          isAuthenticated: isAuthenticated ?? false,
          fetchAccessToken,
        }),
        [isLoading, isAuthenticated, fetchAccessToken],
    );
}

export default function useAuthFromKinde() {
    const { isAuthenticated, isLoading, getIdTokenRaw, idTokenRaw } = useKindeBrowserClient();
    const fetchAccessToken = useCallback(
        async () => {
            return getIdTokenRaw();
        },
        [idTokenRaw]
    );

    return useMemo(
        () => ({
          isLoading: isLoading ?? false,
          isAuthenticated: isAuthenticated ?? false,
          fetchAccessToken,
        }),
        [isLoading, isAuthenticated, fetchAccessToken],
    );
}

oluwaniOP•6d ago

Thanks ark for catching this, I would update the tutorial with this implementation.

Convex & Kinde

Did you find this page helpful?