LiveView in a POS Extension

[kenichi]

Hi and thanks for a great library @ericdude4 et al. I'm building a POS Links extension and just can not get LiveView to connect without hitting this message which I suspect has to do with sessions, cookies, native-app webviews, CSP headers...

Instead I'm writing JS, using appbridge session tokens, and :shopify_api pipeline, but would sure love to use LiveView.

Do you know what I might be doing wrong or of a way to make this work?

[ericdude4]

Hey! Very interesting application for LiveView :)

I believe Shopify might have some very restrictive session requirements which may be blocking LiveView's ability to maintain a session. What is your configuration in your Endpoint module?

@session_options [
                  ...
                ]

[kenichi]

Thanks - I hope it can work 🤞🏽

Here's that attribute with redacted/example data:

  @session_options [
    store: :cookie,
    key: "_example_app_key",
    signing_salt: "...",
    encryption_salt: "..."
  ]

Note that this is happening through both the POS iOS app and the App URL/admin, but direct liveviews connect and work fine.

[info] CONNECTED TO Phoenix.LiveView.Socket in 22µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "...", "_mounts" => "0", "_track_static" => %{"0" => "https://example.com/assets/ap
p.css", "1" => "https://example.com/assets/app.js"}, "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:
...

Here's the CSP response header that the :shopify_embedded pipeline is setting:

{"content-security-policy",
   "frame-ancestors https://admin.shopify.com https://example.myshopify.com;"}

[ericdude4]

@kenichi I'm not sure exactly what the right fix is, but I suspect the cause is due to Shopify cookie restrictions in that iFrame which you are being rendered in. In your @session_options, I think store: :cookie and store: :ets will both not work because they both rely on the presence of a cookie.

Perhaps you can try something like this when you connect to your socket:

let liveSocket = new LiveSocket("/live", Socket, {params: {shop_token: <%= Shopifex.Plug.session_token(conn) %>}})
liveSocket.connect()

Maybe you can use this shop_token in the mount() callback to fetch the shop and put it in the session securely.

There are also some other steps you should take to remove cookie reliance from your pipeline:
https://byteflip.de/blog/cookieless-setup

excited to hear how this goes for you!