feat(MagicLink): Add the UI for requesting a magic link. (#121)

lib/ash_authentication_phoenix/components/magic_link.ex

@@ -0,0 +1,171 @@
+defmodule AshAuthentication.Phoenix.Components.MagicLink do
+  use AshAuthentication.Phoenix.Overrides.Overridable,
+    root_class: "CSS class for the root `div` element.",
+    label_class: "CSS class for the `h2` element.",
+    form_class: "CSS class for the `form` element.",
+    request_flash_text:
+      "Text for the flash message when a request is received.  Set to `nil` to disable.",
+    disable_button_text: "Text for the submit button when the request is happening."
+
+  @moduledoc """
+  Generates a sign-in for for a resource using the "Magic link" strategy.
+
+  ## Component hierarchy
+
+  This is the top-most strategy-specific component, nested below
+  `AshAuthentication.Phoenix.Components.SignIn`.
+
+  Children:
+
+    * `AshAuthentication.Phoenix.Components.Password.Input.identity_field/1`
+    * `AshAuthentication.Phoenix.Components.Password.Input.submit/1`
+
+  ## Props
+
+    * `strategy` - the strategy configuration as per
+      `AshAuthentication.Info.strategy/2`.  Required.
+    * `overrides` - A list of override modules.
+
+  #{AshAuthentication.Phoenix.Overrides.Overridable.generate_docs()}
+  """
+
+  use Phoenix.LiveComponent
+  alias AshAuthentication.{Info, Phoenix.Components.Password.Input, Strategy}
+  alias AshPhoenix.Form
+  alias Phoenix.LiveView.{Rendered, Socket}
+  import AshAuthentication.Phoenix.Components.Helpers, only: [route_helpers: 1]
+  import Slug
+
+  @type props :: %{
+          required(:strategy) => AshAuthentication.Strategy.t(),
+          optional(:overrides) => [module]
+        }
+
+  @doc false
+  @impl true
+  @spec update(props, Socket.t()) :: {:ok, Socket.t()}
+  def update(assigns, socket) do
+    strategy = assigns.strategy
+    subject_name = Info.authentication_subject_name!(strategy.resource)
+
+    form = blank_form(strategy)
+
+    socket =
+      socket
+      |> assign(assigns)
+      |> assign(form: form, trigger_action: false, subject_name: subject_name)
+      |> assign_new(:overrides, fn -> [AshAuthentication.Phoenix.Overrides.Default] end)
+      |> assign_new(:label, fn -> nil end)
+
+    {:ok, socket}
+  end
+
+  @doc false
+  @impl true
+  @spec render(props) :: Rendered.t() | no_return
+  def render(assigns) do
+    ~H"""
+    <div class={override_for(@overrides, :root_class)}>
+      <%= if @label do %>
+        <h2 class={override_for(@overrides, :label_class)}><%= @label %></h2>
+      <% end %>
+
+      <.form
+        :let={form}
+        for={@form}
+        phx-change="change"
+        phx-submit="submit"
+        phx-trigger-action={@trigger_action}
+        phx-target={@myself}
+        action={
+          route_helpers(@socket).auth_path(
+            @socket.endpoint,
+            {@subject_name, Strategy.name(@strategy), :request}
+          )
+        }
+        method="POST"
+        class={override_for(@overrides, :form_class)}
+      >
+        <Input.identity_field
+          socket={@socket}
+          strategy={@strategy}
+          form={form}
+          overrides={@overrides}
+        />
+
+        <Input.submit
+          socket={@socket}
+          strategy={@strategy}
+          form={form}
+          action={@strategy.request_action_name}
+          disable_text={override_for(@overrides, :disable_button_text)}
+          overrides={@overrides}
+        />
+      </.form>
+    </div>
+    """
+  end
+
+  @doc false
+  @impl true
+  @spec handle_event(String.t(), %{required(String.t()) => String.t()}, Socket.t()) ::
+          {:noreply, Socket.t()}
+  def handle_event("change", params, socket) do
+    params = get_params(params, socket.assigns.strategy)
+
+    form =
+      socket.assigns.form
+      |> Form.validate(params, errors: false)
+
+    {:noreply, assign(socket, form: form)}
+  end
+
+  def handle_event("submit", params, socket) do
+    strategy = socket.assigns.strategy
+    params = get_params(params, strategy)
+
+    socket.assigns.form
+    |> Form.validate(params)
+    |> Form.submit()
+
+    flash = override_for(socket.assigns.overrides, :request_flash_text)
+
+    socket =
+      socket
+      |> assign(:form, blank_form(strategy))
+
+    socket =
+      if flash do
+        socket
+        |> put_flash(:info, flash)
+      else
+        socket
+      end
+
+    {:noreply, socket}
+  end
+
+  defp get_params(params, strategy) do
+    param_key =
+      strategy.resource
+      |> Info.authentication_subject_name!()
+      |> to_string()
+      |> slugify()
+
+    Map.get(params, param_key, %{})
+  end
+
+  defp blank_form(strategy) do
+    api = Info.authentication_api!(strategy.resource)
+    subject_name = Info.authentication_subject_name!(strategy.resource)
+
+    strategy.resource
+    |> Form.for_action(strategy.request_action_name,
+      api: api,
+      as: subject_name |> to_string(),
+      id:
+        "#{subject_name}-#{Strategy.name(strategy)}-#{strategy.request_action_name}" |> slugify(),
+      context: %{strategy: strategy, private: %{ash_authentication?: true}}
+    )
+  end
+end

lib/ash_authentication_phoenix/components/oauth2.ex

@@ -7,9 +7,9 @@ defmodule AshAuthentication.Phoenix.Components.OAuth2 do
   @moduledoc """
   Generates a sign-in button for OAuth2.
 
-  ## Component heirarchy
+  ## Component hierarchy
 
-  This is the top-most provider specific component, nested below
+  This is the top-most strategy-specific component, nested below
   `AshAuthentication.Phoenix.Components.SignIn`.
 
   ## Props
@@ -22,7 +22,7 @@ defmodule AshAuthentication.Phoenix.Components.OAuth2 do
   """
 
   use Phoenix.LiveComponent
-  alias AshAuthentication.Info
+  alias AshAuthentication.{Info, Strategy}
   alias Phoenix.LiveView.Rendered
   import AshAuthentication.Phoenix.Components.Helpers, only: [route_helpers: 1]
   import Phoenix.HTML
@@ -48,7 +48,7 @@ defmodule AshAuthentication.Phoenix.Components.OAuth2 do
         href={
           route_helpers(@socket).auth_path(
             @socket.endpoint,
-            {@subject_name, @strategy.name, :request}
+            {@subject_name, Strategy.name(@strategy), :request}
           )
         }
         class={override_for(@overrides, :link_class)}
@@ -93,7 +93,7 @@ defmodule AshAuthentication.Phoenix.Components.OAuth2 do
     """
 
   defp strategy_name(strategy) do
-    case strategy.name do
+    case Strategy.name(strategy) do
       :oauth2 -> "OAuth"
       other -> humanize(other)
     end

lib/ash_authentication_phoenix/components/password.ex

@@ -14,7 +14,7 @@ defmodule AshAuthentication.Phoenix.Components.Password do
 
   ## Component hierarchy
 
-  This is the top-most provider-specific component, nested below
+  This is the top-most strategy-specific component, nested below
   `AshAuthentication.Phoenix.Components.SignIn`.
 
   Children:
@@ -33,7 +33,7 @@ defmodule AshAuthentication.Phoenix.Components.Password do
   """
 
   use Phoenix.LiveComponent
-  alias AshAuthentication.{Info, Phoenix.Components.Password}
+  alias AshAuthentication.{Info, Phoenix.Components.Password, Strategy}
   alias Phoenix.LiveView.{JS, Rendered, Socket}
   import Slug
 
@@ -55,7 +55,8 @@ defmodule AshAuthentication.Phoenix.Components.Password do
       |> slugify()
 
     strategy_name =
-      assigns.strategy.name
+      assigns.strategy
+      |> Strategy.name()
       |> to_string()
       |> slugify()
 

lib/ash_authentication_phoenix/components/password/input.ex

@@ -244,6 +244,9 @@ defmodule AshAuthentication.Phoenix.Components.Password.Input do
             assigns.strategy.register_action_name
             |> to_string()
             |> String.trim_trailing("_with_password")
+
+          other ->
+            other
         end
         |> humanize()
       end)

