jstone

Phoenix Multiple Layouts

Hello, Im having issue, having multiple layouts.

Layouts for Admin (System Access / Portal / Data Management)
Layouts for Login / Register

I create new plug for router just to handle different layouts for login

pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, html: {WebApp.Layouts, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug :fetch_current_user
  end

  pipeline :login_page do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_live_flash
    plug :put_root_layout, html: {WebApp.AuthenticationLayouts, :root}
    plug :protect_from_forgery
    plug :put_secure_browser_headers
    plug :fetch_current_user
  end

And I copy the original layouts and make the layouts components as below :

This will make whenever I visit link /users/log_in (Using Original Phx Auth) it will render root file from folder components auth_layouts.

However when I use code <%= @inner_content %> inside root file auth_layouts/root.html.heex it will render page from file layouts/app.html.heex instead of auth_layouts/app.html.heex. Please suggest/assist where can I change to make it render auth_layouts/app.html.heex. Thanks. Any response is highly appreciated

side note : Sorry if the question kinda noob, this is my first project using Phx Framework. Excited but can’t find the solution.

17 comments

/phoenix #authentication #plug #frontend #learning-elixir #liveview #layouts

1 3152 17

2025-02-17 20:23:14 UTC

Marked As Solved

sodapopcan

Ya, this is what I do.

I don’t have multiple directories for layouts since there is only one layout per different section but I have;

my_app_web/layouts/root.html.heex
my_app_web/layouts/public.html.heex
my_app_web/layouts/admin.html.heex

def live_view do
  quote do
    use Phoenix.LiveView,
      layout: {GelaWeb.Layouts, :public}

    unquote(html_helpers())
  end
end

def admin_live_view do
  quote do
    use Phoenix.LiveView,
      layout: {GelaWeb.Layouts, :admin}

    unquote(html_helpers())
  end
end

Then:

defmodule MyAppWeb.SomeAdminPage do
  use MyAppWeb, :admin_live_view
end

You can do the same with the controller helper.

I’m sure you can make this work with directories if you use a string instead of an atom.

Post #4

Also Liked

LostKobrakai

You can return a layout from mount/3 like so: {:ok, socket, layout: {module, atom}}. You can also use live_session to change the layout for a bunch of liveviews. No need to drop down to the macros to do that.

Post #7

sodapopcan

I’m still sporadically getting pinged on this issue so I wanted to note that I regret my answer and I do NOT recommend doing this. @LostKobrakai’s post is the right way and should be the accepted answer. AFAIC it’s objectively better to use what the framework provides over writing custom macros.

I recently inherited a codebase that uses this pattern. As is almost guaranteed to happen when blazing your own trails additional concerns like authn ended up in these macros which should have been in on_mount callbacks. This was not only really confusing to figure out at first but the inclusion of the extra logic within macros caused unnecessary compile time dependencies.

Return {:ok, socket, layout: {MyAppWeb.Layouts, :layout} from mount/3 or use live_session, :my_session, layout: {MyAppWeb.Layouts, :layout} in the router.

Post #16

sbuttgereit

I’m not the best person to answer this, but one thing that immediately comes to mind is have you checked your web_app.ex file (making assumptions about your naming based on what I see in your code example) and what it may/may not do with layouts? By default there’s some layout assignment happening there and my recollection was that it could interfere with the plug based stuff.

I use different layouts as well and rather than trying to control layouts via plugs, I created entries in my equivalent to web_app.ex to deal with the layouts and other kinds of setup as appropriate to the type of form.

Again… I could be way off-base and there are others here that can probably be more helpful…

Post #2