Troubleshooting Ash Authentication UI Override

Ash Authentication UI Override

When setting up Ash Authentication Phoenix, you get a LollyplayWeb.AuthOverrides module that you can use to override the UI. An easy mistake is to forget to not only override the “normal” attributes, but also the “dark” attributes.

Here is an example of how to override the Banner component:

defmodule LollyplayWeb.AuthOverrides do
  use AshAuthentication.Phoenix.Overrides

  alias AshAuthentication.Phoenix.Components

  override Components.Banner do
    set :image_url, "/images/example.png"
    set :image_class, "max-w-[300px] dark:hidden"
+    set :dark_image_url, "/images/example.png"
+    set :dark_image_class, "max-w-[300px] hidden dark:block"
  end

end

This is valid for at least version 2.4.4 of ash_authentication_phoenix:

    {:ash_authentication_phoenix, "~> 2.4.4"}