+
+ """
+ end
+
+ attr :form, Phoenix.HTML.Form, required: true
+
+ @doc """
+ We actually need 2 different forms as the first one will keep track of
+ the profile update data and emit LiveView events and the second one will submit an HTTP request
+ `DELETE /session` to log out the current user (aka delete session cookies)
+ """
+ def account(assigns) do
+ ~H"""
+ <.form for={@form} class="form-widget" phx-submit="update-profile" phx-change="upload-profile">
+
+
+
+ """
+ end
+end
diff --git a/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts.ex b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts.ex
new file mode 100644
index 0000000..3992fb9
--- /dev/null
+++ b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts.ex
@@ -0,0 +1,14 @@
+defmodule ArcaneWeb.Layouts do
+ @moduledoc """
+ This module holds different layouts used by your application.
+
+ See the `layouts` directory for all templates available.
+ The "root" layout is a skeleton rendered as part of the
+ application router. The "app" layout is set as the default
+ layout on both `use ArcaneWeb, :controller` and
+ `use ArcaneWeb, :live_view`.
+ """
+ use ArcaneWeb, :html
+
+ embed_templates "layouts/*"
+end
diff --git a/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts/app.html.heex b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts/app.html.heex
new file mode 100644
index 0000000..f81f065
--- /dev/null
+++ b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts/app.html.heex
@@ -0,0 +1,4 @@
+
+
+ <%= @inner_content %>
+
diff --git a/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts/root.html.heex b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts/root.html.heex
new file mode 100644
index 0000000..7c0c7c3
--- /dev/null
+++ b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/components/layouts/root.html.heex
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ <.live_title>
+ <%= assigns[:page_title] || "Arcane" %>
+
+
+
+
+
+
+ <%= @inner_content %>
+
+
diff --git a/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/error_html.ex b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/error_html.ex
new file mode 100644
index 0000000..0e247e5
--- /dev/null
+++ b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/error_html.ex
@@ -0,0 +1,24 @@
+defmodule ArcaneWeb.ErrorHTML do
+ @moduledoc """
+ This module is invoked by your endpoint in case of errors on HTML requests.
+
+ See config/config.exs.
+ """
+ use ArcaneWeb, :html
+
+ # If you want to customize your error pages,
+ # uncomment the embed_templates/1 call below
+ # and add pages to the error directory:
+ #
+ # * lib/arcane_web/controllers/error_html/404.html.heex
+ # * lib/arcane_web/controllers/error_html/500.html.heex
+ #
+ # embed_templates "error_html/*"
+
+ # The default is to render a plain text page based on
+ # the template name. For example, "404.html" becomes
+ # "Not Found".
+ def render(template, _assigns) do
+ Phoenix.Controller.status_message_from_template(template)
+ end
+end
diff --git a/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/error_json.ex b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/error_json.ex
new file mode 100644
index 0000000..2c59dc0
--- /dev/null
+++ b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/error_json.ex
@@ -0,0 +1,21 @@
+defmodule ArcaneWeb.ErrorJSON do
+ @moduledoc """
+ This module is invoked by your endpoint in case of errors on JSON requests.
+
+ See config/config.exs.
+ """
+
+ # If you want to customize a particular status code,
+ # you may add your own clauses, such as:
+ #
+ # def render("500.json", _assigns) do
+ # %{errors: %{detail: "Internal Server Error"}}
+ # end
+
+ # By default, Phoenix returns the status message from
+ # the template name. For example, "404.json" becomes
+ # "Not Found".
+ def render(template, _assigns) do
+ %{errors: %{detail: Phoenix.Controller.status_message_from_template(template)}}
+ end
+end
diff --git a/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/session_controller.ex b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/session_controller.ex
new file mode 100644
index 0000000..58fd526
--- /dev/null
+++ b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/controllers/session_controller.ex
@@ -0,0 +1,96 @@
+defmodule ArcaneWeb.SessionController do
+ use ArcaneWeb, :controller
+
+ import ArcaneWeb.Auth
+ import Phoenix.LiveView.Controller
+
+ alias Arcane.Profiles
+ alias ArcaneWeb.UserManagementLive
+ alias Supabase.GoTrue
+
+ require Logger
+
+ @doc """
+ THis function is responsible to process the log in request and send tbe
+ magic link via Supabase/GoTrue
+
+ Note that we do `live_render` since there's no state to mantain between
+ controller and the live view itself (that will do authentication checks).
+ """
+ def create(conn, %{"email" => email}) do
+ params = %{
+ email: email,
+ options: %{
+ should_create_user: true,
+ email_redirect_to: ~p"/session/confirm"
+ }
+ }
+
+ {:ok, client} = Arcane.Supabase.Client.get_client()
+
+ case GoTrue.sign_in_with_otp(client, params) do
+ :ok ->
+ live_render(conn, UserManagementLive)
+
+ {:error, error} ->
+ Logger.error("""
+ [#{__MODULE__}] => Failed to login user:
+ ERROR: #{inspect(error, pretty: true)}
+ """)
+
+ live_render(conn, UserManagementLive)
+ end
+ end
+
+ @doc """
+ Once the user clicks the email link that they'll receive, the link will redirect
+ to the `/session/confirm` route defined on `ArcaneWeb.Router` and will trigger
+ this function.
+
+ So we create an empty Profile for this user, so the `UserManagementLive` can
+ correctly show informations about the profile.
+
+ Note also that we put the token into the session, as configured in the `ArcaneWeb.Endpoint`
+ it will set up session cookies to store authentication information locally.
+
+ Finally, we redirect back the user to the root page, that will redenr `UserManagementLive`
+ live view. We could use `live_render`, but it would need to pass all the state and session
+ mannually to the live view, which is unecessary here since it will happen automatically on
+ `mount` of the live view.
+ """
+ def confirm(conn, %{"token_hash" => token_hash, "type" => "magiclink"}) do
+ {:ok, client} = Arcane.Supabase.Client.get_client()
+
+ params = %{
+ token_hash: token_hash,
+ type: :magiclink
+ }
+
+ with {:ok, session} <- GoTrue.verify_otp(client, params),
+ {:ok, user} <- GoTrue.get_user(client, session) do
+ Profiles.create_profile(user_id: user.id)
+
+ conn
+ |> put_token_in_session(session.access_token)
+ |> redirect(to: ~p"/")
+ else
+ {:error, error} ->
+ Logger.error("""
+ [#{__MODULE__}] => Failed to verify OTP:
+ ERROR: #{inspect(error, pretty: true)}
+ """)
+
+ redirect(conn, to: ~p"/")
+ end
+ end
+
+ @doc """
+ This function clears the local session, which includes the session cookie, so the user
+ will need to authenticate again on the application.
+ """
+ def signout(conn, _params) do
+ conn
+ |> log_out_user(:local)
+ |> live_render(UserManagementLive)
+ end
+end
diff --git a/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/endpoint.ex b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/endpoint.ex
new file mode 100644
index 0000000..c36476d
--- /dev/null
+++ b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/endpoint.ex
@@ -0,0 +1,49 @@
+defmodule ArcaneWeb.Endpoint do
+ use Phoenix.Endpoint, otp_app: :arcane
+
+ # The session will be stored in the cookie and signed,
+ # this means its contents can be read but not tampered with.
+ # Set :encryption_salt if you would also like to encrypt it.
+ @session_options [
+ store: :cookie,
+ key: "_arcane_key",
+ signing_salt: "il6sVVfc",
+ same_site: "Lax"
+ ]
+
+ socket "/live", Phoenix.LiveView.Socket,
+ websocket: [connect_info: [session: @session_options]],
+ longpoll: [connect_info: [session: @session_options]]
+
+ # Serve at "/" the static files from "priv/static" directory.
+ #
+ # You should set gzip to true if you are running phx.digest
+ # when deploying your static files in production.
+ plug Plug.Static,
+ at: "/",
+ from: :arcane,
+ gzip: false,
+ only: ArcaneWeb.static_paths()
+
+ # Code reloading can be explicitly enabled under the
+ # :code_reloader configuration of your endpoint.
+ if code_reloading? do
+ socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
+ plug Phoenix.LiveReloader
+ plug Phoenix.CodeReloader
+ plug Phoenix.Ecto.CheckRepoStatus, otp_app: :arcane
+ end
+
+ plug Plug.RequestId
+ plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
+
+ plug Plug.Parsers,
+ parsers: [:urlencoded, :multipart, :json],
+ pass: ["*/*"],
+ json_decoder: Phoenix.json_library()
+
+ plug Plug.MethodOverride
+ plug Plug.Head
+ plug Plug.Session, @session_options
+ plug ArcaneWeb.Router
+end
diff --git a/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/live/user_management_live.ex b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/live/user_management_live.ex
new file mode 100644
index 0000000..80c697c
--- /dev/null
+++ b/examples/user_managment/phoenix_live_view_user_management/lib/arcane_web/live/user_management_live.ex
@@ -0,0 +1,170 @@
+defmodule ArcaneWeb.UserManagementLive do
+ use ArcaneWeb, :live_view
+
+ import ArcaneWeb.Components
+
+ alias Arcane.Profiles
+ alias Phoenix.LiveView.AsyncResult
+ alias Supabase.Storage
+ alias Supabase.Storage.Bucket
+
+ require Logger
+
+ on_mount {ArcaneWeb.Auth, :mount_current_user}
+
+ @bucket_name "avatars"
+
+ def mount(_params, _session, socket) do
+ current_user = socket.assigns.current_user
+ profile = current_user && Profiles.get_profile(id: current_user.id)
+ account_form = make_account_form(profile, current_user)
+
+ # `assigns` on render expect that the
+ # `@` is defined on `socket.assigns`
+ # so we need to define it here if there isn't
+ # any current user
+ {:ok,
+ socket
+ |> assign(:page_title, "User Management")
+ |> assign(:auth_form, to_form(%{"email" => nil}))
+ |> assign(:account_form, account_form)
+ |> assign(:profile, profile)
+ |> allow_upload(:avatar,
+ auto_upload: true,
+ accept: ["image/*"],
+ progress: &handle_progress/3
+ )
+ |> assign(:avatar_blob, AsyncResult.loading())
+ |> start_async(:download_avatar_blob, fn -> maybe_download_avatar(profile) end)}
+ end
+
+ def render(assigns) do
+ ~H"""
+