Accessing Phoenix Session Cookie within Internal VueJS/ReactJS App

Note: The real question here is probably “how to access window cookies within a JS SPA”, but can’t hurt to ask from this perspective…

So I am serving a VueJS app built to priv/static/ within a Phoenix 1.4 --no-webpack server, and I am serving the VueJS app from its generated index.html (not index.html.eex) via the PageController like so:

defmodule ...PageController do

  def index(conn, _params) do
    |> put_resp_header("content-type", "text/html; charset=utf-8")
    |> Plug.Conn.send_file(200, Application.app_dir(:tips, **"priv/static/index.html"**))
    |> halt()

I am using UeberAuth + the UeberAuth CAS strategy to authenticate access to index.html where the VueJS app lives. This puts some user information into a neat session cookie available in my window.

In order to interface with my Phoenix backend, I am making internal HTTP requests to API endpoints in my router.ex that return JSON – since I have the cookie in my window, though, I imagine there is a better way to get my user’s info than:

// js

# ex
def get_session(conn, _params) do
    session = fetch_session(conn)
    # get user from :plug_session within session and render it to JSON

Since I’m using CAS , I’m avoiding writing a JWT layer on top of this as I’m using CAS as a barrier to index.html, not within the JS SPA itself, and I just feel like There’s Got to Be a Better Way :stuck_out_tongue:

Any input would be greatly appreciated, thanks for reading!

1 Like

I think the usual way to pass data between html and js is to add data attribute to an element. At least if You don’t use the full SPA, Webpack etc.

I don’t understand why You need an index.html, and not an eex template. If You add eex extension, and pass no parameters, it is supposed to be equivalent to a pure html file. If You hide data attributes inside html, it’s easy for javascript to read them.

1 Like

Thanks for the response Koko!

My question was about making requests authenticated with cookies to internal endpoints from a Vue SPA served within a Phoenix app rather than in an independent client – not communication between the HTML and JS, but between the SPA and the backend

Was wondering if anyone else has cookie strategies for JS SPAs (React / Vue) that differ from the internal requests of the kind I’m doing above, but seems these internal requests are performing well

Can’t the Phoenix server simply read the cookie that is sent with the request? Am I missing something?

Yeah that’s what I’m doing, was just curious if I was missing out on any other strategies