diff --git a/resources/scripts/components/server/WebsocketHandler.tsx b/resources/scripts/components/server/WebsocketHandler.tsx index fe43e56d5..f53466e0a 100644 --- a/resources/scripts/components/server/WebsocketHandler.tsx +++ b/resources/scripts/components/server/WebsocketHandler.tsx @@ -8,20 +8,27 @@ import Spinner from '@/components/elements/Spinner'; import tw from 'twin.macro'; export default () => { - const server = ServerContext.useStoreState(state => state.server.data); - const [ error, setError ] = useState(false); + let updatingToken = false; + const [ error, setError ] = useState<'connecting' | string>(''); const { connected, instance } = ServerContext.useStoreState(state => state.socket); + const uuid = ServerContext.useStoreState(state => state.server.data?.uuid); const setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus); const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket); const updateToken = (uuid: string, socket: Websocket) => { + if (updatingToken) return; + + updatingToken = true; getWebsocketToken(uuid) .then(data => socket.setToken(data.token, true)) - .catch(error => console.error(error)); + .catch(error => console.error(error)) + .then(() => { + updatingToken = false; + }); }; useEffect(() => { - connected && setError(false); + connected && setError(''); }, [ connected ]); useEffect(() => { @@ -33,7 +40,7 @@ export default () => { useEffect(() => { // If there is already an instance or there is no server, just exit out of this process // since we don't need to make a new connection. - if (instance || !server) { + if (instance || !uuid) { return; } @@ -42,7 +49,7 @@ export default () => { socket.on('auth success', () => setConnectionState(true)); socket.on('SOCKET_CLOSE', () => setConnectionState(false)); socket.on('SOCKET_ERROR', () => { - setError(true); + setError('connecting'); setConnectionState(false); }); socket.on('status', (status) => setServerStatus(status)); @@ -51,10 +58,20 @@ export default () => { console.warn('Got error message from daemon socket:', message); }); - socket.on('token expiring', () => updateToken(server.uuid, socket)); - socket.on('token expired', () => updateToken(server.uuid, socket)); + socket.on('token expiring', () => updateToken(uuid, socket)); + socket.on('token expired', () => updateToken(uuid, socket)); + socket.on('jwt error', (error: string) => { + setConnectionState(false); + console.warn('JWT validation error from wings:', error); - getWebsocketToken(server.uuid) + if (error === 'jwt: exp claim is invalid') { + updateToken(uuid, socket); + } else { + setError('There was an error validating the credentials provided for the websocket. Please refresh the page.'); + } + }); + + getWebsocketToken(uuid) .then(data => { // Connect and then set the authentication token. socket.setToken(data.token).connect(data.socket); @@ -63,17 +80,25 @@ export default () => { setInstance(socket); }) .catch(error => console.error(error)); - }, [ server ]); + }, [ uuid ]); return ( error ?
- -

- We're having some trouble connecting to your server, please wait... -

+ {error === 'connecting' ? + <> + +

+ We're having some trouble connecting to your server, please wait... +

+ + : +

+ {error} +

+ }