Description
I am using a relay server with RealtimeClient to add custom query parameters (e.g., jwtToken) for authentication. Here's the code snippet I used to append the parameter:
const url = new URL(API_HOST);
url.searchParams.append('jwtToken', jwtToken);
const clientRef = useRef<RealtimeClient>(
new RealtimeClient({
url: url.toString(),
}),
);However, when I log the req.url on the relay server, the query parameters are not being sent correctly. It appears that RealtimeClient adds an additional query parameter (e.g., model) using a ? separator, even when the URL already contains a query string.
As a result, the generated WebSocket URL looks like this:
/?jwtToken=<JWT_TOKEN>?model=gpt-4o-realtime-preview-2024-10-01
Instead of:
/?jwtToken=<JWT_TOKEN>&model=gpt-4o-realtime-preview-2024-10-01
Expected Behavior
The RealtimeClient should correctly append additional query parameters using the & separator when the URL already contains a query string.
Example of the expected URL:
/?jwtToken=<JWT_TOKEN>&model=gpt-4o-realtime-preview-2024-10-01
Actual Behavior
The RealtimeClient appends the additional query parameter using a second ?, resulting in an invalid query string:
/?jwtToken=<JWT_TOKEN>?model=gpt-4o-realtime-preview-2024-10-01
Steps to Reproduce
- Create a
RealtimeClientinstance with a URL that already includes a query parameter (jwtToken). - Log the URL received by the WebSocket server (
req.url) on the relay server. - Observe that the query parameters are malformed with multiple
?.
Summary
The current handling of query parameters in RealtimeClient causes malformed URLs when custom query strings are provided. Fixing this issue will make the library more robust and easier to integrate new query params to url