Phoenix LiveDashboard with token authentication

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.

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 %>

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.20.2 ?

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

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.