defmodule PhoenixKitWeb.Components.OAuthButtons do @moduledoc """ OAuth authentication buttons component for Google and Apple Sign-In. This component automatically checks if OAuth is available and configured. If OAuth is not available (dependencies not installed or not enabled in settings), the buttons will not be rendered. """ use Phoenix.Component alias PhoenixKit.Users.OAuthAvailability alias PhoenixKit.Utils.Routes @doc """ Renders OAuth provider buttons for authentication. This component only renders buttons if: - OAuth is enabled in settings (oauth_enabled = true) - Ueberauth library is loaded - At least one provider is configured ## Examples <.oauth_buttons /> <.oauth_buttons show_divider={false} /> <.oauth_buttons class="mt-6" /> """ attr :class, :string, default: "" attr :show_divider, :boolean, default: true def oauth_buttons(assigns) do # Check each provider individually assigns = assigns |> assign(:google_enabled, OAuthAvailability.provider_enabled?(:google)) |> assign(:apple_enabled, OAuthAvailability.provider_enabled?(:apple)) |> assign(:github_enabled, OAuthAvailability.provider_enabled?(:github)) # Check if at least one provider is enabled any_provider_enabled = assigns.google_enabled or assigns.apple_enabled or assigns.github_enabled assigns = assign(assigns, :any_provider_enabled, any_provider_enabled) ~H""" <%= if @any_provider_enabled do %>

<%= if @show_divider do %>

Or continue with

<% end %>

<%!-- Google Sign-In Button --%> <%= if @google_enabled do %> <.link href={Routes.path("/users/auth/google")} class="btn btn-outline w-full flex items-center justify-center gap-2 hover:bg-base-200 transition-all hover:scale-[1.02] active:scale-[0.98]" > <.icon_google class="w-5 h-5" /> Continue with Google <% end %> <%!-- Apple Sign-In Button --%> <%= if @apple_enabled do %> <.link href={Routes.path("/users/auth/apple")} class="btn btn-outline w-full flex items-center justify-center gap-2 hover:bg-base-200 transition-all hover:scale-[1.02] active:scale-[0.98]" > <.icon_apple class="w-5 h-5" /> Continue with Apple <% end %> <%!-- GitHub Sign-In Button --%> <%= if @github_enabled do %> <.link href={Routes.path("/users/auth/github")} class="btn btn-outline w-full flex items-center justify-center gap-2 hover:bg-base-200 transition-all hover:scale-[1.02] active:scale-[0.98]" > <.icon_github class="w-5 h-5" /> Continue with GitHub <% end %>

<% end %> """ end @doc """ Google icon SVG. """ attr :class, :string, default: "" def icon_google(assigns) do ~H""" """ end @doc """ Apple icon SVG. """ attr :class, :string, default: "" def icon_apple(assigns) do ~H""" """ end @doc """ GitHub icon SVG. """ attr :class, :string, default: "" def icon_github(assigns) do ~H""" """ end end