Fellow Elixir devs,
I am about to eat a sandwich and a cup of tea so sorry if this question is badly phrased.
Basically, I am working on app that uses LiveView for every page except for auth pages, which were generated using phx_gen_auth.
Recently, I wanted to use LiveView Hooks to get browser-detected “timezone” as default value in a select field on the registration form, so I started turning it into a LiveView. It actually works fine except that I want to log the user in after they register and the
user_auth.ex function to
log_in_user requires a Plug.Conn. I know I cannot access the conn from a LiveView so I wonder should I just stop this.
My questions are:
- has anyone had any success doing this?
- is it a bad idea to use LiveView for this part of the app?
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 Phoenix.LiveView.Helpers — Phoenix LiveView v0.15.4 in
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
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
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.
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
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
socket thanks to how Phoenix is designed.
.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!