User authentication across multiple tabs with LiveView

You’ve implemented phx.gen.auth so you’re probably aware of the LiveView disconnect when the user logs out. That forces the tabs to reload.

If you come up with a way to identify all the tabs which belongs to the same guest user (ip?, browser fingerprint?, setting an identifier in the session at first page load and using it afterwards [like a fake user id]?) and set the live_socket_id accordingly, you can also disconnect all the “guest” LiveViews to force a page reload that will fetch the newly signed in user.

My naive first approach would be something like:

1. At any new tab check if there’s a token (preferably tamper proof) in local storage and send it to the server, if not, ask for one from the server with an unique identifiable payload (maybe an UUID) and save it in the local storage, in this case only the first page load will actually create a token.

2. Using on_mount use attach_hook/4 to handle the pushed event with the uuid to subscribe to a “guest#{uuid}” channel and the incoming handle_info/2 messages from pubsub.

3. When the user successfully log in you can broadcast a message to the guest#{uuid} channel that will be handled by the handle_info/2 callback of all liveviews subscribed to that channel.

Security considerations aside (short lived tokens, single use, yadda, yadda, yadda) I think someone could build it in a couple hours.

A bit more javascript than I like to write though…

Ok, did a proof of concept.

Global hook at app.html.heex

<main id="main" phx-hook="MainHook" class="px-4 py-20 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-2xl">
    <.flash_group flash={@flash} />
    <%= @inner_content %>
  </div>
</main>

The hook

Hooks.MainHook = {
    mounted() {
        let token = localStorage.getItem("uuid")
        if(token == null) {
            // here you should push an event to the server and fetch a
            // tamper proof token and save it to localStorage and
            // all other security considerations
            token = "1234"
        }
        this.pushEvent("subscribe_to_channel", {uuid: token})
    }
}

The module attaching the server hooks

defmodule ExampleWeb.MultipleTabs do
  import Phoenix.LiveView

  def on_mount(:default, _params, _session, socket) do
    {:cont,
     socket
     |> attach_hook(
       "subscribe_to_channel",
       :handle_event,
       &subscribe_to_channel/3
     )
     |> attach_hook(:handle_reload, :handle_info, &reload_page/2)}
  end

  defp reload_page(_msg, socket) do
    # Here you'll need to figure out a way to get the url
    # to redirect to the correct place
    {:cont, socket |> redirect(to: "/")}
  end

  defp subscribe_to_channel("subscribe_to_channel", %{"uuid" => uuid}, socket) do
    # Here you should validate the token before subscribing
    Phoenix.PubSub.subscribe(Example.PubSub, "reload##{uuid}")
    {:cont, socket}
  end
end

And then just put it in a live session in the router

    live_session :default, on_mount: ExampleWeb.MultipleTabs do
      live "/", HomeLive
    end

Then you can call Phoenix.PubSub.broadcast(Example.PubSub, "reload#1234", []) from anywhere and all pages will redirect to /.

Security considerations aside it is pretty simple.

wow, that was awesome. Thank you both @shamanime @thomas.fortes for your help. The proof of concept was incredibly helpful.

It’s working as expected but I had to change the subscribe_to_channel function to return {:halt, socket} instead of :cont.

  defp subscribe_to_channel("subscribe_to_channel", %{"uuid" => uuid}, socket) do
    Phoenix.PubSub.subscribe(Swayze.PubSub, "reload##{uuid}")
    {:halt, socket}
  end

I’m not sure why but with :cont I was getting an error:

[debug] HANDLE EVENT "subscribe_to_channel" in AppWeb.HomeLive
  Parameters: %{"uuid" => "1234"}
"running subscribe_to_channel"
function AppWeb.HomeLive.handle_event/3 is undefined or private
AppWeb.HomeLive.handle_event("subscribe_to_channel", %{"uuid" => "1234"}, #Phoenix.LiveView.Socket...)

I noticed that the subscribe_to_channel was being executed and the error would happen after that so I tried the :halt and it worked but, to be honest, I’m not 100% sure why. In your example, Is the event being sent to HomeLive after being processed by the subscribe_to_channel function?

Had the same error, not in my computer right now but if I recall correctly I used an empty handle event in my liveview (just a catch all handle event that does nothing and just returns {:noreply, socket})

If all your tabs are in the same session, could you not store your channel-id in the session?
Then there is no need for localstorage.
If the tabs are in different sessions, I would not want them to automagically login to this user.

AFAIK, the session is stored in a cookie by default and live views have no access to it, unless you make an HTTP request, read the session information you want, and then store it somehow in the LiveView.

In my case, I’m not doing any HTTP requests (unless of course, the user refreshes the page) so I can’t really use session information to update the live view states.

To get to your live view initially you have to do a GET request, there in mount/3 you have access to the session. So each tab would have access to the session and use a “token” stored in it to connect to you channel that will them when there was a login.

not quite, because the other tabs already have the liveview mounted, they were opened before the user logged in, so no HTTP requests will be made from that point on.

But when you opened that tab a GET request was issued to your app.