Laravel Echo not connecting to private WebSocket after login

Question

I have put my WebSocket subscription logic in may app.tsx file because in any other component I keep getting multiple connections. (maybe this is wrong?)

app.tsx

        const channel = window.Echo.private('socket_name');

        channel.subscribed(() => {
            //
        }).listen('broadcast_name', (e: any) => {
            //
        });

The issue I have with this is that it fires before the user has logged in and since this is not re-rendered when the user logs in, there is further attempt to connect until the page is refreshed.

How do I get this WebSocket to connect after the user has logged in (without a refresh)?