Phx_gen_auth using live view ONLY

slouchpie

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?

5 comments

/phoenix #liveview #phx_gen_auth

0 2455 5

2021-02-25 01:11:29 UTC

Showing Posts 1 to 5

Show Best Posts
Show All (oldest first)
Show All (newest first)

slouchpie

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.

Post #1

LostKobrakai

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.

Post #2

f0rest8

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

Post #3

slouchpie

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.

Post #4

f0rest8

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!

Post #5

— All posts loaded —