kelsey_l

kelsey_l

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 - #18 by josevalim (“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!

First 2 of 2 Posts Switch mode

sb8244

sb8244

Author of Real-Time Phoenix

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 Phoenix.LiveView.Router — Phoenix LiveView v1.2.5 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.

kelsey_l

kelsey_l OP

Thank you for your feedback and thoughtful reply!

— All posts loaded —

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
jonnycharles
I’m in search of an Elixir library that offers PDF generation capabilities similar to Ruby’s Prawn. While there have been discussions abo...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
dli
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app? Looking for hints regarding: Addi...
New
roeland
Kia ora, We have been using elixir-google-api to connect to Google Drive. However, with the updates to Tesla due to CVEs this is now bro...
New
bottlenecked
Hi all, I wanted to ask how the community is dealing with post-release steps. Today we have Ecto migrations, which make sure that the db...
New
rahultumpala
Hello, I have an Elixir backend that implements a custom protocol over TCP. I want to load test the backend and assess the performance o...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New

We're in Beta

About us Mission Statement