Am I using session storage correctly with LiveView?

Phoenix Forum Questions / Help
, ,
1

I’m working on a “learn something” project at work using Phoenix LiveView. My team is building a planning poker app (similar to the one featured at ElixirConf). We had the idea to not have registered users but instead to try to track users using cookies or local storage. We wanted to do this so we can know which connection is the person who created a particular prompt (“How many story points do you think __ feature should be?”). Originally we thought cookies would be the way to go but then I saw this thread: Accessing cookies in Phoenix.Socket connect (“Still I don’t think we should allow cookies to be read.” @josevalim )

Here is my first implementation. I created a plug to put a token in the session.

defmodule PokerWeb.SessionToken do
  @impl Plug

  def init(opts) do
    opts
  end

  @impl Plug
  @spec call(Plug.Conn.t(), any) :: Plug.Conn.t()
  def call(conn, _opts) do
    case Plug.Conn.get_session(conn, :user_token) do
      nil ->
        timestamp =
          DateTime.utc_now()
          |> to_string()

        token = Phoenix.Token.sign(PokerWeb.Endpoint, "user_salt", timestamp)

        conn
        |> Plug.Conn.put_session(:user_token, token)

      _ ->
        conn
    end
  end
end

Router:

defmodule PokerWeb.Router do
  use PokerWeb, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug Phoenix.LiveView.Flash
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug PokerWeb.SessionToken
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", PokerWeb do
    pipe_through :browser

    live "/rooms/new", RoomLive.New, session: [:user_token] # here is the token being made available to the live view
    live "/rooms/:id", RoomLive.Show, session: [:user_token]
    live "/lobby", LobbyLive.Index, session: [:user_token]
    get "/", PageController, :index
  end

end

LiveView:

defmodule PokerWeb.RoomLive.Show do
    use Phoenix.LiveView
    use Phoenix.HTML

    alias PokerWeb.RoomView
    alias Poker.Lobby

    def render(assigns) do
      RoomView.render("show.html", assigns)
    end

    def mount(session, socket) do
      {:ok, assign(socket, :user_token, session.user_token)} # here token added to socket assigns
    end

    def handle_params(%{"id" => id}, _uri, socket) do
      {:noreply, fetch(socket, id)}
    end

    defp fetch(socket, id) do
      assign(socket, room: Lobby.get_room(id))
    end
end

show.html.leex

<h2><%= @room.name %></h2>
<%= if @room.token == @user_token do %>
    <div class="rounded-lg p-6 bg-gray">
        <p>You are admin of this room</p>
    </div>
<% end %>
Slug: <%= @room.slug %>
<hr/>
<%= link "Back", to: Routes.live_path(@socket, PokerWeb.LobbyLive.Index) %>

When a room is created, one of the fields on the Room schema is the token.

The idea is to only persist this data for 24 hours.

Thanks in advance if you can point me in the right direction!

1 Like
2

LiveView has approached this a bit differently—i think maybe because it’s a more controlled experience between the server and frontend. The LV team can ensure security through signing tokens, so the raw data is never passed to the socket.

LV signs a session when it mounts the view and then this is used in the LV mount function to receive information about the user. You can configure this to include session information (such as a user ID), and it will be managed by LV if the attribute exists in the plug session.

I think this will get you what you need without custom code (or at least without much). It also may depend on how you’re mounting the view. The docs at https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Router.html show how to do this with the router based mounting.

Edit: actually you’re doing this already. I think the key takeaway is that you don’t need to sign it yourself. LV will handle that for you. Since you’re using the token as an ID, you probably don’t need to change anything. You could generate a unique string a different way, but yours looks good to me.

5 Likes
3

Thank you for your feedback and thoughtful reply!