NanaGaisie
NanaGaisie
PostsComments
KKinde
Created by NanaGaisie on 3/7/2024 in #💻┃support
Integrating Convex with Kinde
Also wrap all children that require authentication in the Authenticated provider from convex/react.
9 replies
KKinde
Created by NanaGaisie on 3/7/2024 in #💻┃support
Integrating Convex with Kinde
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { useCallback, useMemo } from "react";

interface UseAuthReturn {
  isLoading: boolean;
  isAuthenticated: boolean;
  fetchAccessToken: (args: {
    forceRefreshToken: boolean;
  }) => Promise<string | null>;
}

export function useAuthFromKinde(): UseAuthReturn {
  const { isLoading, isAuthenticated, getAccessTokenRaw, accessToken } =
    useKindeBrowserClient();
  const fetchAccessToken = useCallback(
    async ({ forceRefreshToken }: { forceRefreshToken: boolean }) => {
      if (forceRefreshToken) {
        try {
          const response = await getAccessTokenRaw();
          // Returns the token as string
          return response;
        } catch (error) {
          return null;
        }
      }
      // Add this line to ensure the function always returns a string or null
      return null;
    },
    [accessToken],
  );

  return useMemo(
    () => ({
      isLoading: isLoading ?? false,
      isAuthenticated: isAuthenticated ?? false,
      fetchAccessToken,
    }),
    [isLoading, isAuthenticated, fetchAccessToken],
  );
}
import { useKindeBrowserClient } from "@kinde-oss/kinde-auth-nextjs";
import { useCallback, useMemo } from "react";

interface UseAuthReturn {
  isLoading: boolean;
  isAuthenticated: boolean;
  fetchAccessToken: (args: {
    forceRefreshToken: boolean;
  }) => Promise<string | null>;
}

export function useAuthFromKinde(): UseAuthReturn {
  const { isLoading, isAuthenticated, getAccessTokenRaw, accessToken } =
    useKindeBrowserClient();
  const fetchAccessToken = useCallback(
    async ({ forceRefreshToken }: { forceRefreshToken: boolean }) => {
      if (forceRefreshToken) {
        try {
          const response = await getAccessTokenRaw();
          // Returns the token as string
          return response;
        } catch (error) {
          return null;
        }
      }
      // Add this line to ensure the function always returns a string or null
      return null;
    },
    [accessToken],
  );

  return useMemo(
    () => ({
      isLoading: isLoading ?? false,
      isAuthenticated: isAuthenticated ?? false,
      fetchAccessToken,
    }),
    [isLoading, isAuthenticated, fetchAccessToken],
  );
}
This is my useAuth function. I tried using getToken to access the token. This does not work as the values returned does not have the AUD. Using the getAccesToken returns the AUD. Also the dependency array of the use Callback should not be set to the function to avoid re-rendering of the component. Use the accessToken instead from the useKindeBrowserClient.
9 replies
KKinde
Created by NanaGaisie on 3/7/2024 in #💻┃support
Integrating Convex with Kinde
@/dev/null access the token with kindeBrowserClient in the useAuth. Also wrap all components that needs authentication with convex's Authenticated component. I suggest grouping all components that need authentication and having a common layout file which handles loading, and authentication states using convex's provided components.
9 replies
KKinde
Created by NanaGaisie on 1/20/2024 in #💻┃support
Set up a Subscription form for Nextjs App.
Hey, using dangerouslySetInnerHTML for setting a subscription form works as expected. The form does not listen to user preference for setting the theme to light or dark. Setting the global preference for theme in the globals section for design does not affect the subscription form and email theme.
16 replies
KKinde
Created by NanaGaisie on 1/20/2024 in #💻┃support
Set up a Subscription form for Nextjs App.
Thank you @viv (kinde), will try it and give you a feedback on that.
16 replies
KKinde
Created by NanaGaisie on 1/20/2024 in #💻┃support
Set up a Subscription form for Nextjs App.
Hi @viv (kinde), Yes I want to display the success message directly below after the user signs up. I am using a useEffect to add the script to the dom when the component mounts. I have the code below. I am not getting the expected behavior. 
useEffect(() => {
    const script = document.createElement("script");
    script.src = `https://widgets.kinde.com/v1/js/subscribe.js`;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);
useEffect(() => {
    const script = document.createElement("script");
    script.src = `https://widgets.kinde.com/v1/js/subscribe.js`;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);
16 replies
KKinde
Created by NanaGaisie on 1/20/2024 in #💻┃support
Set up a Subscription form for Nextjs App.
Hey @Oli - Kinde, Could you find out about the issue I was facing and is there a possible work around?
16 replies
KKinde
Created by NanaGaisie on 1/20/2024 in #💻┃support
Set up a Subscription form for Nextjs App.
Thank you @Oli - Kinde, But is there a way I can display the success message directly on the page after signing up without redirecting to kinde?
16 replies
KKinde
Created by NanaGaisie on 1/8/2024 in #💻┃support
Prompt Request Parameter: Using Kinde without SDK
Will do!
13 replies
KKinde
Created by NanaGaisie on 1/8/2024 in #💻┃support
Prompt Request Parameter: Using Kinde without SDK
Alright @viv (kinde), thank you for your support.
13 replies
KKinde
Created by NanaGaisie on 1/8/2024 in #💻┃support
Prompt Request Parameter: Using Kinde without SDK
Hi @viv (kinde), I have below the entire auth url and code for kinde as a custom oauth provider with next auth. 
https://<SUBDOMAIN>.kinde.com/oauth2/auth?response_type=code&client_id=<CLIENT_ID>&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fkinde-register&scope=openid+email+profile+offline&state=QCql6gPlaQrhXlgMLmwcXGMIDojecTh4okfTH%2B9x%2BZg%3D&prompt=registration&code_challenge=hQWse3RIXTo7wfpLzb1z7RmkGe85n9GBmtQNFpQD1SE&code_challenge_method=S256
https://<SUBDOMAIN>.kinde.com/oauth2/auth?response_type=code&client_id=<CLIENT_ID>&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2Fapi%2Fauth%2Fcallback%2Fkinde-register&scope=openid+email+profile+offline&state=QCql6gPlaQrhXlgMLmwcXGMIDojecTh4okfTH%2B9x%2BZg%3D&prompt=registration&code_challenge=hQWse3RIXTo7wfpLzb1z7RmkGe85n9GBmtQNFpQD1SE&code_challenge_method=S256
Typescript 
{
      id: "kinde-register",
      name: "Kinde Provider",
      type: "oidc",
      issuer: process.env.KINDE_ISSUER_URL,
      clientId: process.env.KINDE_CLIENT_ID,
      clientSecret: process.env.KINDE_CLIENT_SECRET,
      wellKnown: process.env.KINDE_CLIENT_WELLKNOWN,
      authorization: {
        params: {
          response_type: "code",
          scope: "openid email profile offline",
          state: process.env.AUTH_SECRET,
          prompt: "registration",
        },
      },
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
        };
      },
    },
