AshAuthentication - How to alter page templates?

shirishgoyal
2023-01-25

shirishgoyal:

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?

ZachDaniel:

<@346791515923939328> 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-overrides

ZachDaniel:

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

shirishgoyal:

Currently I think it only allows to override the tailwind classes instead of components or live pages

jart:

Right. The best way to override it completely is to build your own live view and just choose the components you need (if any)

jart:

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.

shirishgoyal:

So if I pick “AshAuthentication.Phoenix.SignInLive” and add my own version, is that what you recommend the quickest approach?

jart:

Yup.

shirishgoyal:

I needed to change logo to a logo component instead which can contain image as well as text.

jart:

Also if you can think of a better way of doing it then let me know.

jart:

Oh the banner component can do that.

shirishgoyal:

also forgot password link is not visible in the form right now

jart:

Password reset? Have you made your password strategy resettable?

shirishgoyal:

Is it possible to override just one component like Banner somehow?

shirishgoyal:

I did all the steps as per docs, seems like resettable was not mentioned as settings

jart:

You can override anything that it says is overridable - but there are overrides for the image and text.

shirishgoyal:

<%= if override_for(@overrides, :show_banner, true) do %>

    <.live_component
      module={Components.Banner}
      socket={@socket}
      id="sign-in-banner"
      overrides={@overrides}
    />
  <% end %>

shirishgoyal:

this part only allows to toggle banner

shirishgoyal:

can’t see a way to just override it with a new banner component

shirishgoyal:

can I pass a different module to it instead of Components.Banner?

jart:

No.

jart:

In the banner overrides there are overrides for image and text.

jart:

You will need to enable token generation for resets to work.

shirishgoyal:

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.

shirishgoyal:

but not sure if liveview or phoenix actually allows that

ZachDaniel:

I think it often sounds better on the surface, but then gets really complicated really quickly

ZachDaniel:

because you have to pass state up/down

shirishgoyal:

I had my own set of live view components which are more aligned to the branding and wanted to use those

shirishgoyal:

<@197905764424089601> completely agree

ZachDaniel:

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

ZachDaniel:

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

jart:

Yeah I think the best solution is to build it yourself using ours as a guide.

jart:

You can reach down and use our password form components and stuff though if you want.

shirishgoyal:

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

shirishgoyal:

<@346791515923939328> <@197905764424089601> thanks a lot for quick response. really appreciate!

jart:

Good luck!

ZachDaniel:

Please add the resolved tag and close the thread (right click on it in the sidebar) if your request has been resolved 🙇

talha-azeem:

<@485295208410382347> , can you share which link did you follow for the implementation of ash authentication in liveviews?

ZachDaniel:

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

ZachDaniel:

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.