Hi, we are building our private app for Zendesk Support dashboard which enables the agents to search, filter, and also save articles. We use ZAFClient and Vue 3 to build this app, so this app is literally a Vue SPA running as Zendesk Support private app.

This app uses axios to make call into Zendesk APIs to get its required data, such as currently logged in agent data, searched articles, and currently logged in agent's votes which later be processed to show agent's saved articles.
Here is some zendesk APIs that are being used

• GET /api/v2/users/me - get currently logged in agent data
• GET /api/v2/help_center/users/me/votes - get votes as a reference for agent's saved articles
• POST /api/v2/help_center{/locale}/articles/{article_id}/up - vote/save an article for the current agent
• DELETE /api/v2/help_center/votes/{vote_id} - unvote/unsave an article for the current agent
• ...

The app uses Authorization Bearer Token for those API calls, which the ACCESS TOKEN itself is hardcoded into our `.env` and the access token itself is from our testing agent.

We also track some events in the app, such as using search field to search articles, clicking save/unsave on the article cards, or when filter is applied. This is done by feeding a json payload to our event tracking API. Here's an example of the event tracking payload:

{
  evn: <event_name>,
  agent_id: <agent_id>,
  ticket_id: <ticket_id>,
  ....
}

But we have some problems:

1. The call to GET /api/v2/users/me does not return the currently logged in agent data, instead it always return the data of the testing agent - We have already fixed this by using window.myClient.get('currentUser')
2. The call to POST /api/v2/help_center{/locale}/articles/{article_id}/up will make the freshly created vote to have the testing agent's user_id instead of currently logged in user_id
3. The call to GET /api/v2/help_center/users/me/votes will return the votes from the testing agent instead of currently logged in agent

In order to tackle those problems above, is there any way to generate access token via client side using axios, so we don't have to use hardcoded access token anymore? I tried to call POST https://bukabantuan.zendesk.com/api/v2/oauth/tokens after getting user data via window.myClient.get('currentUser'), but it suffers from CORS error.

*Note:

• we have created a dedicated API_TOKEN and Oauth Client for this app
• we use Basic Authorization with user email and api token ({email_address}/token:{api_token}) for POST https://bukabantuan.zendesk.com/api/v2/oauth/tokens. Request body:

{
    "token": {
        "client_id": "<our_app_client_id>",
        "scopes": [
            "read",
            "write"
        ]
    }
}

Any immediate help will be greatly appreciated.
Thanks in advance,
Adhitama

----------------------------------------------

App Screenshots:

- Search Articles

- Filter Articles

- Saved Articles