Log out causes "attempting to reconnect" messages on additional browser tabs

Phoenix Forum Questions / Help
, ,
1

I used the mix phx.gen.auth to generate the basic authentication system for my LiveView app. I’m following this security model documentation and one thing I can’t get right at the moment is the disconnect all instances of a live user.

When a user logs out in one browser tab, everything works fine in that tab and sure enough, the other tabs/live view sessions are immediately disconnected, however, on those additional tabs the loading top bar and the “We can’t find the internet. Attempting to reconnect” message is shown. It stays on the screen for about 10s before the redirect is made and the “You must log in to access this page” error is displayed.
image

I was expecting the redirect to happen immediately and I wasn’t expecting any “attempting to reconnect” messages to show up in this situation.

Is this expected behavior?

2

The section Disconnecting all instances of a live user is going to be helpful.

Phoenix LiveView uses a heartbeat to monitor the websocket connection so when the websocket disconnects, it gives you an error.

So what you do is broadcast to all subscribed live users that they are disconnected.

MyAppWeb.Endpoint.broadcast("users_socket:#{user.id}", "disconnect", %{})
3

But that is what he is doing because he used phx.gen.auth:

Note: If you use mix phx.gen.auth to generate your authentication system, lines to that effect are already present in the generated code. The generated code uses a user_token instead of referring to the user_id.

It seems the websocket connection handling in liveview javascript is a bit flakey, even on mobile browsers almost always show that annoying “can’t find the internet”, especially when you switch tabs and come back or open and close the device.

Why the need to display this jarring housekeeping message is beyond me, it tarnishes all liveview sites IMO.

1 Like
4

I found a better solution.

Instead of broadcasting the “Disconnect” event I’m subscribing and broadcasting to a reload event that forces a full page reload instead of disconnecting the socket. I left more details in this post