Packages
ash_authentication_phoenix
2.1.1
3.0.0-rc.9
3.0.0-rc.8
3.0.0-rc.7
3.0.0-rc.6
3.0.0-rc.4
3.0.0-rc.3
3.0.0-rc.2
3.0.0-rc.1
3.0.0-rc.0
2.17.2
2.17.1
2.17.0
2.16.0
2.15.0
2.14.1
2.14.0
2.13.1
2.13.0
2.12.2
2.12.1
2.12.0
2.11.0
2.10.5
2.10.4
2.10.3
2.10.2
2.10.1
2.10.0
2.9.0
2.8.0
2.7.0
2.6.3
2.6.2
2.6.1
2.6.0
2.5.4
2.5.3
2.5.2
2.5.1
2.5.0
2.4.8
2.4.7
2.4.6
2.4.5
2.4.4
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.11
2.1.10
2.1.9
2.1.8
2.1.7
2.1.6
2.1.5
2.1.4
2.1.3
2.1.2
2.1.1
2.1.0
2.0.2
2.0.1
2.0.0
2.0.0-rc.2
2.0.0-rc.1
2.0.0-rc.0
1.9.4
1.9.3
1.9.2
1.9.1
1.9.0
1.8.7
1.8.6
1.8.5
1.8.4
1.8.3
1.8.2
1.8.1
1.8.0
1.7.3
1.7.2
1.7.1
1.7.0
1.6.6
1.6.5
1.6.4
1.6.3
1.6.2
1.6.1
1.6.0
1.5.1
1.5.0
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.1
1.3.0
1.2.0
1.1.0
1.0.1
1.0.0
Phoenix integration for Ash Authentication
Security advisory:
This version has known vulnerabilities.
View advisories
Current section
Files
Jump to
Current section
Files
documentation/tutorials/ui-overrides.md
# Overriding Ash Authentication Phoenix's default UI
Ash Authentication Phoenix provides a default UI implementation to get you started, however we wanted there to be a middle road between "you gets what you gets" and "¯\\_(ツ)_/¯ make your own". Thus AAP's system of UI overrides were born.
Every one of our LiveView components (and there are [quite a few of them](https://github.com/team-alembic/ash_authentication_phoenix/tree/main/lib/ash_authentication_phoenix/components)) has a number of hooks where you can override either the CSS styles, text or images.
## Understanding overrides
Let's start by looking at `AshAuthentication.Phoenix.Components.SignIn`, which introspects your authenticatable resources and renders the components for each of strategies with sign-in enabled.
The [component documentation](`AshAuthentication.Phoenix.Components.SignIn`) describes it's known overrides, expected properties and even which components are likely to be rendered within it.
By default, if the `overrides` prop is not set, then the defaults will be taken from [`AshAuthentication.Phoenix.Overrides.Default`](https://github.com/team-alembic/ash_authentication_phoenix/blob/main/lib/ash_authentication_phoenix/overrides/default.ex).
## Defining your own override module
If you find that the default overrides don't quite cut it for your application you can define your own override module with the `AshAuthentication.Phoenix.Overrides` module.
For example, if we wanted to change the default banner used on the sign-in page:
```elixir
defmodule MyAppWeb.AuthOverrides do
use AshAuthentication.Phoenix.Overrides
override AshAuthentication.Phoenix.Components.Banner do
set :image_url, "/images/rickroll.gif"
end
end
```
You don't have to define all overrides for all components - although you can - only the ones you actually want to change. This is why the `overrides` component property takes a list - each override module will be searched in the order they're provided until an override is found. Therefore to render the sign-in UI with only the banner image changed you could render the sign-in component with the `overrides` prop set to `[MyAppWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.Default]`.
## Overriding at the router
So far we have discussed how to override individual components when placing them in your own LiveView pages, however if you plan to re-use the default UI wholesale with only some overrides, then you can also provide your override options to the `AshAuthentication.Phoenix.Router.sign_in_route/1` and `AshAuthentication.Phoenix.Router.reset_route/1` route helpers in your Phoenix router:
```elixir
defmodule MyAppWeb.Router do
use MyAppWeb, :router
use AshAuthentication.Phoenix.Router
# ...
scope "/", MyAppWeb do
sign_in_route(overrides: [MyAppWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.Default])
end
end
```