How to Submit POST Using M2M Token with React Frontend

[sgrobert]

To whom it may concern,

Hi there. I’m currently fully built on a setup compromising of the following with Auth0 somewhat fully integrated:

1. Frontend:

• React Browser Setup making POST to retrieve AUTH0 token via Auth0 server.
• React Browser Setup using retrieved M2M Token based on JWT authentication, to execute GET requests to backend for data.

2. Backend:

• Django Backend Setup authenticating M2M Token with GET requests to release data.

---

The above setup currently works originally without any Auth0 implementation and subsequently, with GET data requests. However, the issue finally popped up recently, when I attempted to make POST data requests.

I do realised that given my setup where,

• request codes based on React,
• token used retrieved via M2M setup,

I was unable to find any sort of solution on integrating a working POST-request submission to my Django backend.

I know that if without any Auth0 authentication, the overall current POST requests will work.

The following is a sample POST-request code of what previously worked without Auth0 and suddenly threw a 500 error when Auth0 is implemented, when presumably a 500 error thrown is that the JWT authentication config might be wrongly coded. I hope that someone can help pinpoint potential code changes I can make, in attempt to rectify it to work through the Auth0 POST-request submission:

let getBackendConfig = {
            headers: { 
                "Content-Type": "application/json",
                Authorization: process.env.REACT_APP_JWT_AUTH0_HEADER + " " + auth0Token,
            },
        };



async function submitLocationViaPOST( dataToPOST ) {
            setIsLocationUploaded("process");
            try {
                Promise.all([
                    await axios
                        .post(urlSubmitLocationPOSTAPI, dataToPOST, getBackendConfig)
                        .then(response => {
                            console.log("👉 urlSubmitLocationPOSTAPI Reply Data: ", response);
                            if (response.status === 201) {
                                // EXECUTE ONLY IF RESPONSE IS "201" --- MEANING ENTRY CREATED SUCCESSFULLY
                                setIsLocationUploaded("finish");
                            }
                        })
                ]);
            }
            catch (err) {
                setIsLocationUploaded("error");
                console.log("😱 urlSubmitLocationPOSTAPI Error: " + err);
            }
        }

Hope to hear back from someone who can assist on this issue. Much appreciated in advance for the help!

[sgrobert]

Hi all,

Just managed to resolve my issue and just like to redirect a potential solution for those who are stuck with this potential problem.

Long story short, you CAN send POST Requests through Django backend with JWT Token, just that there are close to zero documentation online on how to do it. I’ve searched for 7 days over the same documents on google but didn’t manage to find any.

Nonetheless, I have written down my solution in this link, hope it will help anyone who has suffered the “pulling hair effect”: Can Auth0 M2M Token Be Used To Send POST Requests? - #5 by sgrobert

Good luck!