TypeScript - Phaser 3 - mySQL - socket.io: Multiple game instances created after failed login

I am having this issue where after I fail to sign in and then successfully sign into my game it will create a game instance for every time I failed to login. This also happens on failed sign up attempts. Any help would be greatly appreciated.

My repo: https://github.com/RobertHolstein/ElevaidusTS

Failed login attemped

Two game instances after giving correct sign in info

SERVER

private listen(): void {
        this.server.listen(this.port, () => {
            console.log(`\n\n===============>\t running server on port ${this.port}\n`);
        });

        this.io.on('connect', (socket: socketIo.EngineSocket) => {
            console.log(`\n\n===============>\t connected client on port ${this.port}\n`);
            socket.on('messageFromFrontend', (m: string) => {
                console.log(`\n\n===============>\t ${m}\n`);
                this.io.emit('messageFromBackend', 'Hello from the backend!');
            });

            socket.on('signIn', (signInInfo: any) => {
                let sql = 'SELECT * FROM player WHERE username = ? AND password = ?';
                var query = this.db.query(sql, [signInInfo.username,signInInfo.password], (err, res) => {
                    if (err) {
                        console.log(err);
                        socket.emit('errorFromBackend', err.code);                        
                    }else if(res.length === 0){
                        socket.emit('errorFromBackend', 'username and or password was incorrect');                 
                    }else{
                        console.log(`\n\n===============>\t Player logging in\n`)
                        console.log(`===============>\t username: ${signInInfo.username}\n`)
                        console.log(`===============>\t password: ${signInInfo.password}\n`)
                        this.CreatePlayer(socket, { player: res[0], isNew: false });
                    }
                })
            })

            socket.on('signUp', (signUpInfo) => {
                let postPlayer = { username: signUpInfo.username, password: signUpInfo.password}
                let sql = 'INSERT INTO player SET ?';
                let query = this.db.query(sql, postPlayer, (err, res) => {
                    if(err){
                        console.log(err);
                        if(err.code === 'ER_DUP_ENTRY'){
                            socket.emit('errorFromBackend', 'this username is already in use');
                        }else{
                            socket.emit('errorFromBackend', err.code);
                        }
                    }else{
                        let player = this.CreatePlayer(socket, {player: {id:res.insertId}, isNew: true});
                    }
                }) 
            })
            
            socket.on('disconnect', () => {
            console.log(`\n\n===============>\t client disconnected\n`);
            });
        });
    }

CLIENT

/// <reference path="./phaser.d.ts"/>

import * as io from 'socket.io-client';
import 'phaser';
import { GameScene } from "./scenes/gameScene";

var signInDiv = document.getElementById('signInDiv');
var signInUsername = document.getElementById('signInUsername') as HTMLInputElement;
var signInPassword = document.getElementById('signInPassword') as HTMLInputElement;
var signInBtn = document.getElementById('signInBtn');
var signUpBtn = document.getElementById('signUpBtn');

const config: GameConfig = {
  title: "Elevaidus",
  version: "1.0",
  width: 640,
  height: 640,
  type: Phaser.AUTO,
  parent: "game",
  scene: [ GameScene ],
  input: {
    keyboard: true
  },
  physics: {
    default: "arcade",
    arcade: {
      gravity: { y: 0 },
      debug: false
    }
  },

};



export class ioService {
  private socket: SocketIOClient.Socket;

  constructor() {
    this.socket = io.connect();
    this.sendMessage('hello from the frontend!');
  }

  // EMITTER
  private sendMessage(msg: string) {
    this.socket.emit('messageFromFrontend', msg );
    this.socket.on('messageFromBackend', (m: string) => {
      console.log(`\n\n===============>\t ${m}\n`);
      });
  }

      public SignIn(): void {
        this.socket.emit('signIn', {username: signInUsername.value, password: signInPassword.value })
        this.socket.on('signedIn', (playerInfo: any) => {
          this.CreateGame(playerInfo);
        })
        this.socket.on('errorFromBackend', (err: string) => {
          alert(err);
        })
      }
      
      public SignUp(): void {
        this.socket.emit('signUp', {username: signInUsername.value, password: signInPassword.value })
        this.socket.on('signedUp', (playerInfo: any) => {
          this.CreateGame(playerInfo)
        })
        this.socket.on('errorFromBackend', (err: string) => {
          alert(err);
        })
      }
  
  private CreateGame(playerInfo: any): void{
    signInDiv.hidden = true;
    var game = new Phaser.Game(config);
    console.log(playerInfo)
  }
}

var socket = new ioService();

signInBtn.onclick = () => {
  socket.SignIn();
}
signUpBtn.onclick = () => {
  socket.SignUp();
}