Authentication with csrf_token in Phoenix / Elixir - vue.js

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