/dev/null
/dev/null
PostsComments
KKinde
Created by NanaGaisie on 3/7/2024 in #💻┃support
Integrating Convex with Kinde
I tried the two components from kinde, the register seems to be working fine, but the <LoginLink> is not working. I tried to then login through the register but the state is just false when logging the authentication bool state you've inserted. page.tsx ⬇️ 
mport { LoginLink, RegisterLink } from "@kinde-oss/kinde-auth-nextjs";

export default function Home() {
  return (
    <main className="">
      <LoginLink>Login</LoginLink>
      <RegisterLink>Register</RegisterLink>
    </main>
  );
}
mport { LoginLink, RegisterLink } from "@kinde-oss/kinde-auth-nextjs";

export default function Home() {
  return (
    <main className="">
      <LoginLink>Login</LoginLink>
      <RegisterLink>Register</RegisterLink>
    </main>
  );
}
9 replies
KKinde
Created by NanaGaisie on 3/7/2024 in #💻┃support
Integrating Convex with Kinde
Having everything needed for the authentication on a single file. Then using like this on my layout.tsx 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ConvexClientProvider>{children}</ConvexClientProvider>
      </body>
    </html>
  );
}
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={inter.className}>
        <ConvexClientProvider>{children}</ConvexClientProvider>
      </body>
    </html>
  );
}
9 replies
KKinde
Created by NanaGaisie on 3/7/2024 in #💻┃support
Integrating Convex with Kinde
I have managed to re-use your code: 
"use client";
import useStoreUserEffect from "@/lib/useStoreUserEffect";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { ConvexProviderWithAuth, ConvexReactClient } from "convex/react";
import { useCallback, useMemo } from "react";

type UseKindeAuth = () => {
  isLoading: boolean | null;
  isAuthenticated: boolean | null;
  getToken: () => string | null;
};

function useUseAuthFromKinde(useAuth: UseKindeAuth) {
  return useMemo(
    () =>
      function useAuthFromKinde() {
        const { isLoading, isAuthenticated, getToken } = useAuth();
        const fetchAccessToken = useCallback(
          async ({ forceRefreshToken }: { forceRefreshToken: boolean }) => {
            try {
              return await getToken();
            } catch (error) {
              return null;
            }
          },
          [getToken]
        );
        return useMemo(
          () => ({
            isLoading: isLoading ?? false,
            isAuthenticated: isAuthenticated ?? false,
            fetchAccessToken,
          }),
          [isLoading, isAuthenticated, fetchAccessToken]
        );
      },
    [useAuth]
  );
}

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

const useCurrentUser = () => {
  const { isLoading, isAuthenticated, getToken } = useKindeBrowserClient();

  console.log("isAuthenticated", isAuthenticated);

  return { isLoading, isAuthenticated, getToken };
};

export function ConvexClientProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  {
    const useAuthFromKinde = useUseAuthFromKinde(useCurrentUser);

    // useStoreUserEffect();
    return (
      <ConvexProviderWithAuth client={convex} useAuth={useAuthFromKinde}>
        {children}
      </ConvexProviderWithAuth>
    );
  }
}
"use client";
import useStoreUserEffect from "@/lib/useStoreUserEffect";
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { ConvexProviderWithAuth, ConvexReactClient } from "convex/react";
import { useCallback, useMemo } from "react";

type UseKindeAuth = () => {
  isLoading: boolean | null;
  isAuthenticated: boolean | null;
  getToken: () => string | null;
};

function useUseAuthFromKinde(useAuth: UseKindeAuth) {
  return useMemo(
    () =>
      function useAuthFromKinde() {
        const { isLoading, isAuthenticated, getToken } = useAuth();
        const fetchAccessToken = useCallback(
          async ({ forceRefreshToken }: { forceRefreshToken: boolean }) => {
            try {
              return await getToken();
            } catch (error) {
              return null;
            }
          },
          [getToken]
        );
        return useMemo(
          () => ({
            isLoading: isLoading ?? false,
            isAuthenticated: isAuthenticated ?? false,
            fetchAccessToken,
          }),
          [isLoading, isAuthenticated, fetchAccessToken]
        );
      },
    [useAuth]
  );
}

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

const useCurrentUser = () => {
  const { isLoading, isAuthenticated, getToken } = useKindeBrowserClient();

  console.log("isAuthenticated", isAuthenticated);

  return { isLoading, isAuthenticated, getToken };
};

export function ConvexClientProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  {
    const useAuthFromKinde = useUseAuthFromKinde(useCurrentUser);

    // useStoreUserEffect();
    return (
      <ConvexProviderWithAuth client={convex} useAuth={useAuthFromKinde}>
        {children}
      </ConvexProviderWithAuth>
    );
  }
}
9 replies
KKinde
Created by NanaGaisie on 3/7/2024 in #💻┃support
Integrating Convex with Kinde
Hey @NanaGaisie have you figured out a possible solution ?
9 replies