Packages
phoenix_kit
1.7.217
1.7.217
1.7.216
1.7.215
1.7.214
1.7.213
1.7.212
1.7.211
1.7.210
1.7.209
1.7.208
1.7.207
1.7.206
1.7.205
1.7.204
1.7.203
1.7.202
1.7.201
1.7.200
1.7.199
1.7.198
1.7.197
1.7.196
1.7.194
1.7.193
1.7.192
1.7.191
1.7.190
1.7.189
1.7.187
1.7.186
1.7.185
1.7.184
1.7.183
1.7.182
1.7.181
1.7.180
1.7.179
1.7.178
1.7.177
1.7.176
1.7.175
1.7.174
1.7.173
1.7.172
1.7.171
1.7.170
1.7.169
1.7.168
1.7.167
1.7.166
1.7.165
1.7.164
1.7.162
1.7.161
1.7.160
1.7.159
1.7.157
1.7.156
1.7.155
1.7.154
1.7.153
1.7.152
1.7.151
1.7.150
1.7.149
1.7.146
1.7.145
1.7.144
1.7.143
1.7.138
1.7.133
1.7.132
1.7.131
1.7.130
1.7.128
1.7.126
1.7.125
1.7.121
1.7.120
1.7.119
1.7.118
1.7.117
1.7.116
1.7.115
1.7.114
1.7.113
1.7.112
1.7.111
1.7.110
1.7.109
1.7.108
1.7.107
1.7.106
1.7.105
1.7.104
1.7.103
1.7.102
1.7.101
1.7.100
1.7.99
1.7.98
1.7.97
1.7.96
1.7.95
1.7.94
1.7.93
1.7.92
1.7.91
1.7.90
1.7.89
1.7.88
1.7.87
1.7.86
1.7.85
1.7.84
1.7.83
1.7.82
1.7.81
1.7.80
1.7.79
1.7.78
1.7.77
1.7.76
1.7.75
1.7.74
1.7.71
1.7.70
1.7.69
1.7.66
1.7.65
1.7.64
1.7.63
1.7.62
1.7.61
1.7.59
1.7.58
1.7.57
1.7.56
1.7.55
1.7.54
1.7.53
1.7.52
1.7.51
1.7.49
1.7.44
1.7.43
1.7.42
1.7.41
1.7.39
1.7.38
1.7.37
1.7.36
1.7.34
1.7.33
1.7.31
1.7.30
1.7.29
1.7.28
1.7.27
1.7.26
1.7.25
1.7.24
1.7.23
1.7.22
1.7.21
1.7.20
1.7.19
1.7.18
1.7.17
1.7.16
1.7.15
1.7.14
1.7.13
1.7.12
1.7.11
1.7.10
1.7.9
1.7.8
1.7.7
1.7.6
1.7.5
1.7.4
1.7.3
1.7.2
1.7.1
1.7.0
1.6.20
1.6.19
1.6.18
1.6.17
1.6.16
1.6.15
1.6.14
1.6.13
1.6.12
1.6.11
1.6.10
1.6.9
1.6.8
1.6.7
1.6.6
1.6.5
1.6.4
1.6.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.2
1.3.1
1.3.0
1.2.10
1.2.9
1.2.8
1.2.7
1.2.5
1.2.4
1.2.2
1.2.1
1.2.0
1.1.0
1.0.0
A foundation for building Elixir Phoenix apps — SaaS, social networks, ERP systems, marketplaces, and more
Current section
Files
Jump to
Current section
Files
lib/phoenix_kit_web/components/oauth_buttons.ex
defmodule PhoenixKitWeb.Components.OAuthButtons do
@moduledoc """
OAuth authentication buttons component for Google, GitHub, and Facebook 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
alias PhoenixKitWeb.Components.Core.Icons
@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
attr :return_to, :string,
default: nil,
doc:
"Local post-login destination to carry through the OAuth round-trip. The callback stashes it as :oauth_return_to; without it a user sent to sign in from a protected page lands on the default instead."
def oauth_buttons(assigns) do
# Check each provider individually
assigns =
assigns
|> assign(:google_enabled, OAuthAvailability.provider_enabled?(:google))
|> assign(:github_enabled, OAuthAvailability.provider_enabled?(:github))
|> assign(:facebook_enabled, OAuthAvailability.provider_enabled?(:facebook))
# Check if at least one provider is enabled
any_provider_enabled =
assigns.google_enabled or assigns.github_enabled or assigns.facebook_enabled
assigns = assign(assigns, :any_provider_enabled, any_provider_enabled)
# Only a local path travels; anything else is dropped rather than handed
# to the callback's session stash.
assigns =
assign(assigns, :return_query, oauth_return_query(assigns[:return_to]))
~H"""
<%= if @any_provider_enabled do %>
<div class={@class}>
<%= if @show_divider do %>
<div class="divider text-base-content/60">Or continue with</div>
<% end %>
<div class="space-y-2">
<%!-- Google Sign-In Button --%>
<%!-- OAuth routes are non-localized, so we use locale: :none --%>
<%= if @google_enabled do %>
<.link
href={Routes.path("/users/auth/google", locale: :none) <> @return_query}
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]"
>
<Icons.icon_google class="w-5 h-5" />
<span>Continue with Google</span>
</.link>
<% end %>
<%!-- GitHub Sign-In Button --%>
<%= if @github_enabled do %>
<.link
href={Routes.path("/users/auth/github", locale: :none) <> @return_query}
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]"
>
<Icons.icon_github class="w-5 h-5" />
<span>Continue with GitHub</span>
</.link>
<% end %>
<%!-- Facebook Sign-In Button --%>
<%= if @facebook_enabled do %>
<.link
href={Routes.path("/users/auth/facebook", locale: :none) <> @return_query}
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]"
>
<Icons.icon_facebook class="w-5 h-5" />
<span>Continue with Facebook</span>
</.link>
<% end %>
</div>
</div>
<% end %>
"""
end
defp oauth_return_query(return_to) do
if is_binary(return_to) and Routes.local_path?(return_to) do
"?" <> URI.encode_query(%{"return_to" => return_to})
else
""
end
end
end