AshAuthentication - How to alter page templates?
I was testing the new ash authentication extension (still in beta!). Although it is mentioned in docs that templates can be altered but couldn't find anything pointing to it. What is the quickest way to alter the design of the pages? like adding fields and new links, changing logo from Ash to something in text?
28 Replies
@jart will likely have more information, but the way it is done in general is with
Overrides: https://ash-hq.org/docs/module/ash_authentication_phoenix/latest/ashauthentication-phoenix-overridesAsh HQ
Module: AshAuthentication.Phoenix.Overrides
View the documentation for AshAuthentication.Phoenix.Overrides on Ash HQ.
I don't recall exactly how you override to do things like adding additional things to the page, but you'd likely need to override one of the components entirely. I know that there is a way to do it though
Currently I think it only allows to override the tailwind classes instead of components or live pages
Right. The best way to override it completely is to build your own live view and just choose the components you need (if any)
But you can get a long way with overrides. And if there’s not an override for the thing you want then hit me up here and I’ll add it.
So if I pick "AshAuthentication.Phoenix.SignInLive" and add my own version, is that what you recommend the quickest approach?
Yup.
I needed to change logo to a logo component instead which can contain image as well as text.
Also if you can think of a better way of doing it then let me know.
Oh the banner component can do that.
also forgot password link is not visible in the form right now
Password reset? Have you made your password strategy resettable?
Is it possible to override just one component like Banner somehow?
I did all the steps as per docs, seems like resettable was not mentioned as settings
You can override anything that it says is overridable - but there are overrides for the image and text.
<%= if override_for(@overrides, :show_banner, true) do %>
<.live_component
module={Components.Banner}
socket={@socket}
id="sign-in-banner"
overrides={@overrides}
/>
<% end %>
this part only allows to toggle banner
can't see a way to just override it with a new banner component
can I pass a different module to it instead of Components.Banner?
No.
In the banner overrides there are overrides for image and text.
Re password resets https://ash-hq.org/docs/dsl/ash_authentication/latest/authentication/authentication/strategies/password/resettable
Ash HQ
DSL Entity: ash_authentication > Authentication > authentication > ...
View the documentation for DSL Entity: ash_authentication > Authentication > authentication > strategies > password > resettable on Ash HQ.
You will need to enable token generation for resets to work.
I think replacing modules in UI is a much better option instead of ui classes. This way rigid structure of html including classes can be dealt with when needed.
but not sure if liveview or phoenix actually allows that
I think it often sounds better on the surface, but then gets really complicated really quickly
because you have to pass state up/down
I had my own set of live view components which are more aligned to the branding and wanted to use those
@Zach Daniel completely agree
i.e you're going to want special assigns from the top context and any of the "middle" components you're going to need to pass down to child components
better to just provide you with a bunch of prebuilt components and a liveview, and then you define your own LV and do as much as you can
Yeah I think the best solution is to build it yourself using ours as a guide.
You can reach down and use our password form components and stuff though if you want.
I am not sure if you have seen Blend in .NET. I think it implemented the best way to keep functionality isolated from UI. Yet to see something similiar for HTML
@jart @Zach Daniel thanks a lot for quick response. really appreciate!
Good luck!
Please add the resolved tag and close the thread (right click on it in the sidebar) if your request has been resolved 🙇
@shirishgoyal , can you share which link did you follow for the implementation of ash authentication in liveviews?
They followed the tutorial. There are some steps that require some experience with phoenix and we’re still working on the guide. https://ash-hq.org/docs/guides/ash_authentication/latest/tutorials/getting-started-with-authentication
Ash HQ
Guide: Getting Started With Authentication
Read the "Getting Started With Authentication" guide on Ash HQ
GitHub
ash_authentication_phoenix_example/auth_controller.ex at main · axe...
The simplest password authentication with Ash Framework, Ash Authentication and Phoenix. - ash_authentication_phoenix_example/auth_controller.ex at main · axelbdt/ash_authentication_phoenix_example
If you change your failure handler to redirect to the sign in page, like in this example, then you should be able to move past your current error.