Handle JWT expirations a little better

This commit is contained in:
Dane Everitt 2020-09-27 09:22:09 -07:00
parent 47697e07cf
commit 3e899ffc51
No known key found for this signature in database
GPG Key ID: EEA66103B3D71F53

View File

@ -8,20 +8,27 @@ import Spinner from '@/components/elements/Spinner';
import tw from 'twin.macro'; import tw from 'twin.macro';
export default () => { export default () => {
const server = ServerContext.useStoreState(state => state.server.data); let updatingToken = false;
const [ error, setError ] = useState(false); const [ error, setError ] = useState<'connecting' | string>('');
const { connected, instance } = ServerContext.useStoreState(state => state.socket); 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 setServerStatus = ServerContext.useStoreActions(actions => actions.status.setServerStatus);
const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket); const { setInstance, setConnectionState } = ServerContext.useStoreActions(actions => actions.socket);
const updateToken = (uuid: string, socket: Websocket) => { const updateToken = (uuid: string, socket: Websocket) => {
if (updatingToken) return;
updatingToken = true;
getWebsocketToken(uuid) getWebsocketToken(uuid)
.then(data => socket.setToken(data.token, true)) .then(data => socket.setToken(data.token, true))
.catch(error => console.error(error)); .catch(error => console.error(error))
.then(() => {
updatingToken = false;
});
}; };
useEffect(() => { useEffect(() => {
connected && setError(false); connected && setError('');
}, [ connected ]); }, [ connected ]);
useEffect(() => { useEffect(() => {
@ -33,7 +40,7 @@ export default () => {
useEffect(() => { useEffect(() => {
// If there is already an instance or there is no server, just exit out of this process // 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. // since we don't need to make a new connection.
if (instance || !server) { if (instance || !uuid) {
return; return;
} }
@ -42,7 +49,7 @@ export default () => {
socket.on('auth success', () => setConnectionState(true)); socket.on('auth success', () => setConnectionState(true));
socket.on('SOCKET_CLOSE', () => setConnectionState(false)); socket.on('SOCKET_CLOSE', () => setConnectionState(false));
socket.on('SOCKET_ERROR', () => { socket.on('SOCKET_ERROR', () => {
setError(true); setError('connecting');
setConnectionState(false); setConnectionState(false);
}); });
socket.on('status', (status) => setServerStatus(status)); socket.on('status', (status) => setServerStatus(status));
@ -51,10 +58,20 @@ export default () => {
console.warn('Got error message from daemon socket:', message); console.warn('Got error message from daemon socket:', message);
}); });
socket.on('token expiring', () => updateToken(server.uuid, socket)); socket.on('token expiring', () => updateToken(uuid, socket));
socket.on('token expired', () => updateToken(server.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 => { .then(data => {
// Connect and then set the authentication token. // Connect and then set the authentication token.
socket.setToken(data.token).connect(data.socket); socket.setToken(data.token).connect(data.socket);
@ -63,17 +80,25 @@ export default () => {
setInstance(socket); setInstance(socket);
}) })
.catch(error => console.error(error)); .catch(error => console.error(error));
}, [ server ]); }, [ uuid ]);
return ( return (
error ? error ?
<CSSTransition timeout={150} in appear classNames={'fade'}> <CSSTransition timeout={150} in appear classNames={'fade'}>
<div css={tw`bg-red-500 py-2`}> <div css={tw`bg-red-500 py-2`}>
<ContentContainer css={tw`flex items-center justify-center`}> <ContentContainer css={tw`flex items-center justify-center`}>
<Spinner size={'small'}/> {error === 'connecting' ?
<p css={tw`ml-2 text-sm text-red-100`}> <>
We&apos;re having some trouble connecting to your server, please wait... <Spinner size={'small'}/>
</p> <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> </ContentContainer>
</div> </div>
</CSSTransition> </CSSTransition>