I am working on a Phoenix Json API and would like to enable the live dashboard in production. My :require_authentication plug checks the Authorization header for a valid token, is there a way to integrate this into the live dashboard?
I have something like this in my router:
pipeline :protected do
plug MyApp.RequireAuthenticated
end
scope path: "/admin/dashboard" do
import Phoenix.LiveDashboard.Router
scope "/" do
pipe_through(:browser)
pipe_through(:protected)
live_dashboard "/"
end
end
Which is basically created an authenticated pipeline, that has one Plug that you seem to already have. Then, create a scope at where you want to have your dashboard, and make that scope go through the pipeline you just defined.
1 Like
You can also drop your route into a preexisting authenticated scope if you have one
scope "/" do
pipe_through [:browser, :require_authentication]
# ... other authenticated routes
live_dashboard "/dashboard"
end
or, if you only want to require authentication in production but not in other environments:
live_dashboard_pipeline =
case Mix.env() do
:prod -> [:browser, :require_authentication]
env when env in [:dev, :test] -> :browser
end
scope "/" do
pipe_through live_dashboard_pipeline
live_dashboard "/dashboard"
end
You may want to conditionally render the link as well:
<%= if function_exported?(Routes, :live_dashboard_path, 2) && @current_user do %>
<%= link "Dashboard", to: Routes.live_dashboard_path(@conn, :home) %>
<% end %>
1 Like
Thanks for your responses, unfortunately this does not solve my issue because I am not using Plug.Session (cookies) for authentication. I would probably have to hook into the live dashboard JavaScript code to add the auth token into the Authorization header, not sure if this is possible?
I don’t see the problem, and maybe you don’t need to write a custom plug but use this Plug.BasicAuth — Plug v1.13.6 ?
1 Like
Yes this would be my fallback solution but it requires admins to enter their credentials again.
Are you sure? I think if authorization header doesn’t need change, as still has valid value, it wouldn’t even prompt you to enter it again
I’m also a bit confused why these suggestions won’t work. You should be able to put the dashboard behind an auth pipeline, even if the auth is in the header and not the session, as long as you can put the token in the header when you send the GET request?
defmodule PlugAuth do
import Phoenix.Controller
import Plug.Conn
def init(opts), do: opts
def call(conn, _) do
token = get_req_header(conn, "Authorization")
if authorized?(token) do
conn
else
conn
|> put_status(:forbidden)
|> json(%{status: 403, message: "unauthorized"})
|> halt()
end
end
end
# router
scope "/" do
pipe_through [..., PlugAuth]
live_dashboard "/dashboard"
end
If none of this provides a solution to your problem, perhaps we need a little more clarity and background on what the problem is
Hi! In my SPA frontend I use fetch and set the Authorization header there for the api calls. But when navigating to /dashboard, or landing there in the first place, how would I tell the browser to set the header without modifying the LiveDashboard JavaScript? I might just switch to storing the token in a cookie because those are always automatically sent by the browser on every request.
For reference, here are the relevant plugs:
def fetch_current_user(conn, _opts) do
case get_req_header(conn, "authorization") do
["Bearer " <> token] ->
case Accounts.get_session(token) do
{:ok, session} ->
assign(conn, :current_user, session.user)
{:error, :not_found} ->
conn
|> FallbackController.call({:error, :unauthorized, "Authorization token invalid"})
|> halt()
end
_ ->
assign(conn, :current_user, nil)
end
end
def require_authentication(conn, _opts) do
if conn.assigns.current_user do
conn
else
conn
|> FallbackController.call({:error, :unauthorized, "Authentication required"})
|> halt()
end
end
1 Like
If you have the option to use cookies that might make it simpler, especially for the case you pointed out of landing on the dashboard directly without passing through the SPA. I suppose you could have a plug for the dashboard that redirects to your SPA for authorization and then redirect from the SPA back to the dashboard.
As for navigating from SPA to dashboard, I think you can use XMLHttpRequest to set a custom header on page navigation with JS. this Stack Overflow question may help
I’m not sure how you could hook into the dashboard JS to set the header, since you’d have to load the dashboard page to run the JS that would set your header to authorize you to view that same page. seems like a chicken and egg problem unless I’m misunderstanding 
I hope any of this is helpful
Haven’t tested - but you may add custom endpoint to take the token from SPA and return cookie for LiveDashboard auth (e.g. with path)
LiveDashboard uses JS for socket etc. so unless it provides an extension point to add custom headers - seems like using cookie is the simplest solution.
