Socket.io - Refresh tokens before reconnect

Question

I am creating an Electron app with Socket.io. When the user's computer goes into sleep mode the server disconnects from the client throwing an error "transport close". When the user tries to reconnect I check if the tokens are still valid, if they are not, I refresh them and try to send them to the socketIo server.

The problem I have is that on "reconnect_attempt" socket.io doesn't wait until I refresh the tokens to try reconnecting, it tries reconnecting right away with the old tokens, which get rejected by the server, which also seems to terminate the connection with the user impeding future reconnect attempts.

This is part of my code to connect to the server

module.exports.connect = async (JWT) => {
    return new Promise( async resolve => {

        console.log("connecting to the server")

        const connectionOptions = {
            secure: true,
            query: {token: JWT},
            reconnectionDelay: 4000
        }

        let socket = await socketIo.connect(`${process.env.SERVER_URL}:${process.env.SERVER_PORT}`, connectionOptions);

        resolve(socket)
    })
}

This is my code for reconnect_attempt

socket.on('reconnect_attempt', async () => {

        const getCurrentJWT = require("../../main").getCurrentJWT;

        let JWT = await getCurrentJWT(); //By the time this line returns, socket.io has already tried to reconnect

        if(JWT.success) { //if refreshed successfully
            console.log("Trying to submit new token......", JWT);

            socket.query.token = JWT.JWT;

        } else {
            console.log("Token not refreshed.")
        }
    });

And this is part of what I have on the server

    io.use(async (socket, next) => {

  let token = socket.handshake.query.token;

  //and the instruction from here https://docs.aws.amazon.com/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html
  let tokenIsValid = await checkTokenValidity(token);

  if( tokenIsValid ) {
    next();
  } else {
    next(new Error('invalidToken'));
    console.log("Not valid token")
  }
})

Answer 1

Having the following in your server.

io.use( async function(socket, next) {
    let address = socket.handshake.address;
    run++; // 0 -> 1

    // Validate Token
    const token = socket.handshake.auth.token;
    if(token !== undefined){
        try{
            await tokenVerify(token).then((payload) => {
                const serverTimestamp = Math.floor(Date.now() / 1000);
                const clientTimestamp = payload.exp;

                if(clientTimestamp > serverTimestamp){
                    console.log("Connection from: " + address + " was accepted");
                    console.log("Token [" + token + "] from: " + address + " was accepted");
                    next();
                }else{
                    console.log("Connection from: " + address + " was rejected");
                    console.log("Token [" + token + "] from: " + address + " was rejected");
                    next(new Error("unauthorized"));
                }
            });
        }catch (e) {
            console.log(e);
        }

    }
})

With the code above, the server will respond "unauthorized" if the token isn't valid.

So, on the client-side, we can catch that message as shown below.

socket_io.on("connect_error", (err) => {
        if(err?.message === 'unauthorized'){
            var timeout = (socket_reconnection_attempts === 0 ? 5000 : 60000)
            console.log("Trying to reconnect in the next " + (timeout / 1000) + ' seconds')
            setTimeout(function (){
                console.log('Trying to reconnect manually')
                socket_reconnection_attempts++;
                loadAuthToken().then(function (token) {
                    socket_io.auth.token = token;
                    socket_io.connect();
                })
            }, timeout)
        }
    });

With the code above, the client-side will try to reconnect and refresh the token only if the error message is "unauthorized."

The variable "socket_reconnection_attempts" is to avoid sending a massive number of reconnection attempts in a short period of time.

Answer 2

In short, you can use auth for this.

While connecting

auth: {
    token: token 
} 

In the time of reconnection

socket.auth.token = "NEW_TOKEN";
socket.connect();

I can share socket io implementation for this and you can modify it as your need.

For the client-side,

let unauthorized = false;
let socket = io.connect('ws://localhost:8080', {
    transports: ["websocket"],
    auth: {
        token: GET_YOUR_TOKEN()
    }
});
socket.on("connect", () => {
    unauthorized = false;
});
socket.on('UNAUTHORIZED', () => {
    unauthorized = true;
});
socket.on("disconnect", (reason) => {
    if (reason === "io server disconnect") {
        if(unauthorized) {
            socket.auth.token = token;
        } 
        socket.connect();
    }
});
socket.on('PING', ()=>{
    socket.emit('PONG', token);
});

For the server-side

io.on("connection", (socket) => {
    socket.on('PONG', function (token) {
        if (isValidToken(token) == false) {
            socket.emit("UNAUTHORIZED");
            socket.disconnect();
        }
    });
    setInterval(() => {
        socket.emit('PING');
    }, <YOUR-TIME>);
});