Handle JWT expirations a little better

Author: DaneEveritt

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);
+
+            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(server.uuid)
+        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 ?
             <CSSTransition timeout={150} in appear classNames={'fade'}>
                 <div css={tw`bg-red-500 py-2`}>
                     <ContentContainer css={tw`flex items-center justify-center`}>
-                        <Spinner size={'small'}/>
-                        <p css={tw`ml-2 text-sm text-red-100`}>
-                            We&apos;re having some trouble connecting to your server, please wait...
-                        </p>
+                        {error === 'connecting' ?
+                            <>
+                                <Spinner size={'small'}/>
+                                <p css={tw`ml-2 text-sm text-red-100`}>
+                                    We&apos;re having some trouble connecting to your server, please wait...
+                                </p>
+                            </>
+                            :
+                            <p css={tw`ml-2 text-sm text-red-100`}>
+                                {error}
+                            </p>
+                        }
                     </ContentContainer>
                 </div>
             </CSSTransition>