Kinde•10mo ago

Integrating with React, Vite, URQL

hey folks, im trying to intergrate Kinde auth with urql, and I'm running into some issues. first off, here's the code:

export const GraphqlProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const auth = useKindeAuth();
  const [token, setToken] = useState<string>(
    JSON.parse(localStorage.getItem("kinde_token") ?? "{}").access_token ?? ""
  );

  const doRefreshToken = useCallback(async () => {
    // Check that auth is defined and getToken is a function
    if (auth == null || typeof auth.getToken !== "function") return;
    try {
      const newToken = await auth.getToken();
      if (newToken != null) {
        setToken(newToken);
      }
    } catch (error) {
      console.error("Error refreshing token:", error);
    }
  }, [auth]);

  useEffect(() => {
    doRefreshToken();
  }, [auth]);

  const graphqlClient = useMemo(() => {
    return new Client({
      url: `http://${baseGraphqlUrl}/graphql`,
      exchanges: [
        authExchange(async (utils) => {
          return {
            addAuthToOperation(operation) {
              return utils.appendHeaders(operation, {
                Authorization: `Bearer ${token}`,
              });
            },
            didAuthError(error, _operation) {
              return error.graphQLErrors.some(
                (e) => e.extensions?.code === "FORBIDDEN"
              );
            },
            refreshAuth: async () => {
              doRefreshToken();
            },
            willAuthError(_operation) {
              if (token == null || token === "") {
                return true;
              }
              return false;
            },
          };
        }),
        ...
      ],
    });
  }, [token]);

  return <Provider value={graphqlClient}>{children}</Provider>;
};

export const GraphqlProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  const auth = useKindeAuth();
  const [token, setToken] = useState<string>(
    JSON.parse(localStorage.getItem("kinde_token") ?? "{}").access_token ?? ""
  );

  const doRefreshToken = useCallback(async () => {
    // Check that auth is defined and getToken is a function
    if (auth == null || typeof auth.getToken !== "function") return;
    try {
      const newToken = await auth.getToken();
      if (newToken != null) {
        setToken(newToken);
      }
    } catch (error) {
      console.error("Error refreshing token:", error);
    }
  }, [auth]);

  useEffect(() => {
    doRefreshToken();
  }, [auth]);

  const graphqlClient = useMemo(() => {
    return new Client({
      url: `http://${baseGraphqlUrl}/graphql`,
      exchanges: [
        authExchange(async (utils) => {
          return {
            addAuthToOperation(operation) {
              return utils.appendHeaders(operation, {
                Authorization: `Bearer ${token}`,
              });
            },
            didAuthError(error, _operation) {
              return error.graphQLErrors.some(
                (e) => e.extensions?.code === "FORBIDDEN"
              );
            },
            refreshAuth: async () => {
              doRefreshToken();
            },
            willAuthError(_operation) {
              if (token == null || token === "") {
                return true;
              }
              return false;
            },
          };
        }),
        ...
      ],
    });
  }, [token]);

  return <Provider value={graphqlClient}>{children}</Provider>;
};

I keep running into undefined errors, where the output of the useKindeAuth hook is undefined

8 Replies

roshanOP•10mo ago

I've tried directly using the getToken and isAuthenticated functions inside refreshAuth , addAuthToOperation and willAuthError but I get the same undefined issue

Oli - Kinde•10mo ago

Hey @space, I can help you out. Which Kinde SDK are you using?

roshanOP•10mo ago

react sdk! might be related to https://discord.com/channels/1070212618549219328/1207085158080188438 okay, unless i explicitly check if auth.isLoading it will throw an undefined type error -

const doRefreshToken = useCallback(async () => {
    // FIX: Commenting this line here will throw a typeerror
    if (auth.isLoading) return; 
    try {
      // Check that auth is defined and getToken is a function
      if (auth == null) return;
   
      if (auth.getToken == null || typeof auth?.getToken !== "function") return;

      const newToken = await auth.getToken();
      if (newToken != null) {
        setToken(newToken);
      }
    } catch (error) {
      console.error("Error refreshing token:", error);
      return;
    }
  }, [auth]);

const doRefreshToken = useCallback(async () => {
    // FIX: Commenting this line here will throw a typeerror
    if (auth.isLoading) return; 
    try {
      // Check that auth is defined and getToken is a function
      if (auth == null) return;
   
      if (auth.getToken == null || typeof auth?.getToken !== "function") return;

      const newToken = await auth.getToken();
      if (newToken != null) {
        setToken(newToken);
      }
    } catch (error) {
      console.error("Error refreshing token:", error);
      return;
    }
  }, [auth]);

i dont think this is intended behavior? if it is, the typedef should capture this

Oli - Kinde•10mo ago

Hey @space, I will get one of my React expert teammates to look into this for you.

Daniel_Kinde•10mo ago

Hi @space I am looking into this, I am trying to recreate your setup locally, if you are able to provide a minimal reproduction that would super helpful.

roshanOP•10mo ago

hey! sorry i missed this text, give me one sec

roshanOP•10mo ago

This should work as a minimal example, you just need to point it to a graphql server and fix the kinde auth config

minimal.ts

roshanOP•10mo ago

this just tries to instantiate the graphql server without checking if auth.isLoading which should throw an undefined type error because auth.getToken is not defined

Gaming

Programming

Integrating with React, Vite, URQL