Kinde•12mo ago

Automatically set token in header

From my understanding in "normal" .net authentication flow the back-end authenticates user based on the cookies whereas with kinde i have to: 1. GetToken() 2. Set token in header Authorization: Bearer token Am i correct or am i using a bad authentication flow? Regardless i have a few pages where i need to instantly make a few authenticated API requests. If I try to retrieve the token getToken() instantly, i'll get an error message:

Auth.tsx:10 TypeError: Cannot read properties of undefined (reading 'getToken')
    at @kinde-oss_kinde-auth-react.js?v=65e6cca0:676:53
    at @kinde-oss_kinde-auth-react.js?v=65e6cca0:576:21
    at Object.next (@kinde-oss_kinde-auth-react.js?v=65e6cca0:585:8)
    at @kinde-oss_kinde-auth-react.js?v=65e6cca0:522:37
    at new Promise (<anonymous>)
    at l (@kinde-oss_kinde-auth-react.js?v=65e6cca0:501:10)
    at @kinde-oss_kinde-auth-react.js?v=65e6cca0:671:12
    at fetchToken (Auth.tsx:10:28)
    at Auth.tsx:15:3
    at commitHookEffectListMount (chunk-UJBO7CMO.js?v=65e6cca0:16904:34)

Auth.tsx:10 TypeError: Cannot read properties of undefined (reading 'getToken')
    at @kinde-oss_kinde-auth-react.js?v=65e6cca0:676:53
    at @kinde-oss_kinde-auth-react.js?v=65e6cca0:576:21
    at Object.next (@kinde-oss_kinde-auth-react.js?v=65e6cca0:585:8)
    at @kinde-oss_kinde-auth-react.js?v=65e6cca0:522:37
    at new Promise (<anonymous>)
    at l (@kinde-oss_kinde-auth-react.js?v=65e6cca0:501:10)
    at @kinde-oss_kinde-auth-react.js?v=65e6cca0:671:12
    at fetchToken (Auth.tsx:10:28)
    at Auth.tsx:15:3
    at commitHookEffectListMount (chunk-UJBO7CMO.js?v=65e6cca0:16904:34)

However if i refresh the page on a page without any instant authroized api requests and then navigate to the page with the code:

    const fetchOrders = async () => {
        const token = await getToken();
        OpenAPI.TOKEN = token;
        OrderService.getOrderGetorders().then((res) => {
            const sorted = res.sort((a: OrderPo, b: OrderPo) => (a.status || 0) - (b.status || 0));
            setOrders(sorted);
        });
    };
    useEffect(() => {
        fetchOrders();
    }, []);

    const fetchOrders = async () => {
        const token = await getToken();
        OpenAPI.TOKEN = token;
        OrderService.getOrderGetorders().then((res) => {
            const sorted = res.sort((a: OrderPo, b: OrderPo) => (a.status || 0) - (b.status || 0));
            setOrders(sorted);
        });
    };
    useEffect(() => {
        fetchOrders();
    }, []);

then it will work. So my questions are: - how would i go about instant authorized api requests? - Is there a way around having to call getToken() and instead relying on cookie based authentication/authroization?

3 Replies

Oli - Kinde•12mo ago

Hi @LIFE, I have passed these questions onto my .NET expert teammate. I will get back to you on your .NET questions soon. Hey @LIFE, You're correct in your understanding of the Kinde authentication flow. The getToken() function is used to securely call your API and pass the bearer token to validate that your user is authenticated. This token is then set in the header as Authorization: Bearer token. As for the error you're encountering, it seems like the getToken() function is being called before the Kinde authentication client is fully initialized. This is why it works when you navigate from a page without instant authorized API requests to a page with such requests - the client has had time to initialize. To handle instant authorized API requests, you could use a loading state to ensure the Kinde client is ready before making the API call. Here's an example:

const { getToken, isLoading } = useKindeAuth();

useEffect(() => {
    if (!isLoading) {
        fetchOrders();
    }
}, [isLoading]);

const fetchOrders = async () => {
    const token = await getToken();
    OpenAPI.TOKEN = token;
    // rest of your code
};

const { getToken, isLoading } = useKindeAuth();

useEffect(() => {
    if (!isLoading) {
        fetchOrders();
    }
}, [isLoading]);

const fetchOrders = async () => {
    const token = await getToken();
    OpenAPI.TOKEN = token;
    // rest of your code
};

cs Regarding your second question, Kinde's authentication flow is based on JWT tokens and not cookies. This is a design choice for security reasons. JWT tokens are stateless, meaning the server does not need to keep a record of tokens for validation, and they can be easily used across different domains, which is not always possible with cookies due to same-origin policies. I hope this helps! Let me know if you have any other questions.

LIFEOP•12mo ago

That is great, isLoading was the missing key! Appreciate the explanation of the authentication flow🫶

Oli - Kinde•12mo ago

No worries at all, glad to hear your problem is solved.

Gaming

Programming

Automatically set token in header