Use AssignScope for live_session validation

Author: Baradoy

assets/js/shop_admin.js

@@ -9,7 +9,7 @@ import {ShopifyToastHook} from "./hooks"
 
 let Hooks = { ShopifyToastHook }
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}, bindingPrefix: "data-phx-"})
+let liveSocket = new LiveSocket("/shop_admin_live", Socket, {hooks: Hooks, params: {_csrf_token: csrfToken}, bindingPrefix: "data-phx-"})
 
 // Show progress bar on live navigation and form submits
 window.addEventListener("phx:page-loading-start", _info => shopify.loading(true))
@@ -22,7 +22,7 @@ window.addEventListener("phx:page-loading-stop", info => {
     correctly patching within a live_session. This re-emits a navigation event
     that AppBridge will detect.
   */
-  destination = new URL(info.detail.to).pathname
+  const destination = new URL(info.detail.to).pathname
   if (info.detail.kind == "initial" && destination != window.location.pathname) {
     history.pushState(null, '', destination);
   } else {

lib/shopify_app_web/components/shop_admin_components.ex

@@ -12,9 +12,15 @@ defmodule ShopifyAppWeb.ShopAdminComponents do
     ~H"""
     <div>
       <ul>
-        <li><.link patch={~p"/shop_admin/shopify_app/"}>Home</.link></li>
-        <li><.link patch={~p"/shop_admin/shopify_app/settings"}>Settings</.link></li>
-        <li><.link patch={~p"/shop_admin/shopify_app/more"}>More Settings</.link></li>
+        <%!--
+          # if we want to navigate back to react land, we need to remount with the HMAC
+          See https://shopify.dev/docs/api/app-bridge-library/reference/navigation
+          <li><a href="shopify:admin/apps/my-shopify-app-mount/shop_admin" target="_top">Home</a></li>
+        --%>
+        <li><.link patch={~p"/live_shop_admin/"}>Home</.link></li>
+        <li><.link patch={~p"/live_shop_admin/show"}>Show</.link></li>
+        <li><.link patch={~p"/live_shop_admin/settings"}>Settings</.link></li>
+        <li><.link patch={~p"/live_shop_admin/more"}>More Settings</.link></li>
       </ul>
     </div>
     """

lib/shopify_app_web/endpoint.ex

@@ -8,12 +8,16 @@ defmodule ShopifyAppWeb.Endpoint do
     store: :cookie,
     key: "_shopify_app_key",
     signing_salt: "ijq1g2Yt",
-    same_site: "None",
-    secure: true
+    same_site: "Lax"
   ]
 
   socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
 
+  # For the ShopAdmin, we do not need anything in the session outside of what we put there from the conn.
+  # by not defining session storage, we do not need to worry about cookies and how to access them.
+  # The session info will be populated AssignScope and store in the DOM on `data-phx-session`
+  socket "/shop_admin_live", Phoenix.LiveView.Socket, websocket: [connect_info: []]
+
   # Serve at "/" the static files from "priv/static" directory.
   #
   # You should set gzip to true if you are running phx.digest

lib/shopify_app_web/live/shop_admin/index.ex

@@ -3,7 +3,7 @@ defmodule ShopifyAppWeb.ShopAdminLive.Index do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, socket}
+    {:ok, assign(socket, :connected, connected?(socket))}
   end
 
   @impl true
@@ -15,6 +15,10 @@ defmodule ShopifyAppWeb.ShopAdminLive.Index do
     assign(socket, :page_title, "Home")
   end
 
+  defp apply_action(socket, other, _params) do
+    assign(socket, :page_title, "Home - #{other}")
+  end
+
   @impl true
   def handle_event("action", %{"title" => title}, socket) do
     {:noreply,

lib/shopify_app_web/live/shop_admin/index.html.heex

@@ -8,7 +8,8 @@
 </ui-title-bar>
 
 <header>
-  Example <strong>Home</strong> LiveView
+  Example <strong><%= @page_title %></strong> LiveView
 </header>
+Conected <%= @connected %>
 
 <.navigation_links />

lib/shopify_app_web/live/shop_admin/layouts/root.html.heex

@@ -17,10 +17,11 @@
     </script>
 
     <ui-nav-menu>
-      <a href="/shop_admin/shopify_app/" rel="home">Root</a>
-      <a href="/shop_admin/shopify_app/">Home</a>
-      <a href="/shop_admin/shopify_app/settings">Settings</a>
-      <a href="/shop_admin/shopify_app/more">More Settings</a>
+      <a href="/live_shop_admin/" rel="home">Root</a>
+      <a href="/live_shop_admin/">Home</a>
+      <a href="/live_shop_admin/show">Show</a>
+      <a href="/live_shop_admin/settings">Settings</a>
+      <a href="/live_shop_admin/more">More Settings</a>
     </ui-nav-menu>
   </head>
   <body class="bg-white antialiased">

lib/shopify_app_web/live/shop_admin/settings.ex

@@ -3,7 +3,7 @@ defmodule ShopifyAppWeb.ShopAdminLive.Settings do
 
   @impl true
   def mount(_params, _session, socket) do
-    {:ok, socket}
+    {:ok, assign(socket, :connected, connected?(socket))}
   end
 
   @impl true
@@ -18,4 +18,12 @@ defmodule ShopifyAppWeb.ShopAdminLive.Settings do
   defp apply_action(socket, :more_settings, _params) do
     assign(socket, :page_title, "More Settings")
   end
+
+  @impl true
+  def handle_event("action", %{"title" => title}, socket) do
+    {:noreply,
+     socket
+     |> assign(:page_title, "Settings - " <> title)
+     |> put_flash(:info, "A toast message from the flash!")}
+  end
 end

lib/shopify_app_web/live/shop_admin/settings.html.heex

@@ -1,9 +1,12 @@
 <ui-title-bar title={@page_title}>
-  <button onclick="console.log('Secondary action')">Secondary action</button>
+  <.button data-phx-click="action" data-phx-value-title="Secondary">
+    Secondary action
+  </.button>
 </ui-title-bar>
 
 <header>
-  Example <strong>Settings</strong> LiveView
+  Example <strong><%= @page_title %></strong> LiveView
 </header>
+Conected <%= @connected %> <%= @live_action %> <%= @scope.shop.domain %>
 
 <.navigation_links />

lib/shopify_app_web/router.ex

@@ -15,7 +15,7 @@ defmodule ShopifyAppWeb.Router do
   end
 
   pipeline :shop_admin do
-    plug ShopifyAPI.Plugs.AdminAuthenticator, shopify_router_mount: "/shop"
+    plug ShopifyAPI.Plugs.AdminAuthenticator, app_name: "shopify_app"
     plug ShopifyAPI.Plugs.PutShopifyContentHeaders
   end
 
@@ -42,14 +42,17 @@ defmodule ShopifyAppWeb.Router do
     end
   end
 
-  live_session :shop_admin,
+  live_session :live_shop_admin,
     layout: {ShopifyAppWeb.ShopAdminLive.Layouts, :app},
-    root_layout: {ShopifyAppWeb.ShopAdminLive.Layouts, :root} do
-    scope "/shop_admin/:app", ShopifyAppWeb do
+    root_layout: {ShopifyAppWeb.ShopAdminLive.Layouts, :root},
+    on_mount: [ShopifyAppWeb.ShopAdminLive.AssignScope],
+    session: {ShopifyAppWeb.ShopAdminLive.AssignScope, :build_session, []} do
+    scope "/live_shop_admin", ShopifyAppWeb do
       pipe_through :browser
       pipe_through :shop_admin
 
       live "/", ShopAdminLive.Index, :live
+      live "/show", ShopAdminLive.Index, :show
       live "/settings", ShopAdminLive.Settings, :settings
       live "/more", ShopAdminLive.Settings, :more_settings
     end

test/shopify_app_web/live/shop_admin/index_test.exs

@@ -5,13 +5,14 @@ defmodule ShopifyAppWeb.ShopAdminLive.IndexTest do
   import ShopifyApp.ShopTestSetup
 
   describe "ShopAdminLive.Index render" do
-    setup [:shop]
+    setup [:app_auth_token_shop]
 
-    test "disconnected and connected mount", %{conn: conn, shopifyapi_shop: shop} do
+    test "disconnected and connected mount", %{conn: conn, shopifyapi_shop: shop, app: app} do
       conn =
         conn
         |> assign(:shop, shop)
-        |> get("/shop_admin/shopify_shop")
+        |> assign(:app, app)
+        |> get("/live_shop_admin")
 
       assert html_response(conn, 200) =~ "Example <strong>Home</strong> LiveView"