Typescript 
{
      id: "kinde-register",
      name: "Kinde Provider",
      type: "oidc",
      issuer: process.env.KINDE_ISSUER_URL,
      clientId: process.env.KINDE_CLIENT_ID,
      clientSecret: process.env.KINDE_CLIENT_SECRET,
      wellKnown: process.env.KINDE_CLIENT_WELLKNOWN,
      authorization: {
        params: {
          response_type: "code",
          scope: "openid email profile offline",
          state: process.env.AUTH_SECRET,
          prompt: "registration",
        },
      },
      profile(profile) {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          image: profile.picture,
        };
      },
    },
13 replies
KKinde
Created by NanaGaisie on 1/8/2024 in #💻┃support
Prompt Request Parameter: Using Kinde without SDK
Hi @Oli - Kinde, My strategy is to use NextAuth with Kinde as a custom provider for syncing user data across Kinde and my database. Given the absence of explicit documentation on syncing created users with webhooks in Kinde, this approach provides a flexible solution. It allows me to seamlessly integrate authentication while ensuring effective data synchronization with my database.
13 replies
KKinde
Created by NanaGaisie on 1/8/2024 in #💻┃support
Prompt Request Parameter: Using Kinde without SDK
Hi @Oli - Kinde, No problem. Looking forward to your team's insights.
13 replies
KKinde
Created by NanaGaisie on 1/8/2024 in #💻┃support
Prompt Request Parameter: Using Kinde without SDK
Giving it a registration registration value gives the error
13 replies
KKinde
Created by NanaGaisie on 11/6/2023 in #💻┃support
Integration with Convex Custom Auth
Sure thank you.
14 replies
KKinde
Created by NanaGaisie on 11/6/2023 in #💻┃support
Integration with Convex Custom Auth
"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.
14 replies