🔍

LiveView authentication using phx.gen.auth part 1

💡

This blog post is an exploratory post. I will be exploring how phx.gen.auth works behind the scene.

Setup phoenix liveview project

Let's first setup a new phoenix liveview project

terminal

mix phx.new learning_auth --live`

cd learning_auth

mix ecto.create

Setup phx.gen.auth

First includephx.gen.auth library.

mix.exs

defp deps do
    [
      ...
      {:plug_cowboy, "~> 2.0"},
      {:phx_gen_auth, "~> 0.5", only: [:dev], runtime: false}, 
			# The runtime: false ensures phx.gen.auth doesn't get loaded during application start
    ]
  end

terminal

mix deps.get

Once we have included the library lets use phx.gen.auth by creating an Account context with users table

terminal

mix phx.gen.auth Account User users

The above generator will create a list of modules, controllers and templates required for basic authentication. Lets deep dive into few of them to understand their functionality. Even though I will be taking a simple overview, it can be very verbose to write up. As a result, I have created a video of me walking through the files, see below.

Next Step

In the next step I will be converting the above templates and controllers to use liveview. This would allow for a smoother user experience.