LiveView session was misconfigured or the user token is outdated

Phoenix Forum Questions / Help
, ,
1

To play around with LiveView on my phone I have configured my Endpoint like this:

config :my_app, MyAppWeb.Endpoint,
  http: [port: 4000, ip: {0,0,0,0}]

The app works fine on my phone.
(though sometimes the LiveView is extremely slow until I restart my development machine)

When I open the Phoenix app in Chrome on my development machine, only “localhost” works fine.
Both of the following urls will load the app but not mount the LiveView:

[debug] LiveView session was misconfigured or the user token is outdated.

1) Ensure your session configuration in your endpoint is in a module attribute [...]
2) Change the `plug Plug.Session` to use said attribute [...]
3) Also pass the `@session_options` to your LiveView socket [...]
4) Define the CSRF meta tag inside the `<head>` tag in your layout [...]
5) Pass it forward in your app.js [...]

None of these five point apply.
Why is the LiveView not mounted?

On my phone I open this address which does mount the LiveView:
http://192.168.2.6:4000
The problem occurs only on the machine hosting the server (192.168.2.6).

2

This question is now months old, but I feel compelled to share in case it helps someone else.
Summary: Unlike the OP, my app seemed to work fine in the browser (only place I was testing) – but the debug error persisted. I got around it by adding the :protect_from_forgery plug to my browser pipeline. For context, I arrived at the error while trying to add LiveView to an existing phoenix project (which – at time of writing – has zero UI).

The solution makes some sense in retrospect but is not at all documented (and was therefore a trial-and-error discovery). Ultimately, as I said before, I hope it helps someone.

6 Likes