forked from Alex/Pterodactyl-Panel
Handle JWT expirations a little better
This commit is contained in:
parent
47697e07cf
commit
3e899ffc51
@ -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'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'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>
|
||||||
|
Loading…
Reference in New Issue
Block a user