VUE.js app hosting Phoenix app in an I-Frame - shared auth?

I am doing some research on hosting our current phx/liveview app inside of an I-Frame of our other app. The cross-origin concerns seem fairly easy to address, but I don’t know where to start on sharing authentication. We have some ideas, but having trouble finding best practices. Login will occur in the Vue app and we would like that auth to be good accessing pages on our Phoenix app inside the I-Frame. The Vue app gets its token through an api shared by the Phoenix app.

Also up for discussion is whether or not the I-Frame is necessary at all. For instance, would it be more advisable to host the Vue app on a page in the Phoenix app and share session state?

This is a question hard to answer, because there are just many approaches to such app patchwork.
Perhaps useful: the websocket used by live view is authenticated by a signed token (websockets do not provide session cookie support). Read on this and you can use any available mechanism (postmessage to iframe, or even iframe query Param) to pass the token from main window to iframe to WS.

1 Like

Another approach would be to front everything with an Auth proxy so they would share the session cookie and the proxy would transform the the Auth info into format used by each app: Oathkeeper

1 Like

The developer working on the Vue app mentioned this approach (user logs in using Vue app, Vue app posts a message to the phoenix through the I-Frame), but I can’t seem to find any documentation on the very last step - from I-Frame to WS. Also, the scenario I’m trying to achieve is the Vue app passing its login to a secured Phoenix session.

Thanks for the help.

Just see Phoenix app the generated assets/js/socket.js. There are some helpful comments there :slight_smile:

1 Like

As it turns out, going the I-Frame route seems extremely hacky and raises a bunch of other issues passing messages back and forth to adjust page heights and other challenges. I think the Oathkeeper option seems like the most robust path, so I am looking into that. l am wondering if something like a Docker/Swarm with dual Phx/Vue Hello Auth World apps would be a good POC for this?