Set session values from LiveView

liveview session

Set session values from LiveView

This tutorial will guide you through the process of setting session values directly from Phoenix LiveView. Despite LiveView’s real-time capabilities, modifying session data traditionally poses a challenge due to its WebSocket-based communication. We’ll solve this by integrating a bit of JavaScript and a custom Phoenix controller, ensuring seamless session updates without compromising your app’s responsiveness.

Setting Up the StoreSession Controller

The StoreSessionController plays a critical role in this solution. It allows us to receive and update session data on the server side. Below is how you can set up this controller within your Phoenix application.

defmodule TutorialWeb.StoreSessionController do
  use TutorialWeb, :controller

  # Note, you must have defined the atom before.
  def create(conn, params) do
    updated_conn = Enum.reduce(params, conn, fn {key, value}, acc_conn ->
      put_session(acc_conn, String.to_existing_atom(key), value)
    send_resp(updated_conn, 200, "")

Note that for security reasons, we use String.to_existing_atom(key). We do that for security reasons, so this means that the atom needs to have been defined before.

Adding the StoreSession Hook to app.html.heex

To integrate our session storage mechanism, we must mount a custom hook in our app’s layout. This hook will make use of LiveView’s powerful client-side capabilities. Let’s see how this is done in the app.html.heex file.

<div id="store-session" phx-hook="StoreSession"></div>

This will make sure that the javascript hook is available on every page view.

Configuring a Route for Session Storage

For our StoreSessionController to work, it needs an endpoint to receive session data. This is done by adding a specific route within our Phoenix router, allowing the controller to handle requests correctly.

scope "/", TutorialWeb do
  pipe_through :browser

  post "/store-session", StoreSessionController, :create

Implementing the JavaScript Hook

The JavaScript hook is the glue that bridges the LiveView and the controller and is responsible in updating session values from the client side. It will listen for events triggered by LiveView and make HTTP POST requests to store session data. Here’s how to implement this hook.

export const StoreSession = {
  mounted() {
    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content')

    this.handleEvent('store-session', data => {
      fetch('/store-session', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': token
        body: JSON.stringify(data)

Note that for security reasons, we are required to pass the CSRF-token that, in theory, should ensure that the requests comes from your own site.

LiveView Event Trigger Example

The final piece of the puzzle is triggering the session update from LiveView. By emitting a custom event, we can communicate with our JavaScript hook to initiate the session storage process. Here’s an example of how this is accomplished in LiveView.

  |> push_event("store-session",  %{my_key: "My Value"})

Integrating the Components

To make everything work together smoothly, all pieces of the puzzle—LiveView, the custom Phoenix controller, JavaScript hook, and our frontend assets—need to be wired up appropriately. This includes adjusting your project’s asset pipeline to ensure the JavaScript hook is loaded and functional. Ensure the store_session.js is imported and initialized in your app.js or equivalent entry point for your JavaScript assets.


By following this guide, you’ve learned how to overcome one of the limitations of Phoenix LiveView regarding session management. Integrating JavaScript with LiveView allows for dynamic session updates, enhancing the user experience without full page reloads. This solution showcases the flexibility of Phoenix and the power of combining Elixir with JavaScript to solve complex web development challenges. Happy coding!

Related Tutorials

Published 25 Nov - 2022
Updated 29 Nov - 2022
Phoenix 1.7

Sortable lists with Phoenix LiveView and SortableJS

A very common user interface pattern on the web is to have sortable elements. In this tutorial I will go through how to accomplish sortable lists wi..

Published 31 May - 2023
Phoenix 1.7

CSV Import file upload with preview in LiveView

In this tutorial, I will go through how to upload and import a CSV file with Phoenix LiveView and, show how easy it is to preview the imports before..