Copy & Paste Engineer

【Elixir】LiveView に対する認証・認可を自作する

【Elixir】LiveView に対する認証・認可を自作する

Elixir で LiveView に対する認証・認可を自作する

以下のドキュメントを参考にしています。 Security considerations of the LiveView model — Phoenix LiveView v0.18.18

環境

LiveView 認証・認可モジュールの作成

LiveView 用の認証・認可モジュールを作成します。

defmodule DemoWeb.UserLiveAuth do
  import Phoenix.Component
  import Phoenix.LiveView
  alias DemoWeb.Accounts # from `mix phx.gen.auth`

  def on_mount(:default, _params, %{"user_token" => user_token} = _session, socket) do
    socket =
      assign_new(socket, :current_user, fn ->
        # セッショントークンが存在するか確認
        Accounts.get_user_by_session_token(user_token)
      end)

    if socket.assigns.current_user.confirmed_at do
      # ログイン済み
      {:cont, socket}
    else
      # 未ログイン /login へリダイレクト
      {:halt, redirect(socket, to: "/login")}
    end
  end
end

使用方法

使用方法は3通りあります。 必要に応じて入れ方を替えてください。

各ページに入れる

認証・認可モジュールを個々の LiveView に入れます。

defmodule DemoWeb.PageLive do
  use DemoWeb, :live_view

  # 認証・認可モジュールをフック
  on_mount DemoWeb.UserLiveAuth

  ...
end

全ページに入れる

デフォルトですべての LiveView で実行するようにします。

def live_view do
  quote do
    use Phoenix.LiveView,
      layout: {DemoWeb.LayoutView, :live}

    # すべての LiveView はログイン中のみ
    on_mount DemoWeb.UserLiveAuth
    unquote(html_helpers())
  end
end

ルーティングで行う

ルーティング時に認証・認可のモジュールをフックして実行させます。 管理しやすいので僕としてはこれがオススメです。

defmodule DemoWeb.Router do
  scope "/", DemoWeb do

    # ログイン中のみ
    live_session :default, on_mount: DemoWeb.UserLiveAuth do
      scope "/" do
        live("/demo", DemoLive)
      end
    end
  end
end

参考