Phx_gen_auth using live view ONLY

For posterity: I have decided to do this by putting my form in a live view like this:

<%= f = form_for @changeset, Routes.user_registration_path(MyAppWeb.Endpoint, :create), phx_hook: "UserRegistrationForm" %>

and then I just use https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Helpers.html#live_render/3 in user_registration.html.eex.

this way the liveview doesn’t need access to the conn but i can still get hooks in my registration form.

Note that if you’re doing this you need to pass the changeset using the session option of live_render/3.

You’ll need classical controllers for everything needing to modify the session. So as you did you can handle the forms in liveview, but they need to submit to a controller. This also kinda means you might need to share some form handling / changeset stuff between the liveview and the controller.

Same goes for logout, which needs to be in a controller given it needs to remove stuff from the session. This however is usually not a problem given it’s often just handled as a link/2 with method: :delete and not a manually created form.

This isn’t specifically about the time zone portion, but I wrote a 2 part guide to modifying your app to turn registration page into a Live View page with phx_gen_auth.

You may only be interested in part 1, the second deals with a multi-part form.

Part 1

Part 2

Hope it helps

I am going even further than this now. I want to turn the “settings” page into a LiveView. Have you done this before? The main problem is that we have to pass a conn struct to UserAuth.log_in_user.

Great to hear! I actually have done that, but I haven’t written a guide on it yet. One way to approach it, as I decided to do, can be figured out by following the archived example from Dashbit’s bytepack_archive.

It’s a bit more complicated than the registration flow since it uses live_component, especially adding the two-factor authentication with their nimble totp library, but it works amazingly.

Then, it’s just expanding on your application a bit to possibly break a single settings page into a Live View page with interactive tabs (tabbed pages) — but that’s just dependent on your app’s preferences.

Oh, lastly, it’s worth noting that it is a similar concept as before (and as @LostKobrakai mentioned), where you interact with your phx_gen_auth generated controllers through your Live View process. Typically, you can just make the swap between conn and socket thanks to how Phoenix is designed.

In a .leex template file all conn references are socket references and vice versa for a .eex template. The Programming Phoenix 1.4 book helps explain how Phoenix handles the connection (and many other things).

I would start by cloning the Bytepack archive, then looking over how they implement their settings page. It’s an incredibly great learning resource.

In the meantime, I’ll post back here if/when I write a Medium guide on it. Good luck!