lib/ash_authentication_phoenix/components/password/register_form.ex

@@ -32,7 +32,7 @@ defmodule AshAuthentication.Phoenix.Components.Password.RegisterForm do
 
   use Phoenix.LiveComponent
 
-  alias AshAuthentication.{Info, Phoenix.Components.Password.Input}
+  alias AshAuthentication.{Info, Phoenix.Components.Password.Input, Strategy}
   alias AshPhoenix.Form
   alias Phoenix.LiveView.{Rendered, Socket}
 
@@ -59,7 +59,9 @@ defmodule AshAuthentication.Phoenix.Components.Password.RegisterForm do
       |> Form.for_action(strategy.register_action_name,
         api: api,
         as: subject_name |> to_string(),
-        id: "#{subject_name}-#{strategy.name}-#{strategy.register_action_name}" |> slugify(),
+        id:
+          "#{subject_name}-#{Strategy.name(strategy)}-#{strategy.register_action_name}"
+          |> slugify(),
         context: %{strategy: strategy, private: %{ash_authentication?: true}}
       )
 
@@ -100,7 +102,7 @@ defmodule AshAuthentication.Phoenix.Components.Password.RegisterForm do
         action={
           route_helpers(@socket).auth_path(
             @socket.endpoint,
-            {@subject_name, @strategy.name, :register}
+            {@subject_name, Strategy.name(@strategy), :register}
           )
         }
         method="POST"

