Authentication with csrf_token in Phoenix / Elixir

Question

I am doing a project where the front-end is managed with Vue.js and the back with elixir / phoenix framework for my api. I need to manage the authentication of my users using csrf-token and JWT. I am using guardian library for the jwt part (https://hexdocs.pm/guardian/readme.html) and I am currently blocking on the csrf_token part.

I want to generate a csrf-token that I will put in the jwt when sending the login form from vue.js and that will be returned when the user is connected. I read the documentation but I don't see how to implement the csrf-token if the html page is not generated by phoenix. (https://hexdocs.pm/plug/Plug.CSRFProtection.html)

So how can I manage the generation of a csrf-token with phoenix in my vue.js html page?

Here is the route I use for the connection :

scope "/api", AuthTutorialPhoenixWeb do
    pipe_through(:api)

    post("/users/sign_in", SessionController, :new)
  end

And this is my controller :

defmodule AuthTutorialPhoenixWeb.SessionController do
  use AuthTutorialPhoenixWeb, :controller

  alias AuthTutorialPhoenix.Accounts
  alias AuthTutorialPhoenix.Authentication.Guardian

  action_fallback(AuthTutorialPhoenixWeb.FallbackController)

  # new session
  def new(conn, %{"email" => email, "password" => password}) do
    case Accounts.authenticate_user(email, password) do
      {:ok, user} ->
        # Lifetime Token of 15 minutes
        {:ok, access_token, _claims} =
          Guardian.encode_and_sign(user, %{}, token_type: "access", ttl: {15, :minute})

        {:ok, refresh_token, _claims} =
          Guardian.encode_and_sign(user, %{}, token_type: "refresh", ttl: {7, :day})

        conn
        |> put_resp_cookie("ruid", refresh_token)
        |> put_status(:created)
        |> render("token.json", access_token: access_token, user: user)

      {:error, :unauthorized} ->
        body = Jason.encode!(%{error: "unauthorized"})

        conn
        |> send_resp(401, body)
    end
  end
end

Answer 1

This is a little late to the party, but you can generate the CSRF token on demand with Plug.CSRFProtection.get_csrf_token() and send it to the front end