NanaGaisie
NanaGaisie
Explore posts from servers
CCConvex CommunityKKinde
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
CCConvex Community
Created by NanaGaisie on 3/17/2024 in #support-community
User Identity returns null when using useQuery
export const getAll = query({
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity();
    console.log({
      email: identity?.email,
      tokenIdentifier: identity?.tokenIdentifier,
    });

    const tokenIdentifier = identity?.tokenIdentifier;

    if (!tokenIdentifier) {
      throw new ConvexError({
        message: "User not authenticated",
        code: "NOT_AUTHENTICATED",
      });
    }

    const user = await ctx.db
      .query("user")
      .withIndex("by_token", (q) => q.eq("tokenIdentifier", tokenIdentifier!))
      .unique();

    if (!user) {
      throw new ConvexError({ message: "User not found", code: "NOT_FOUND" });
    }

    const workspaces = await ctx.db
      .query("workspace")
      .withIndex("by_user", (q) => q.eq("user", user._id))
      .collect();

    return workspaces;
  },
});
export const getAll = query({
  handler: async (ctx) => {
    const identity = await ctx.auth.getUserIdentity();
    console.log({
      email: identity?.email,
      tokenIdentifier: identity?.tokenIdentifier,
    });

    const tokenIdentifier = identity?.tokenIdentifier;

    if (!tokenIdentifier) {
      throw new ConvexError({
        message: "User not authenticated",
        code: "NOT_AUTHENTICATED",
      });
    }

    const user = await ctx.db
      .query("user")
      .withIndex("by_token", (q) => q.eq("tokenIdentifier", tokenIdentifier!))
      .unique();

    if (!user) {
      throw new ConvexError({ message: "User not found", code: "NOT_FOUND" });
    }

    const workspaces = await ctx.db
      .query("workspace")
      .withIndex("by_user", (q) => q.eq("user", user._id))
      .collect();

    return workspaces;
  },
});
This is my query function.
4 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
CCConvex Community
Created by NanaGaisie on 3/5/2024 in #support-community
Custom Auth With Kinde
Hey, Using the useKindeBrowserClient hook to access the isAuthenticated auth data inside the ConvexProviderWithKinde when signed in returns false but returns true when used in a different component when logged to the console. I would appreciate any explanation of why this happens and possible ways to resolve this issue. The instructions in the docs does not cover this issue.
5 replies
CCConvex Community
Created by NanaGaisie on 3/5/2024 in #support-community
Custom Auth With Kinde
Thanks for the feedback. I have done what you suggested but the JWT token is still not being fetched by the convex client.
5 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