title: how to i establish socket.io connection only AFTER logging in , REACT + socket.io
body: <p>can i get help with something im stuck on for awhile
  im establishing a socket .io connection in my frontend with react context,
  but the connection is triggered as soon as my web load, i want it to connect only AFTER i login
  im running a jwt auth on my socket connection and what happens is it fails to auth because i dont have a chance to login before it checks it
  and then after i log in it wont establish connection untill i manually reload the page...
  </p>
  <p>client:</p>
  <pre><code>import React from 'react';
  import io from 'socket.io-client'
  
  import { SOCKET_IO_URL } from '../api/config';
  
  
  const jwt = JSON.parse(localStorage.getItem('profile'))?.token
   
  console.log(jwt)
  export const socket = io.connect(SOCKET_IO_URL, {query: {token: jwt}});
  
  
  
  export const SocketContext = React.createContext()
  
  </code></pre>
  <p>server:</p>
  <pre><code>io.on('connection', (socket =&gt; {
    const token = socket.handshake.query.token;
    try {
      if (!token) throw new Error(&quot;TOKEN NOT FOUND&quot;)
      jwt.verify(token,'secret') 
    } catch (error) {
      console.log('VERIFICATION FAILED')
      socket.disconnect()
    }
    console.log('socket conected', socket.id)
  
    socket.on('request_fetch', () =&gt; {
      socket.broadcast.emit('response_fetch')
    })
  }))
  </code></pre>