Kinde•9mo ago

error: getuser is not a function

I get the error:

Header.tsx:18 Uncaught (in promise) TypeError: getUser is not a function
    at getUsr (Header.tsx:18:22)
    at Header.tsx:22:3
    at commitHookEffectListMount (chunk-ZRJG7NCB.js?v=c5ae9bae:16904:34)
    at commitPassiveMountOnFiber (chunk-ZRJG7NCB.js?v=c5ae9bae:18152:19)
    at commitPassiveMountEffects_complete (chunk-ZRJG7NCB.js?v=c5ae9bae:18125:17)
    at commitPassiveMountEffects_begin (chunk-ZRJG7NCB.js?v=c5ae9bae:18115:15)
    at commitPassiveMountEffects (chunk-ZRJG7NCB.js?v=c5ae9bae:18105:11)
    at flushPassiveEffectsImpl (chunk-ZRJG7NCB.js?v=c5ae9bae:19486:11)
    at flushPassiveEffects (chunk-ZRJG7NCB.js?v=c5ae9bae:19443:22)
    at chunk-ZRJG7NCB.js?v=c5ae9bae:19324:17

Header.tsx:18 Uncaught (in promise) TypeError: getUser is not a function
    at getUsr (Header.tsx:18:22)
    at Header.tsx:22:3
    at commitHookEffectListMount (chunk-ZRJG7NCB.js?v=c5ae9bae:16904:34)
    at commitPassiveMountOnFiber (chunk-ZRJG7NCB.js?v=c5ae9bae:18152:19)
    at commitPassiveMountEffects_complete (chunk-ZRJG7NCB.js?v=c5ae9bae:18125:17)
    at commitPassiveMountEffects_begin (chunk-ZRJG7NCB.js?v=c5ae9bae:18115:15)
    at commitPassiveMountEffects (chunk-ZRJG7NCB.js?v=c5ae9bae:18105:11)
    at flushPassiveEffectsImpl (chunk-ZRJG7NCB.js?v=c5ae9bae:19486:11)
    at flushPassiveEffects (chunk-ZRJG7NCB.js?v=c5ae9bae:19443:22)
    at chunk-ZRJG7NCB.js?v=c5ae9bae:19324:17

i've tried two different approches:

    const { getUser, isLoading } =
        useKindeAuth();

    useEffect(() => {
        if (!isLoading) return;

        const getUsr = async () => {
            console.log("getting user");
            const usr = await getUser();
            return usr;
        };

        getUsr().then((user) => {
            console.log("name", user.given_name);
            console.log("name family", user.family_name);
        });
    }, [isLoading]);

    const { getUser, isLoading } =
        useKindeAuth();

    useEffect(() => {
        if (!isLoading) return;

        const getUsr = async () => {
            console.log("getting user");
            const usr = await getUser();
            return usr;
        };

        getUsr().then((user) => {
            console.log("name", user.given_name);
            console.log("name family", user.family_name);
        });
    }, [isLoading]);

const usr = await getUser();
console.log("name", usr.given_name);

const usr = await getUser();
console.log("name", usr.given_name);

I was unable to find a lot of documentation on this except for this https://kinde.com/docs/developer-tools/react-sdk/#api-references--usekindeauth-hook:~:text=.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c%3B-,getUser,-Link%20to%20this

Kinde Docs

React SDK - Developer tools - Help center

Our developer tools provide everything you need to get started with Kinde.

15 Replies

sszczep•9mo ago

I think there is an issue with docs and context typing. You can see getUser type defined here: https://github.com/kinde-oss/kinde-auth-react/blob/main/src/state/KindeContext.ts, however, it’s never set in the reducer: https://github.com/kinde-oss/kinde-auth-react/blob/main/src/state/reducer.ts. Just replace getUser method call with accessing user property: const { isLoading, user } = useKindeAuth(). You probably also want to write if (isLoading) return; (the condition should be inverted). Would be great if someone from Kinde team could chime in

LIFEOP•9mo ago

Of course! I totally forgot about

const {user} = useKindeAuth();

const {user} = useKindeAuth();

Went to the docs and found getUser()... Thanks for the help!

dave_kinde•9mo ago

