How to deal with refresh tokens?

[loick]

Hi, I hope this is not a duplicate, I didn't find anything related to it though.

I had a question regarding this library: how can we deal with refresh tokens with the useWebSocket hook?

I used to implement the WebSocket myself, but I suffered from connection loss (that's my guess), and I decided to give it a try with react-use-websocket.

I'm using an authenticated application, and I have an access token to do so. On the WebSocket context, I'm giving this auth token as a query parameter of the websocket URL: wss://www.myurl.com?token={token}

It works fine like that, however I wonder how to refresh this token if it becomes invalid. I used to do something like this with vanilla WebSockets:

socket.onclose = async (event) => {
      if (event.code === 4401 && event.reason === 'AuthTokenExpired') {
        await refreshAuthTokens()

        // Retry the connection with the new token
        void createSocket()
      }
    }

On the useWebSocket hook, I can do something close to it:

{
shouldReconnect: () => true,
retryOnError: true,
onClose: async (event) => {
        if (event.code === 4401 && event.reason === 'AuthTokenExpired') {
          await refreshAuthTokens()
        }
      },
}

But I wonder if the retry will be executed properly after that, "automatically". If not, can we have access to a method to retry manually on close or on error?

Thanks in advance for your feedback 🙏

[csvan]

You can memoize the connection URL based on the token

const accessToken = useToken();
const socketURL = useMemo(() => `${apiPath}/?token=${accessToken}`);
const socket = useReactWebSocket(socketURL);

[robtaussig]

@loick Can you give an example what refreshAuthTokens does? Is it generating a new auth token value? Or is it calling an api to extend an expiration date? If the former, then I'd do something like this:

const [authToken, setAuthToken] = useAuthToken(); //A custom hook of yours to fetch the authToken
const websocketApi = useWebSocket(`wss://www.myurl.com`, {
  queryParams: {
    token: authToken,
  },
  shouldReconnect: () => true,
  retryOnError: true,
  onClose: async (event) => {
    if (event.code === 4401 && event.reason === 'AuthTokenExpired') {
      const newAuthToken = await refreshAuthTokens();
      setAuthToken(newAuthToken);
    }
  },
}
}, Boolean(authToken));

If it's the latter, then I think your code should work just fine. Any components that are connecting with the same token will keeping retrying until successful, which should happen once the authToken is refreshed by refreshAuthTokens.