lib/ash_authentication_phoenix/components/password/reset_form.ex

@@ -34,7 +34,7 @@ defmodule AshAuthentication.Phoenix.Components.Password.ResetForm do
 
   use Phoenix.LiveComponent
 
-  alias AshAuthentication.{Info, Phoenix.Components.Password.Input}
+  alias AshAuthentication.{Info, Phoenix.Components.Password.Input, Strategy}
 
   alias AshPhoenix.Form
   alias Phoenix.LiveView.{Rendered, Socket}
@@ -86,7 +86,7 @@ defmodule AshAuthentication.Phoenix.Components.Password.ResetForm do
         action={
           route_helpers(@socket).auth_path(
             @socket.endpoint,
-            {@subject_name, @strategy.name, :reset_request}
+            {@subject_name, Strategy.name(@strategy), :reset_request}
           )
         }
         method="POST"
@@ -177,7 +177,7 @@ defmodule AshAuthentication.Phoenix.Components.Password.ResetForm do
       api: api,
       as: subject_name |> to_string(),
       id:
-        "#{subject_name}-#{strategy.name}-#{resettable.request_password_reset_action_name}"
+        "#{subject_name}-#{Strategy.name(strategy)}-#{resettable.request_password_reset_action_name}"
         |> slugify(),
       context: %{strategy: strategy, private: %{ash_authentication?: true}}
     )

lib/ash_authentication_phoenix/components/password/sign_in_form.ex

@@ -32,8 +32,7 @@ defmodule AshAuthentication.Phoenix.Components.Password.SignInForm do
   """
 
   use Phoenix.LiveComponent
-  alias AshAuthentication.Info
-  alias AshAuthentication.Phoenix.Components.Password
+  alias AshAuthentication.{Info, Phoenix.Components.Password, Strategy}
   alias AshPhoenix.Form
   alias Phoenix.LiveView.{Rendered, Socket}
   import AshAuthentication.Phoenix.Components.Helpers, only: [route_helpers: 1]
@@ -59,7 +58,9 @@ defmodule AshAuthentication.Phoenix.Components.Password.SignInForm do
       |> Form.for_action(strategy.sign_in_action_name,
         api: api,
         as: subject_name |> to_string(),
-        id: "#{subject_name}-#{strategy.name}-#{strategy.sign_in_action_name}" |> slugify(),
+        id:
+          "#{subject_name}-#{Strategy.name(strategy)}-#{strategy.sign_in_action_name}"
+          |> slugify(),
         context: %{strategy: strategy, private: %{ash_authentication?: true}}
       )
 
@@ -94,7 +95,7 @@ defmodule AshAuthentication.Phoenix.Components.Password.SignInForm do
         action={
           route_helpers(@socket).auth_path(
             @socket.endpoint,
-            {@subject_name, @strategy.name, :sign_in}
+            {@subject_name, Strategy.name(@strategy), :sign_in}
           )
         }
         method="POST"

lib/ash_authentication_phoenix/components/reset.ex

@@ -7,7 +7,7 @@ defmodule AshAuthentication.Phoenix.Components.Reset do
   @moduledoc """
   Renders a password-reset form.
 