Hey @LIFE I think the problem you're facing is that getUser isn't async, but essentially you're probably better off grabbing the user object as suggested by @sszczep (thanks for jumping in by the way)

LIFEOP•9mo ago

tried both async and synchronous. Regardless, i read up on this before proceeding: https://discord.com/channels/1070212618549219328/1204559393535037480/1204563090327343155 https://discord.com/channels/1070212618549219328/1204559393535037480/1204923021106749450

sszczep•9mo ago

@Dave - Kinde @LIFE it doesn't matter if you await the synchronous function. According to the docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await, if the non-thenable value is specified, an already-fulfilled Promise is constructed and used. So basically await operator wraps the returned data in Promise.resolve() and returns the data on next tick. getUser method was just never implemented in React SDK from what I can see. Its type definition was added in this commit: https://github.com/kinde-oss/kinde-auth-react/commit/c8d5abe8ba67fba6a011f91446ed2ff31cf2d7d5, however, it was never defined in context provider. Linked threads are mentioning the NextJS SDK, and yes, the getUser method is present there: https://github.com/kinde-oss/kinde-auth-nextjs/blob/059547d6b6eb88b808aab04c653a380ecdb30ab3/src/frontend/AuthProvider.jsx#L225 I strongly believe it has been overlooked. In that case, I would recommend adding the following code to KindeProvider.tsx file:

const getUser = useCallback(() => client!.getUser(), [client]);

const getUser = useCallback(() => client!.getUser(), [client]);

and adding it to contextValue:

return {
  ...,
  getUserOrganizations,
  getUser,
}

return {
  ...,
  getUserOrganizations,
  getUser,
}

I also took a look at getUser() implementation in createKindeClient.ts in kinde-auth-pkce-js SDK : https://github.com/kinde-oss/kinde-auth-pkce-js/blob/057eaa2677572cafe790df2e636104a6fbdbd077/src/createKindeClient.ts#L398. I believe it would be better if the return type was nullable. Something like:

const getUser = () => {
  return store.getItem(storageMap.user) as KindeUser | undefined;
};

const getUser = () => {
  return store.getItem(storageMap.user) as KindeUser | undefined;
};

Looking at the implementation and store usage here: https://github.com/kinde-oss/kinde-auth-pkce-js/blob/main/src/state/store.ts, items[storageMap.user] might return undefined in some cases (eg. user is not logged in yet).
Unfortunately the proposed change could be breaking.

GitHub

kinde-auth-nextjs/src/frontend/AuthProvider.jsx at 059547d6b6eb88b8...

Kinde NextJS SDK - authentication for server rendered apps - kinde-oss/kinde-auth-nextjs

GitHub

kinde-auth-pkce-js/src/createKindeClient.ts at 057eaa2677572cafe790...

Kinde vanilla JavaScript authentication for SPAs using PKCE flows. Can be used with Vue / Angular or any JS framework - kinde-oss/kinde-auth-pkce-js

sszczep•9mo ago

Even better, all the store items should be properly typed to avoid type casting.

dave_kinde•9mo ago

@sszczep Looking again, you're totally right. I think I've just been in the habit of using

const {user} = useKindeAuth()

const {user} = useKindeAuth()

I'm not sure we need a getUser as well which would essentially return the same thing as user I mean it we could add it for sure, but I wonder if it makes things more confusing

sszczep•9mo ago

I think it would be neat to have a uniform API for users jumping across similar SDKs. Either remove, or add getUser everywhere to avoid confussion like here. The decisision if of course up to you. It works the same way in NextJS SDK

dave_kinde•9mo ago

That makes sense, it would be pretty low effort to add

sszczep•9mo ago

I can make a PR if you'd like.

dave_kinde•9mo ago

I'd love that

sszczep•9mo ago

@Dave - Kinde https://github.com/kinde-oss/kinde-auth-react/pull/43

GitHub

Add missing getUser method definition by sszczep · Pull Request #43...

Explain your changes Adds missing getUser method definition. It was declared in context typing, however, was not accessible, which could be confusing for new comers and users coming from NextJS SDK...

dave_kinde•9mo ago

Like a rocket

Daniel_Kinde•9mo ago

@sszczep This has been published in version 3.0.28

sszczep•9mo ago

Awesome! Thanks

Gaming

Programming

error: getuser is not a function