403 error when creating request via API

Andrey Metelsky

Hi  have you received response from Zendesk support? Can you share it to me? Thanks.

Tipene Hughes Pan Vivian I'm getting the same "Invalid authenticity token" error.

I sent a request to Zendesk support 2 days ago, but haven't received a reply yet.

Can anyone help me? I am not sure what to do now.

@Tipene Hughes 

I used this code, but I still does not solve my issue. 

I am using end user to login in zendesk, using email/token: token to post an API, I still get the error message:"error: {title: "Forbidden", message: "Invalid authenticity token"}".

Here is my code snippet:

Can you help check whether there is something wrong? 

fetch("/api/v2/users/me")
        .then((data) => {
            return res = data.json();
        })
        .then((res) => {
            const authToken = res.user.authenticity_token;
            console.log(authToken);
            let myHeaders = new Headers();
            myHeaders.append(
                    "Authorization",
                    "Basic xxxxxxxxxxxxxxxxxxxx"
            );
            myHeaders.append("Content-Type", "application/json");
            myHeaders.append("X-CSRF-Token", authToken);
            const raw = JSON.stringify({
               "organization": {
                        "name": "ttt"
               }
            });
            const requestOptions = {
                method: "POST",
                headers: myHeaders,
                body: raw,
                redirect: "follow",
            };
            fetch('/api/v2/organizations', requestOptions)
                    .then(response => response.text())
                    .then(result => console.log(result))
                    .catch(error => console.log("error", error));
        });

This is likely caused by a clash with how the fetch API handles cookies in the context of the Help Center, when logged in as an agent or admin. You can use the /api/v2/users endpoint to obtain an authenticity (CSRF) token which should fix the issue. Here’s an example of how that could look:
 

fetch("/api/v2/users/me")
.then((data) => {
  return res = data.json();
})
.then((res) => {
  const authToken = res.user.authenticity_token;

  let myHeaders = new Headers();
  myHeaders.append(
    "Authorization",
    "Basic btoa(email/token:API_Token)"
  );
  myHeaders.append("Content-Type", "application/json");
  myHeaders.append("X-CSRF-Token", authToken);

  const raw = JSON.stringify({
      "request": {
        "requester": { "name": "Jane Smith", "email": "jane@example.com" },
        "subject": "TESTING API!",
        "comment": { "body": "My printer is on fire!" },
      },
    });

  const requestOptions = {
    method: "POST",
    headers: myHeaders,
    body: raw,
    redirect: "follow",
  };

  fetch("/api/v2/requests", requestOptions)
    .then(response => response.text())
    .then(result => console.log(result))
    .catch(error => console.log("error", error));
});

 
I hope this helps! Feel free to reach out with any questions.
 
Tipene

Same issue here, not sure what to do...

Bonaliza, where you able to find a solution for this? I'm having the same issue. 

Hey,

I am not making an external app. I'm doing this within our Zendesk Portal using the templates (e.g. new_request_page.hbs). Base on my understanding, ZAFClient is used when building an external app that incorporates Zendesk support? 

My issue is when doing this in Zendesk Portal itself. Also the 404 error only appears when doing a POST request.

Hey Thomas Verschoren,

I think it's an issue with the logged in user or the session...

I tried logging out of Zendesk and tried the exact code on the browser console and it worked...

Any idea why this is the case?

Thanks

Should the code then be different if using this within zendesk?