Infinity Reload because of session

KalleJoP commented 11 months ago

Hey folks,

I use the newest Phoenix Framework Version and I installed live_admin like in the readme. When I access the home page, the site keeps reloading.

In the console I get this message:

[debug] Processing with LiveAdmin.Components.Home.home_/my_admin/2
  Parameters: %{}
  Pipelines: []
[info] Sent 200 in 2ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 39µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "KycIGgICLDMPEwkuLRM9azArOSRQOSMCFD1VconPlvZEjgL8aFhCfIUZ", "_live_referer" => "undefined", "_mounts" => "0", "vsn" => "2.0.0"}
[debug] LiveView session was misconfigured or the user token is outdated.

1) Ensure your session configuration in your endpoint is in a module attribute:

    @session_options [
      ...
    ]

2) Change the `plug Plug.Session` to use said attribute:

    plug Plug.Session, @session_options

3) Also pass the `@session_options` to your LiveView socket:

    socket "/live", Phoenix.LiveView.Socket,
      websocket: [connect_info: [session: @session_options]]

4) Ensure the `protect_from_forgery` plug is in your router pipeline:

    plug :protect_from_forgery

5) Define the CSRF meta tag inside the `<head>` tag in your layout:

    <meta name="csrf-token" content={Plug.CSRFProtection.get_csrf_token()} />

6) Pass it forward in your app.js:

    let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content");
    let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}});

I did all steps but it doesn´t helped.

Environment:

OS: Browser / Mac
Browser all
Elixir: 1.14 Phoenix: 1.7.3 Live View: 0.19

Thanks for your help :)

tfwright commented 11 months ago

LiveAdmin requires the router to be configured to use LiveView. That error usually means that that configuration is not complete/correct. Are you able to add your own live routes that work correctly?

Since this is not a LiveAdmin error there is nothing really for me to investigate here. If you are willing to share the source of a sample app demonstrating the issue, I might be able to point you in the right direction.

KalleJoP commented 11 months ago

Yes, the live routes work correctly.

I uploaded a sample app with the error to github, you can visit it here: https://github.com/KalleJoP/live_admin_test

Its simply the boilerplate from mix phx.new and live_admin installed.

tfwright commented 11 months ago

That app does not appear to include an example of a live route that is working correctly. At a glance, it looks like you are trying to use the live_admin helper outside of your browser pipeline, which is where the missing session data the error is complaining about should come from.

KalleJoP commented 11 months ago

Ok, now I feel stupid, thanks for your help! :)

nshafer commented 10 months ago

I just did the same thing. I think it's because the documentation (README) does not mention that it needs to be in a scope, and the example code has it at the same level as the import. So I think

import LiveAdmin.Router

live_admin "/my_admin" do
  admin_resource "/my_schemas", MyApp.MyResource
end

should be rewritten as

import LiveAdmin.Router

scope "/", MyAppWeb do
  pipe_through :browser

  live_admin "/my_admin" do
    admin_resource "/my_schemas", MyApp.MyResource
  end
end

as this would match a new phoenix app, and those that have heavily customized it would still know that it needs to go in a scope.

tfwright / live_admin

Infinity Reload because of session #62