-  ## Component heirarchy
+  ## Component hierarchy
 
   Children:
 

lib/ash_authentication_phoenix/components/reset/form.ex

@@ -9,7 +9,7 @@ defmodule AshAuthentication.Phoenix.Components.Reset.Form do
   @moduledoc """
   Generates a default password reset form.
 
-  ## Component heirarchy
+  ## Component hierarchy
 
   This is a child of `AshAuthentication.Phoenix.Components.Reset`.
 
@@ -35,7 +35,7 @@ defmodule AshAuthentication.Phoenix.Components.Reset.Form do
   """
 
   use Phoenix.LiveComponent
-  alias AshAuthentication.{Info, Phoenix.Components.Password.Input}
+  alias AshAuthentication.{Info, Phoenix.Components.Password.Input, Strategy}
   alias AshPhoenix.Form
   alias Phoenix.LiveView.{Rendered, Socket}
   import AshAuthentication.Phoenix.Components.Helpers, only: [route_helpers: 1]
@@ -66,7 +66,8 @@ defmodule AshAuthentication.Phoenix.Components.Reset.Form do
         api: api,
         as: subject_name |> to_string(),
         id:
-          "#{subject_name}-#{strategy.name}-#{resettable.password_reset_action_name}" |> slugify(),
+          "#{subject_name}-#{Strategy.name(strategy)}-#{resettable.password_reset_action_name}"
+          |> slugify(),
         context: %{strategy: strategy, private: %{ash_authentication?: true}}
       )
 
@@ -103,7 +104,10 @@ defmodule AshAuthentication.Phoenix.Components.Reset.Form do
         phx-trigger-action={@trigger_action}
         phx-target={@myself}
         action={
-          route_helpers(@socket).auth_path(@socket.endpoint, {@subject_name, @strategy.name, :reset})
+          route_helpers(@socket).auth_path(
+            @socket.endpoint,
+            {@subject_name, Strategy.name(@strategy), :reset}
+          )
         }
         method="POST"
         class={override_for(@overrides, :form_class)}

lib/ash_authentication_phoenix/components/sign_in.ex

@@ -143,6 +143,7 @@ defmodule AshAuthentication.Phoenix.Components.SignIn do
 
   defp strategy_style(%AshAuthentication.AddOn.Confirmation{}), do: nil
   defp strategy_style(%Strategy.Password{}), do: :form
+  defp strategy_style(%Strategy.MagicLink{}), do: :form
   defp strategy_style(_), do: :link
 
   defp component_for_strategy(strategy) do

lib/ash_authentication_phoenix/overrides/default.ex

@@ -66,6 +66,17 @@ defmodule AshAuthentication.Phoenix.Overrides.Default do
     set :text, "or"
   end
 
+  override Components.MagicLink do
+    set :root_class, "mt-4 mb-4"
+    set :label_class, "mt-2 mb-4 text-2xl tracking-tight font-bold text-gray-900 dark:text-white"
+    set :form_class, nil
+
+    set :request_flash_text,
+        "If this user exists in our database you will contacted with a sign-in link shortly."
+
+    set :disable_button_text, "Requesting ..."
+  end
+
   override Components.Password do
     set :root_class, "mt-4 mb-4"
     set :interstitial_class, "flex flex-row justify-between content-between text-sm font-medium"

lib/ash_authentication_phoenix/router.ex

@@ -99,9 +99,12 @@ defmodule AshAuthentication.Phoenix.Router do
       scope path, scope_opts do
         for strategy <- strategies do
           for {path, phase} <- AshAuthentication.Strategy.routes(strategy) do
-            match :*, path, controller, {subject_name, strategy.name, phase},
-              as: :auth,
-              private: %{strategy: strategy}
+            match :*,
+                  path,
+                  controller,
+                  {subject_name, AshAuthentication.Strategy.name(strategy), phase},
+                  as: :auth,
+                  private: %{strategy: strategy}
           end
         end
       end

test/support/accounts/user.ex

@@ -98,6 +98,14 @@ defmodule Example.Accounts.User do
         redirect_uri &get_config/2
         client_secret &get_config/2
       end
+
+      magic_link do
+        identity_field :email
+
+        sender(fn user, token, _ ->
+          Logger.debug("Magic link request for #{user.email} with token #{inspect(token)}")
+        end)
+      end
     end
 
     tokens do