RobertoSchneiders

RobertoSchneiders

User authentication across multiple tabs with LiveView

I’ve been reading about session management on Phoenix LiveView for the last couple of days and can’t seem to find a solution for this problem.

My app is basically entirely built with live views, almost all redirects are live redirects. Most views can be accessed whether you are logged in or not, similar to an e-commerce app. I have a basic authentication system generated by the mix phx.gen.auth. The login is a post HTTP request (so we can set the session cookie).

When a user logs in, ideally, the other tabs that are opened in the same browser would notice that and act accordingly. Another option would be to update the session state of those tabs once the user does an action, e.g. click on a link and navigate to another view. The problem is that everything is a live redirect so the other tabs don’t update the session state unless the user refreshes the page, which is not a great user experience.

Does anyone have any idea on how to solve this?

I’m wondering if it would be possible to force a full page reload on the other tabs when logging in.

Most Liked

thomas.fortes

thomas.fortes

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.

shamanime

shamanime

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.

thomas.fortes

thomas.fortes

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…

Last Post!

fteschke

fteschke

Warming up the old discussion.

How about adding this snippet to logged-in pages

<script>new BroadcastChannel('auth-change').postMessage('login')</script>

and this to the login page

<script>
new BroadcastChannel('auth-change')
  .addEventListener('message', () => window.location.reload())
</script>

To keep things purely client-side.

Where Next?

Popular in Questions Top

vegabook
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
siddhant3030
Hi, I have to write a raw query for one of my project. But till now I have used ecto queries and don’t have much experience writing raw ...
New
svb
Hi! Currently I want to submit a form by pressing the Enter key. However, since my input field is of type “textarea” this is just adds a...
New

Other popular topics Top

New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
274 42716 114
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New

We're in Beta

About us Mission Statement