Accessing Phoenix Session Cookie within Internal VueJS/ReactJS App

Phoenix Forum Questions / Help
, ,
1

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
    conn
    |> put_resp_header("content-type", "text/html; charset=utf-8")
    |> Plug.Conn.send_file(200, Application.app_dir(:tips, **"priv/static/index.html"**))
    |> halt()
  end

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
axios.get('/path/to/get_session').then(...)

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

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
2

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
3

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

4

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

5

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