Kinde•6mo ago

Token being sent

Im using react trying to get a token to send to my express backend...getToken is not working... any ideas? (I am willing to pay someone to make a video showing a todo application between react/express/mongo and incoperating Kinde, lmk if anyone would be interested)

6 Replies

Oli - Kinde•6mo ago

Hey @Daniel Ridley, Sorry to hear you're having trouble with getToken. Let's see if we can figure this out. First, make sure you're using the getToken function from the useKindeAuth hook. Here's an example of how you might use it:

import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

const { getToken } = useKindeAuth();

const fetchData = async () => {
    try {
        const accessToken = await getToken();
        const res = await fetch('<your-api>', {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        });
        const { data } = await res.json();
        console.log({ data });
    } catch (err) {
        console.log(err);
    }
};

import { useKindeAuth } from "@kinde-oss/kinde-auth-react";

const { getToken } = useKindeAuth();

const fetchData = async () => {
    try {
        const accessToken = await getToken();
        const res = await fetch('<your-api>', {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        });
        const { data } = await res.json();
        console.log({ data });
    } catch (err) {
        console.log(err);
    }
};

If you're still having issues, could you provide a bit more context. Also, if you are willing to send me a recording of what happens in a DM that would be super helpful.

(I am willing to pay someone to make a video showing a todo application between react/express/mongo and incoperating Kinde, lmk if anyone would be interested)

Generous offer, by the way.

Daniel Ridley•6mo ago

I've attempted to use object destructuring and dot notation for this part, but neither approach seems effective. Could you suggest any alternatives?

Oli - Kinde•6mo ago

Let me reach out to my team on this issue and get back to you.

Derek•4mo ago

This is a slightly different use case, but similar idea. The array for the second useEffect parameter is the list of variables that are tracked to determine whether the logic is triggered again on each render. In my case, I'm calling a GraphQL endpoint, but fetch would be similar:

function Sandboxes() {
    const [pageNumber, _setPageNumber] = useState(1);
    const [pageSize, _setPageSize] = useState(100);
    const [status, _setStatus] = useState("all");
    const { getToken } = useKindeAuth();
    const [getSandboxes, { loading, error, data }] = useGetSandboxesByCriteriaLazyQuery();

    useEffect(() => {
        async function fetchSandboxes() {
            const token = await getToken();
            getSandboxes({
                fetchPolicy: 'network-only',
                context: {
                    headers: {
                        "Authorization": `Bearer ${token}`
                    }
                },
                variables: {
                    pageNumber: pageNumber,
                    pageSize: pageSize,
                    status: status,
                }
            })
        }
        fetchSandboxes();
    }, [pageNumber, pageSize, status]);

    return <h2>
        {loading && <p>Loading sandboxes...</p>}
        {error && <p>Error finding sandboxes... {error?.message}</p>}
        {data?.sandboxes &&
            data?.sandboxes.results.map((sandbox, index) => (
                <p key={sandbox?.id ?? index}>
                    {sandbox?.slug ?? "NO SLUG"}
                </p>
            ))}
    </h2>
}

export default Sandboxes

function Sandboxes() {
    const [pageNumber, _setPageNumber] = useState(1);
    const [pageSize, _setPageSize] = useState(100);
    const [status, _setStatus] = useState("all");
    const { getToken } = useKindeAuth();
    const [getSandboxes, { loading, error, data }] = useGetSandboxesByCriteriaLazyQuery();

    useEffect(() => {
        async function fetchSandboxes() {
            const token = await getToken();
            getSandboxes({
                fetchPolicy: 'network-only',
                context: {
                    headers: {
                        "Authorization": `Bearer ${token}`
                    }
                },
                variables: {
                    pageNumber: pageNumber,
                    pageSize: pageSize,
                    status: status,
                }
            })
        }
        fetchSandboxes();
    }, [pageNumber, pageSize, status]);

    return <h2>
        {loading && <p>Loading sandboxes...</p>}
        {error && <p>Error finding sandboxes... {error?.message}</p>}
        {data?.sandboxes &&
            data?.sandboxes.results.map((sandbox, index) => (
                <p key={sandbox?.id ?? index}>
                    {sandbox?.slug ?? "NO SLUG"}
                </p>
            ))}
    </h2>
}

export default Sandboxes

Oli - Kinde•4mo ago

Hey @Daniel Ridley, A huge apologise, this message dropped of my teams radar. Please let me know if you are still experiencing this issue? If you are, I will raise this with urgency with my team. Also thanks @Derek for weighing in here. Did your code above work for you?

Gaming

Programming

Token being sent