Overriding Ash Authentication Phoenix's default UI

View Source

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.

Each of our LiveView components has a number of hooks where you can override either the CSS styles, text or images.

In addition you have the option to provide a gettext/2 compatible function through which all output text will be run.

Defining Overrides

You override these components by defining an "overrides module", which you will then provide in your router when setting up your routes.

For example, if we wanted to change the default banner used on the sign-in page:

defmodule MyAppWeb.AuthOverrides do
  use AshAuthentication.Phoenix.Overrides

  # Override a property per component
  override AshAuthentication.Phoenix.Components.Banner do
    # include any number of properties you want to override
    set :image_url, "/images/rickroll.gif"
    set :dark_image_url, "/images/rickroll-dark.gif"
  end
end

You only need to define the overrides you want to change. Unspecified overrides will use their default value.

When overriding UI elements, remember to account for dark mode support. Some properties have dark mode variants (prefixed with dark_) that should be set alongside their light mode counterparts. For instance, if you override image_url, you should typically also set dark_image_url to ensure your UI looks good in both light and dark modes.

Internationalisation

Plug in your Gettext backend and have all display text translated automagically, see next section for an example.

The package includes Gettext templates for the untranslated messages and a growing number of translations. You might want to

cp -rv deps/ash_authentication_phoenix/i18n/gettext/* priv/gettext

For other i18n libraries you have the option to provide a gettext-like handler function, see AshAuthentication.Phoenix.Router.sign_in_route/1 for details.

Telling AshAuthentication about your overrides

To do this, you modify your sign_in_route calls to contain the overrides option. Be sure to put the AshAuthentication.Phoenix.Overrides.Default override last, as it contains the default values for all components!

The same way you may add a gettext_backend option to specify your Gettext backend and domain.

defmodule MyAppWeb.Router do
  use MyAppWeb, :router
  use AshAuthentication.Phoenix.Router

  # ...

  scope "/", MyAppWeb do
    sign_in_route overrides: [MyAppWeb.AuthOverrides, AshAuthentication.Phoenix.Overrides.Default],
                  gettext_backend: {MyAppWeb.Gettext, "auth"}
  end
end

Reference

The below documentation is autogenerated from the components that support overrides. All available overrides are listed here. If you are looking to override something not in this list, please open an issue, or even better a PR!

Looking at the source of the components can be enlightening to see exactly how an override is used. If you click on the name of component you are interested in, and then look in the top right (if you are on hexdocs), you will see a </> button that will take you to the source for that component. In that code, look for calls to override_for/3 to see specifically how each override is used.

Sign In

AshAuthentication.Phoenix.SignInLive

A generic, white-label sign-in page.

  • :root_class - CSS class for the root div element.

  • :sign_in_id - Element ID for the SignIn LiveComponent.

AshAuthentication.Phoenix.Components.SignIn

Renders sign in mark-up for an authenticated resource.

  • :authentication_error_container_class - CSS class for the container for the text of the authentication error.

  • :authentication_error_text_class - CSS class for the authentication error text.

  • :filter_strategy - A function that decides whether a strategy should be shown

  • :root_class - CSS class for the root div element.

  • :show_banner - Whether or not to show the banner.

  • :strategy_class - CSS class for a div surrounding each strategy component.

  • :strategy_display_order - Whether to display the form or link strategies first. Accepted values are :forms_first or :links_first.

Sign Out

AshAuthentication.Phoenix.SignOutLive

A generic, white-label sign-out confirmation page.

  • :root_class - CSS class for the root div element.

AshAuthentication.Phoenix.Components.SignOut

Renders a sign-out confirmation form.

  • :button_class - CSS class for the sign-out button.

  • :button_text - Text for the sign-out button.

  • :form_class - CSS class for the form element.

  • :h2_class - CSS class for the heading.

  • :h2_text - Heading text.

  • :info_text - Informational text displayed below the heading.

  • :info_text_class - CSS class for the informational text.

  • :root_class - CSS class for the root div element.

Password Sign-in

AshAuthentication.Phoenix.Components.Password

Generates sign in, registration and reset forms for a resource.

  • :hide_class - CSS class to apply to hide an element.

  • :interstitial_class - CSS class for the div element between the form and the button.

  • :register_extra_component - Optional component module to render in the register_extra slot position. Component will receive the form as a form assign.

  • :register_form_module - The Phoenix component to be used for the registration form. Defaults to AshAuthentication.Phoenix.Components.Password.RegisterForm.

  • :register_toggle_text - Toggle text to display when the register form is not showing (or nil to disable).

  • :reset_extra_component - Optional component module to render in the reset_extra slot position. Component will receive the form as a form assign.

  • :reset_form_module - The Phoenix component to be used for the reset form. Defaults to AshAuthentication.Phoenix.Components.Password.ResetForm.

  • :reset_toggle_text - Toggle text to display when the reset form is not showing (or nil to disable).

  • :root_class - CSS class for the root div element.

  • :show_first - The form to show on first load. Either :sign_in or :register. Only relevant if paths aren't set for them in the router.

  • :sign_in_extra_component - Optional component module to render in the sign_in_extra slot position. Component will receive the form as a form assign.

  • :sign_in_form_module - The Phoenix component to be used for the sign in form. Defaults to AshAuthentication.Phoenix.Components.Password.SignInForm.

  • :sign_in_toggle_text - Toggle text to display when the sign in form is not showing (or nil to disable).

  • :slot_class - CSS class for the div surrounding the slot.

  • :toggler_class - CSS class for the toggler a element.

AshAuthentication.Phoenix.Components.Password.RegisterForm

Generates a default registration form.

  • :button_text - Text for the submit button.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :root_class - CSS class for the root div element.

  • :slot_class - CSS class for the div surrounding the slot.

AshAuthentication.Phoenix.Components.Password.SignInForm

Generates a default sign in form.

  • :button_text - Text for the submit button.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :root_class - CSS class for the root div element.

  • :slot_class - CSS class for the div surrounding the slot.

Confirmation

AshAuthentication.Phoenix.ConfirmLive

A generic, white-label confirmation page.

  • :confirm_id - Element ID for the Reset LiveComponent.

  • :root_class - CSS class for the root div element.

AshAuthentication.Phoenix.Components.Confirm

Renders a confirmation button.

  • :root_class - CSS class for the root div element.

  • :show_banner - Whether or not to show the banner.

  • :strategy_class - CSS class for a div surrounding each strategy component.

AshAuthentication.Phoenix.Components.Confirm.Form

Generates a default confirmation form.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :root_class - CSS class for the root div element.

AshAuthentication.Phoenix.Components.Confirm.Input

Function components for dealing with form input during password authentication.

  • :submit_class - CSS class for the form submit input element.

  • :submit_label - A function that takes the strategy and returns text for the confirm button, or a string.

Password Reset

AshAuthentication.Phoenix.ResetLive

A generic, white-label password reset page.

  • :reset_id - Element ID for the Reset LiveComponent.

  • :root_class - CSS class for the root div element.

AshAuthentication.Phoenix.Components.Reset

Renders a password-reset form.

  • :root_class - CSS class for the root div element.

  • :show_banner - Whether or not to show the banner.

  • :strategy_class - CSS class for a div surrounding each strategy component.

AshAuthentication.Phoenix.Components.Reset.Form

Generates a default password reset form.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :root_class - CSS class for the root div element.

  • :spacer_class - CSS classes for space between the password input and submit elements.

AshAuthentication.Phoenix.Components.Password.ResetForm

Generates a default password reset form.

  • :button_text - Tex for the submit button.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :reset_flash_text - Text for the flash message when a request is received. Set to nil to disable.

  • :root_class - CSS class for the root div element.

  • :slot_class - CSS class for the div surrounding the slot.

Password

AshAuthentication.Phoenix.Components.Password.Input

Function components for dealing with form input during password authentication.

  • :checkbox_class - CSS class for the input element of the remember me field.

  • :checkbox_label_class - CSS class for the label element of the remember me field.

  • :error_li - CSS class for the li elements on error lists.

  • :error_ul - CSS class for the ul element on error lists.

  • :field_class - CSS class for div elements surrounding the fields.

  • :identity_input_label - Label for identity field.

  • :identity_input_placeholder - Placeholder for identity field.

  • :input_class - CSS class for text/password input elements.

  • :input_class_with_error - CSS class for text/password input elements when there is a validation error.

  • :input_debounce - Number of milliseconds to debounce input by (or nil to disable).

  • :label_class - CSS class for label elements.

  • :password_confirmation_input_label - Label for password confirmation field.

  • :password_input_label - Label for password field.

  • :remember_me_class - CSS class for the div element surrounding the remember me field.

  • :remember_me_input_label - Label for remember me field.

  • :submit_class - CSS class for the form submit input element.

AshAuthentication.Phoenix.MagicSignInLive

A generic, white-label confirmation page.

  • :magic_sign_in_id - Element ID for the MagicSignIn LiveComponent.

  • :root_class - CSS class for the root div element.

Generates a sign-in for for a resource using the "Magic link" strategy.

  • :checkbox_class - CSS class for the remember_me checkbox

  • :checkbox_label_class - CSS class for the remember_me check box label

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :remember_me_class - CSS class for the div element surrounding the remember me field.

  • :request_flash_text - Text for the flash message when a request is received. Set to nil to disable.

  • :root_class - CSS class for the root div element.

Renders a magic sign in button.

  • :root_class - CSS class for the root div element.

  • :show_banner - Whether or not to show the banner

  • :strategy_class - CSS class for the div surrounding each strategy component.

Generates a default magic sign in form.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :root_class - CSS class for root div element.

Function components for dealing with form input during magic link sign in.

  • :checkbox_class - CSS class for the input element of the remember me field.

  • :checkbox_label_class - CSS class for the label element of the remember me field.

  • :input_debounce - Number of milliseconds to debounce input by (or nil to disable).

  • :remember_me_class - CSS class for the div element surrounding the remember me field.

  • :remember_me_input_label - Label for remember me field.

  • :submit_class - CSS class for the form submit input element.

  • :submit_label - A function that takes the strategy and returns text for the sign in button, or a string.

OTP

AshAuthentication.Phoenix.Components.Otp

Generates a sign-in form for the OTP strategy.

AshAuthentication.Phoenix.Components.Otp.RequestForm

Generates the form for requesting an OTP code (step one of the OTP flow).

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :request_flash_text - Text for the flash message shown after the OTP request is submitted. Set to nil to disable.

  • :root_class - CSS class for the root div element.

AshAuthentication.Phoenix.Components.Otp.VerifyForm

Generates the form for verifying an OTP code (step two of the OTP flow).

  • :back_link_class - CSS class for the back link.

  • :back_link_text - Text for the link that returns to the request form. Set to nil to disable.

  • :description_class - CSS class for the description paragraph.

  • :description_text - Text shown above the OTP code field, e.g. "Enter the code we sent you.". Set to nil to disable.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :root_class - CSS class for the root div element.

AshAuthentication.Phoenix.Components.Otp.Input

Function components for dealing with form input during OTP authentication.

  • :code_input_label - Label for the OTP code field.

  • :code_input_placeholder - Placeholder for the OTP code field.

  • :error_li - CSS class for the li elements on error lists.

  • :error_ul - CSS class for the ul element on error lists.

  • :field_class - CSS class for div elements surrounding the fields.

  • :identity_input_label - Label for the identity field.

  • :identity_input_placeholder - Placeholder for the identity field.

  • :input_class - CSS class for text/code input elements.

  • :input_class_with_error - CSS class for text/code input elements when there is a validation error.

  • :input_debounce - Number of milliseconds to debounce input by (or nil to disable).

  • :label_class - CSS class for label elements.

  • :request_label - A function that takes the strategy and returns the request submit button text, or a string.

  • :submit_class - CSS class for the form submit input element.

  • :verify_label - A function that takes the strategy and returns the verify submit button text, or a string.

OAuth2

AshAuthentication.Phoenix.Components.Apple

Generates a sign-in button for Apple.

  • :icon_class - CSS classes for the icon SVG.

  • :link_class - CSS classes for the a element.

  • :root_class - CSS classes for the root div element.

AshAuthentication.Phoenix.Components.DynamicOidc

Renders a sign-in button per database-stored OIDC connection.

  • :icon_class - CSS classes for the icon SVG / img.

  • :link_class - CSS classes for each connection's a element.

  • :root_class - CSS classes for the root div element.

AshAuthentication.Phoenix.Components.OAuth2

Generates a sign-in button for OAuth2.

  • :icon_class - CSS classes for the icon SVG.

  • :icon_src - Map of strategy names to icon sources.

  • :link_class - CSS classes for the a element.

  • :root_class - CSS classes for the root div element.

TOTP

AshAuthentication.Phoenix.Components.Totp

Generates sign in and setup forms for TOTP authentication.

  • :hide_class - CSS class to apply to hide an element.

  • :interstitial_class - CSS class for the div element between the form and the toggle.

  • :root_class - CSS class for the root div element.

  • :setup_form_module - The Phoenix component to be used for the setup form. Defaults to AshAuthentication.Phoenix.Components.Totp.SetupForm.

  • :setup_toggle_text - Toggle text to display when the setup form is not showing (or nil to disable).

  • :show_first - The form to show on first load. Either :sign_in or :setup. Defaults to :sign_in.

  • :sign_in_form_module - The Phoenix component to be used for the sign in form. Defaults to AshAuthentication.Phoenix.Components.Totp.SignInForm.

  • :sign_in_toggle_text - Toggle text to display when the sign in form is not showing (or nil to disable).

  • :slot_class - CSS class for the div surrounding the slot.

  • :toggler_class - CSS class for the toggler a element.

AshAuthentication.Phoenix.Components.Totp.SignInForm

Generates a sign in form for TOTP authentication.

  • :button_text - Text for the submit button.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :form_class - CSS class for the form element.

  • :label_class - CSS class for the h2 element.

  • :root_class - CSS class for the root div element.

  • :slot_class - CSS class for the div surrounding the slot.

AshAuthentication.Phoenix.Components.Totp.SetupForm

Generates a setup form for TOTP authentication with QR code display.

  • :button_text - Text for the submit button.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :error_class - CSS class for error messages.

  • :form_class - CSS class for the form element.

  • :instructions_class - CSS class for setup instructions text.

  • :instructions_text - Instructions text shown above QR code.

  • :label_class - CSS class for the h2 element.

  • :qr_code_class - CSS class for the QR code container.

  • :qr_code_wrapper_class - CSS class for the wrapper around QR code and instructions.

  • :root_class - CSS class for the root div element.

  • :setup_button_class - CSS class for the initial setup button.

  • :setup_button_text - Text for the initial setup button.

  • :slot_class - CSS class for the div surrounding the slot.

AshAuthentication.Phoenix.Components.Totp.Input

Function components for dealing with form input during TOTP authentication.

  • :code_input_label - Label for TOTP code field.

  • :code_input_placeholder - Placeholder for TOTP code field.

  • :error_li - CSS class for the li elements on error lists.

  • :error_ul - CSS class for the ul element on error lists.

  • :field_class - CSS class for div elements surrounding the fields.

  • :identity_input_label - Label for identity field.

  • :identity_input_placeholder - Placeholder for identity field.

  • :input_class - CSS class for input elements.

  • :input_class_with_error - CSS class for input elements when there is a validation error.

  • :input_debounce - Number of milliseconds to debounce input by (or nil to disable).

  • :invalid_code_class - CSS class applied to code field when validation fails.

  • :label_class - CSS class for label elements.

  • :submit_class - CSS class for the form submit input element.

  • :valid_code_class - CSS class applied to code field when validation passes.

AshAuthentication.Phoenix.TotpSetupLive

A generic, white-label TOTP setup page for configuring two-factor authentication.

  • :error_class - CSS class for the error message when user is not authenticated.

  • :root_class - CSS class for the root div element.

  • :totp_setup_id - Element ID for the TotpSetup LiveComponent.

AshAuthentication.Phoenix.TotpVerifyLive

A generic, white-label TOTP verification page for two-factor authentication.

  • :root_class - CSS class for the root div element.

  • :totp_verify_id - Element ID for the TotpVerify LiveComponent.

AshAuthentication.Phoenix.Components.Totp.Verify2faForm

Generates a verification form for TOTP two-factor authentication.

  • :button_text - Text for the submit button.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :error_class - CSS class for error messages.

  • :form_class - CSS class for the form element.

  • :instructions_class - CSS class for instructions text.

  • :instructions_text - Instructions text shown above the code input.

  • :label_class - CSS class for the h2 element.

  • :label_text - Text for the form heading.

  • :recovery_code_link_class - CSS class for the recovery code link.

  • :recovery_code_link_path - Path to the recovery code verification page (or nil to hide the link).

  • :recovery_code_link_text - Text for the link to recovery code verification (or nil to hide).

  • :root_class - CSS class for the root div element.

  • :sign_in_link_class - CSS class for the sign-in link when not authenticated.

  • :sign_in_link_text - Text for the sign-in link.

  • :slot_class - CSS class for the div surrounding the slot.

Recovery Code

AshAuthentication.Phoenix.RecoveryCodeVerifyLive

A generic, white-label recovery code verification page.

  • :recovery_code_verify_id - Element ID for the VerifyForm LiveComponent.

  • :root_class - CSS class for the root div element.

AshAuthentication.Phoenix.RecoveryCodeDisplayLive

A generic, white-label page for generating and displaying recovery codes.

  • :error_class - CSS class for error messages when unauthenticated.

  • :recovery_code_display_id - Element ID for the DisplayCodes LiveComponent.

  • :root_class - CSS class for the root div element.

AshAuthentication.Phoenix.Components.RecoveryCode.VerifyForm

Generates a verification form for recovery code authentication.

  • :button_text - Text for the submit button.

  • :disable_button_text - Text for the submit button when the request is happening.

  • :error_class - CSS class for error messages.

  • :form_class - CSS class for the form element.

  • :instructions_class - CSS class for instructions text.

  • :instructions_text - Instructions text shown above the code input.

  • :label_class - CSS class for the h2 element.

  • :label_text - Text for the form heading.

  • :root_class - CSS class for the root div element.

  • :sign_in_link_class - CSS class for the sign-in link when not authenticated.

  • :sign_in_link_text - Text for the sign-in link.

  • :slot_class - CSS class for the div surrounding the slot.

  • :totp_link_class - CSS class for the TOTP verify link.

  • :totp_link_path - Path to the TOTP verification page (or nil to hide the link).

  • :totp_link_text - Text for the link to TOTP verification (or nil to hide).

AshAuthentication.Phoenix.Components.RecoveryCode.DisplayCodes

Generates and displays recovery codes for the authenticated user.

  • :code_item_class - CSS class for individual code items.

  • :codes_grid_class - CSS class for the grid of recovery codes.

  • :confirm_button_class - CSS class for the confirmation button.

  • :confirm_button_text - Text for the confirmation button.

  • :confirm_path - Path to redirect to after confirming codes have been saved.

  • :error_class - CSS class for error messages.

  • :generate_button_class - CSS class for the generate button.

  • :generate_button_text - Text for the generate button.

  • :instructions_class - CSS class for instructions text.

  • :instructions_text - Instructions text shown above the codes.

  • :label_class - CSS class for the h2 element.

  • :label_text - Text for the heading.

  • :root_class - CSS class for the root div element.

  • :warning_class - CSS class for the warning text.

  • :warning_text - Warning text shown after generating codes.

AshAuthentication.Phoenix.Components.RecoveryCode.Input

Function components for recovery code form inputs.

  • :code_input_label - Label for recovery code field.

  • :code_input_placeholder - Placeholder for recovery code field.

  • :error_li - CSS class for the li elements on error lists.

  • :error_ul - CSS class for the ul element on error lists.

  • :field_class - CSS class for div elements surrounding the fields.

  • :input_class - CSS class for input elements.

  • :input_class_with_error - CSS class for input elements when there is a validation error.

  • :input_debounce - Number of milliseconds to debounce input by (or nil to disable).

  • :label_class - CSS class for label elements.

  • :submit_class - CSS class for the form submit input element.

WebAuthn

AshAuthentication.Phoenix.Components.WebAuthn

Generates sign in and registration forms for WebAuthn/Passkey authentication.

  • :authentication_form_module - The Phoenix component to be used for the authentication form. Defaults to AshAuthentication.Phoenix.Components.WebAuthn.AuthenticationForm.

  • :hide_class - CSS class to apply to hide an element.

  • :interstitial_class - CSS class for the div element between the form and the toggle.

  • :register_toggle_text - Toggle text to display when the register form is not showing (or nil to disable).

  • :registration_form_module - The Phoenix component to be used for the registration form. Defaults to AshAuthentication.Phoenix.Components.WebAuthn.RegistrationForm.

  • :root_class - CSS class for the root div element.

  • :show_first - The form to show on first load. Either :sign_in or :register. Only relevant if paths aren't set for them in the router.

  • :sign_in_toggle_text - Toggle text to display when the sign in form is not showing (or nil to disable).

  • :slot_class - CSS class for the div surrounding the slot.

  • :toggler_class - CSS class for the toggler a element.

AshAuthentication.Phoenix.Components.WebAuthn.RegistrationForm

Registration form for WebAuthn.

  • :button_text - Text for the registration button.

  • :disable_button_text - Text shown while the registration ceremony is in progress.

  • :form_class - CSS class for the form element.

  • :root_class - CSS class for the root div element.

  • :slot_class - CSS class for the div surrounding the slot.

AshAuthentication.Phoenix.Components.WebAuthn.AuthenticationForm

Authentication form for WebAuthn.

  • :button_text - Text for the authentication button.

  • :disable_button_text - Text shown while the authentication ceremony is in progress.

  • :form_class - CSS class for the form element.

  • :root_class - CSS class for the root div element.

  • :show_identity_field - Whether to show the identity input (false for discoverable credentials).

  • :slot_class - CSS class for the div surrounding the slot.

AshAuthentication.Phoenix.Components.WebAuthn.Input

Function components for WebAuthn form inputs.

  • :disable_button_text - Text shown on the button while submitting.

  • :error_li - CSS class for the error list li elements.

  • :error_ul - CSS class for the error list ul element.

  • :field_class - CSS class for the field wrapper div.

  • :identity_input_label - Label for the identity (email) input field.

  • :identity_input_placeholder - Placeholder for the identity input field.

  • :input_class - CSS class for input elements.

  • :input_class_with_error - CSS class for input elements when there is an error.

  • :label_class - CSS class for label elements.

  • :register_button_icon - SVG icon for the register button (or nil to hide). Must be trusted static SVG — rendered with Phoenix.HTML.raw().

  • :register_button_text - Text for the register button.

  • :sign_in_button_icon - SVG icon for the sign in button (or nil to hide). Must be trusted static SVG — rendered with Phoenix.HTML.raw().

  • :sign_in_button_text - Text for the sign in button.

  • :submit_class - CSS class for the submit button element.

AshAuthentication.Phoenix.Components.WebAuthn.Support

Detects WebAuthn browser support via a JS hook.

  • :root_class - CSS class for the root element.

  • :unsupported_message - Message shown when WebAuthn is not supported by the browser.

AshAuthentication.Phoenix.Components.WebAuthn.ManageCredentials

Credential management panel for authenticated users.

  • :add_button_class - CSS class for the add button.

  • :add_button_text - Text for the add credential button.

  • :cancel_button_text - Text for the cancel rename button.

  • :continue_button_class - CSS class for the continue button.

  • :continue_button_text - Text for the continue button shown after at least one credential is registered.

  • :credential_item_class - CSS class for each credential row.

  • :credential_list_class - CSS class for the credential list.

  • :delete_button_class - CSS class for the delete button.

  • :delete_button_text - Text for the delete button.

  • :empty_state_text - Text shown when no credentials exist.

  • :heading_class - CSS class for the heading.

  • :heading_text - Heading text for the panel.

  • :label_input_class - CSS class for the label input.

  • :last_credential_warning - Warning when trying to delete the last credential.

  • :rename_button_class - CSS class for the rename button.

  • :rename_button_text - Text for the rename button.

  • :root_class - CSS class for the management panel root div.

  • :save_button_text - Text for the save label button.

  • :timestamp_class - CSS class for timestamp text.

AshAuthentication.Phoenix.Components.WebAuthn.Verify2faForm

Drives the WebAuthn second-factor ceremony.

  • :error_class - CSS class for error messages.

  • :error_unauthenticated_text - Text shown when the user is neither authenticated nor presenting a valid token.

  • :form_class - CSS class for the visible form wrapping the verify button.

  • :instructions_class - CSS class for the instructions paragraph.

  • :instructions_text - Instructions shown above the verify button.

  • :label_class - CSS class for the heading.

  • :label_text - Heading text.

  • :root_class - CSS class for the root div element.

  • :sign_in_link_class - CSS class for the sign-in fallback link.

  • :sign_in_link_path - Path of the sign-in page.

  • :sign_in_link_text - Text for the sign-in fallback link.

  • :submit_class - CSS class for the submit button.

  • :submit_disabled_text - Text shown on the verify button while the ceremony is in flight.

  • :submit_text - Text shown on the verify button.

AshAuthentication.Phoenix.WebAuthnVerifyLive

A generic, white-label WebAuthn second-factor verification page.

  • :root_class - CSS class for the root div element.

  • :webauthn_verify_id - Element ID for the WebAuthnVerify LiveComponent.

AshAuthentication.Phoenix.WebAuthnSetupLive

A generic, white-label WebAuthn passkey setup page for second-factor flows.

  • :root_class - CSS class for the root div element.

  • :webauthn_setup_id - Element ID for the ManageCredentials LiveComponent.

Miscellaneous

AshAuthentication.Phoenix.Components.HorizontalRule

A horizontal rule with text.

  • :hr_inner_class - CSS class for the inner div element of the horizontal rule.

  • :hr_outer_class - CSS class for the outer div element of the horizontal rule.

  • :root_class - CSS class for the root div element.

  • :text - Text to display in front of the horizontal rule.

  • :text_inner_class - CSS class for the inner div element of the text area.

  • :text_outer_class - CSS class for the outer div element of the text area.

AshAuthentication.Phoenix.Components.Banner

Renders a very simple banner at the top of the sign-in component.

  • :dark_image_class - Css class for the img tag in dark mode.

  • :dark_image_url - A URL for the img src attribute in dark mode. Set to nil to disable.

  • :href_class - CSS class for the a tag.

  • :href_url - A URL for the banner image to link to. Set to nil to disable.

  • :image_class - CSS class for the img tag.

  • :image_url - A URL for the img src attribute. Set to nil to disable.

  • :root_class - CSS class for the root div element.

  • :text - Banner text. Set to nil to disable.

  • :text_class - CSS class for the text div.

AshAuthentication.Phoenix.Components.Flash

Renders the Phoenix flash messages set by Ash Authentication Phoenix.

  • :message_class_error - CSS class for the message div element when the flash key is :error.

  • :message_class_info - CSS class for the message div element when the flash key is :info.