Securing api key in production web app

Three.JS Questions
1

Im currently trying out convai using the web sdk to create a simple web app. I have noticed a pretty big issue which is that the web sdk exposes the api key to the client. The readme in the npm package states to store the api key as an environment variable “VITE_CONVAI_API_KEY” but per the Vite documentation “Variables prefixed with VITE_ will be exposed in client-side source code after Vite bundling”.

Ive looked at alternative implementations - playcanvas, unity web app - and they seem to have the same issue with exposing the api key to the client.

Is it possible to create a web app, using web sdk or other method, where the api key is secure?

Looking at the @convai/web-sdk node package there are frequent references to using an auth token instead of api key, but no documentation on this exists? Is it possible to use an auth token flow? Is there an endpoint we can hit with the api key to obtain an auth token?

Finally is it possible to scope an api key to limit the kinds of calls it can make?

2

yes its possible using convai-auth-token here is the guide. Will be updating the docs soon.
Personal Access Token Guide
Generate an Access Token
POST https://api.convai.com/user/connect
Request Headers
Content-Type: application/json
CONVAI-API-KEY: Your Convai API key
Usage Example

import requests

def get_api_auth_token_with_key(api_key):
url = “https://api.convai.com/user/connect”
headers = {
‘CONVAI-API-KEY’: api_key,
‘Content-Type’: ‘application/json’
}
data = {}

response = requests.post(url, headers=headers, json=data)

if response.status_code != 200:
    raise Exception("Failed to get response from /connect")

response_data = response.json()

return response_data.get('apiAuthToken')

Response
Status Code: 200 OK
Content:
{
“apiAuthToken”: “your_api_auth_token_here”,
“expirationTime”: “<>”
}

Note:
The API key method creates a token valid for 1 hour.
Can generate another token while the current one is still active

Extend the Expiry of Access Token:
POST https://api.convai.com/user/extend-token
Request Headers
Content-Type: application/json
CONVAI-API-KEY: Your Convai API key
Request Body
{
“apiAuthToken”: “your_api_auth_token_here”
}
Note:
apiAuthToken (required): The API authentication token to be extended.

Access-Token instead of Api-Key:
const CONVAI_CONFIG = {
// apiKey: ,
authToken: ,
characterId: ,
// rest remains same
};
Note:
The WebRTC session persist until the session ends naturally, once a session with a bot starts, the token or apikey aren’t used anymore

Revoke Access-Token:
POST https://api.convai.com/user/revoke-token
Request Headers
Content-Type: application/json
CONVAI-API-KEY: Your Convai API key
Request Body
{
“apiAuthToken”: “your_api_auth_token_here”
}
Note:
apiAuthToken (required): The API authentication token to be deleted.

3

Thanks for the info and update!