From 9dadc0141cf9fff19d86814d25706a1c55e8dc0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Fri, 20 Jun 2025 10:22:29 +0200
Subject: [PATCH] FEATURE: add link to "associated accounts" providers (#33275)

This adds a link for each authentication providers that are listed in
/my/preferences/account in the "Associated Accounts" section.

This is particularly useful when Discourse is being used in the PWA or
in the DiscourseMobile app where there's no browser bar available and
the only way to visit the provider's website is to open a browser
window.

That way, they can _just_ click the provider's name.

Internal ref - t/156255

---

**BEFORE**

![Screenshot 2025-06-19 at 21 04
46](https://github.com/user-attachments/assets/3d2be5d0-d857-4b8a-b0a5-5672301c59c6)

**AFTER**

![Screenshot 2025-06-19 at 21 03
39](https://github.com/user-attachments/assets/4c8bc5e9-3c99-4924-8d33-547f567bb346)
---
 .../app/controllers/preferences/account.js    | 14 ++---
 .../app/templates/preferences/account.gjs     | 24 ++++++-
 app/serializers/auth_provider_serializer.rb   | 31 +++++----
 lib/auth/auth_provider.rb                     | 24 ++++---
 lib/auth/authenticator.rb                     |  5 ++
 lib/auth/discord_authenticator.rb             |  4 ++
 lib/auth/discourse_id_authenticator.rb        |  4 ++
 lib/auth/facebook_authenticator.rb            |  4 ++
 lib/auth/github_authenticator.rb              |  4 ++
 lib/auth/google_oauth2_authenticator.rb       |  4 ++
 lib/auth/linkedin_oidc_authenticator.rb       |  4 ++
 lib/auth/twitter_authenticator.rb             |  4 ++
 .../user_preferences_account_spec.rb          | 63 ++++++++++++++++++-
 13 files changed, 151 insertions(+), 38 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/controllers/preferences/account.js b/app/assets/javascripts/discourse/app/controllers/preferences/account.js
index 90c3fa35bb2..fc45021fee2 100644
--- a/app/assets/javascripts/discourse/app/controllers/preferences/account.js
+++ b/app/assets/javascripts/discourse/app/controllers/preferences/account.js
@@ -87,16 +87,12 @@ export default class AccountController extends Controller {
 
   @discourseComputed("model.associated_accounts.[]")
   authProviders(accounts) {
-    const allMethods = findAll();
-
-    const result = allMethods.map((method) => {
-      return {
+    return findAll()
+      .map((method) => ({
         method,
-        account: accounts.find((account) => account.name === method.name), // Will be undefined if no account
-      };
-    });
-
-    return result.filter((value) => value.account || value.method.can_connect);
+        account: accounts.find(({ name }) => name === method.name),
+      }))
+      .filter((value) => value.account || value.method.can_connect);
   }
 
   @discourseComputed(
diff --git a/app/assets/javascripts/discourse/app/templates/preferences/account.gjs b/app/assets/javascripts/discourse/app/templates/preferences/account.gjs
index ba10c911acb..55415fc6122 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences/account.gjs
+++ b/app/assets/javascripts/discourse/app/templates/preferences/account.gjs
@@ -168,7 +168,17 @@ export default RouteTemplate(
                     </td>
                     <td>
                       <div class="associated-account__name">
-                        {{authProvider.method.prettyName}}
+                        {{#if authProvider.method.provider_url}}
+                          <a
+                            href={{authProvider.method.provider_url}}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                          >
+                            {{authProvider.method.prettyName}}
+                          </a>
+                        {{else}}
+                          {{authProvider.method.prettyName}}
+                        {{/if}}
                       </div>
                       <div class="associated-account__description">
                         {{authProvider.account.description}}
@@ -206,7 +216,17 @@ export default RouteTemplate(
                     </td>
                     <td>
                       <div class="associated-account__name">
-                        {{authProvider.method.prettyName}}
+                        {{#if authProvider.method.provider_url}}
+                          <a
+                            href={{authProvider.method.provider_url}}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                          >
+                            {{authProvider.method.prettyName}}
+                          </a>
+                        {{else}}
+                          {{authProvider.method.prettyName}}
+                        {{/if}}
                       </div>
                       <div class="associated-account__description">
                         {{authProvider.account.description}}
diff --git a/app/serializers/auth_provider_serializer.rb b/app/serializers/auth_provider_serializer.rb
index ae8a54e48d8..11e2d4819db 100644
--- a/app/serializers/auth_provider_serializer.rb
+++ b/app/serializers/auth_provider_serializer.rb
@@ -1,28 +1,27 @@
 # frozen_string_literal: true
 
 class AuthProviderSerializer < ApplicationSerializer
-  attributes :name,
-             :custom_url,
-             :pretty_name_override,
-             :title_override,
-             :frame_width,
-             :frame_height,
-             :can_connect,
+  attributes :can_connect,
              :can_revoke,
-             :icon
+             :custom_url,
+             :frame_height,
+             :frame_width,
+             :icon,
+             :name,
+             :pretty_name_override,
+             :provider_url,
+             :title_override
 
-  def title_override
-    return SiteSetting.get(object.title_setting) if object.title_setting
-    object.title
+  # ensures that the "/custom" route doesn't trigger the magic custom_url helper in ActionDispatch
+  def custom_url
+    object.custom_url
   end
 
   def pretty_name_override
-    return SiteSetting.get(object.pretty_name_setting) if object.pretty_name_setting
-    object.pretty_name
+    object.pretty_name_setting ? SiteSetting.get(object.pretty_name_setting) : object.pretty_name
   end
 
-  def custom_url
-    # ensures that the "/custom" route doesn't trigger the magic custom_url helper in ActionDispatch
-    object.custom_url
+  def title_override
+    object.title_setting ? SiteSetting.get(object.title_setting) : object.title
   end
 end
diff --git a/lib/auth/auth_provider.rb b/lib/auth/auth_provider.rb
index 0fa9fed646b..e44a3e6f8c5 100644
--- a/lib/auth/auth_provider.rb
+++ b/lib/auth/auth_provider.rb
@@ -10,23 +10,19 @@ class Auth::AuthProvider
   def self.auth_attributes
     %i[
       authenticator
-      pretty_name
-      title
-      frame_width
-      frame_height
-      pretty_name_setting
-      title_setting
       custom_url
+      frame_height
+      frame_width
       icon
+      pretty_name
+      pretty_name_setting
+      title
+      title_setting
     ]
   end
 
   attr_accessor(*auth_attributes)
 
-  def name
-    authenticator.name
-  end
-
   def can_connect
     authenticator.can_connect_existing_user?
   end
@@ -34,4 +30,12 @@ class Auth::AuthProvider
   def can_revoke
     authenticator.can_revoke?
   end
+
+  def name
+    authenticator.name
+  end
+
+  def provider_url
+    authenticator.provider_url
+  end
 end
diff --git a/lib/auth/authenticator.rb b/lib/auth/authenticator.rb
index 82beed27f5f..9d55191124d 100644
--- a/lib/auth/authenticator.rb
+++ b/lib/auth/authenticator.rb
@@ -13,6 +13,11 @@ class Auth::Authenticator
     name
   end
 
+  # Used in /my/preferences/account to link to the provider's website
+  def provider_url
+    nil
+  end
+
   def enabled?
     raise NotImplementedError
   end
diff --git a/lib/auth/discord_authenticator.rb b/lib/auth/discord_authenticator.rb
index acb4dd85abc..ff7d9cba894 100644
--- a/lib/auth/discord_authenticator.rb
+++ b/lib/auth/discord_authenticator.rb
@@ -46,6 +46,10 @@ class Auth::DiscordAuthenticator < Auth::ManagedAuthenticator
     "Discord"
   end
 
+  def provider_url
+    "https://discord.com"
+  end
+
   def enabled?
     SiteSetting.enable_discord_logins?
   end
diff --git a/lib/auth/discourse_id_authenticator.rb b/lib/auth/discourse_id_authenticator.rb
index 8c38c1855fa..d3b98a334a8 100644
--- a/lib/auth/discourse_id_authenticator.rb
+++ b/lib/auth/discourse_id_authenticator.rb
@@ -33,6 +33,10 @@ class Auth::DiscourseIdAuthenticator < Auth::ManagedAuthenticator
     "Discourse ID"
   end
 
+  def provider_url
+    site
+  end
+
   def enabled?
     SiteSetting.enable_discourse_id && SiteSetting.discourse_id_client_id.present? &&
       SiteSetting.discourse_id_client_secret.present?
diff --git a/lib/auth/facebook_authenticator.rb b/lib/auth/facebook_authenticator.rb
index 08976df791d..fc3d4dac95d 100644
--- a/lib/auth/facebook_authenticator.rb
+++ b/lib/auth/facebook_authenticator.rb
@@ -11,6 +11,10 @@ class Auth::FacebookAuthenticator < Auth::ManagedAuthenticator
     "Facebook"
   end
 
+  def provider_url
+    "https://www.facebook.com"
+  end
+
   def enabled?
     SiteSetting.enable_facebook_logins
   end
diff --git a/lib/auth/github_authenticator.rb b/lib/auth/github_authenticator.rb
index d128cb79ae3..de70ff75e83 100644
--- a/lib/auth/github_authenticator.rb
+++ b/lib/auth/github_authenticator.rb
@@ -11,6 +11,10 @@ class Auth::GithubAuthenticator < Auth::ManagedAuthenticator
     "GitHub"
   end
 
+  def provider_url
+    "https://github.com"
+  end
+
   def enabled?
     SiteSetting.enable_github_logins
   end
diff --git a/lib/auth/google_oauth2_authenticator.rb b/lib/auth/google_oauth2_authenticator.rb
index fd1cc41c3a6..65574204bad 100644
--- a/lib/auth/google_oauth2_authenticator.rb
+++ b/lib/auth/google_oauth2_authenticator.rb
@@ -14,6 +14,10 @@ class Auth::GoogleOAuth2Authenticator < Auth::ManagedAuthenticator
     "Google"
   end
 
+  def provider_url
+    "https://accounts.google.com"
+  end
+
   def enabled?
     SiteSetting.enable_google_oauth2_logins
   end
diff --git a/lib/auth/linkedin_oidc_authenticator.rb b/lib/auth/linkedin_oidc_authenticator.rb
index 0c44355cdd2..246015a49f1 100644
--- a/lib/auth/linkedin_oidc_authenticator.rb
+++ b/lib/auth/linkedin_oidc_authenticator.rb
@@ -49,6 +49,10 @@ class Auth::LinkedInOidcAuthenticator < Auth::ManagedAuthenticator
     "LinkedIn"
   end
 
+  def provider_url
+    "https://www.linkedin.com"
+  end
+
   def enabled?
     SiteSetting.enable_linkedin_oidc_logins
   end
diff --git a/lib/auth/twitter_authenticator.rb b/lib/auth/twitter_authenticator.rb
index 45b49b229f4..334c4948dac 100644
--- a/lib/auth/twitter_authenticator.rb
+++ b/lib/auth/twitter_authenticator.rb
@@ -9,6 +9,10 @@ class Auth::TwitterAuthenticator < Auth::ManagedAuthenticator
     "X / Twitter"
   end
 
+  def provider_url
+    "https://x.com"
+  end
+
   def enabled?
     SiteSetting.enable_twitter_logins
   end
diff --git a/spec/system/user_page/user_preferences_account_spec.rb b/spec/system/user_page/user_preferences_account_spec.rb
index ca1ffbd8339..00f6b417c59 100644
--- a/spec/system/user_page/user_preferences_account_spec.rb
+++ b/spec/system/user_page/user_preferences_account_spec.rb
@@ -1,9 +1,10 @@
 # frozen_string_literal: true
 
-describe "User preferences | Avatar", type: :system do
+describe "User preferences | Account", type: :system do
   fab!(:user) { Fabricate(:user, refresh_auto_groups: true) }
   let(:user_account_preferences_page) { PageObjects::Pages::UserPreferencesAccount.new }
   let(:avatar_selector_modal) { PageObjects::Modals::AvatarSelector.new }
+
   before { sign_in(user) }
 
   describe "avatar-selector modal" do
@@ -33,4 +34,64 @@ describe "User preferences | Avatar", type: :system do
       expect(avatar_selector_modal).to have_no_avatar_upload_button
     end
   end
+
+  describe "external login provider URLs" do
+    it "shows provider URLs as links when available" do
+      SiteSetting.enable_discord_logins = true
+      SiteSetting.enable_facebook_logins = true
+      SiteSetting.enable_github_logins = true
+      SiteSetting.enable_google_oauth2_logins = true
+
+      # Let's connect at least 1 external account
+      UserAssociatedAccount.create!(
+        user:,
+        provider_name: "google_oauth2",
+        provider_uid: "123456",
+        info: {
+          "email" => user.email,
+        },
+      )
+
+      user_account_preferences_page.visit(user)
+
+      name = find(".pref-associated-accounts table tr.discord .associated-account__name")
+      expect(name).to have_link("Discord", href: "https://discord.com")
+
+      name = find(".pref-associated-accounts table tr.facebook .associated-account__name")
+      expect(name).to have_link("Facebook", href: "https://www.facebook.com")
+
+      name = find(".pref-associated-accounts table tr.github .associated-account__name")
+      expect(name).to have_link("GitHub", href: "https://github.com")
+
+      name = find(".pref-associated-accounts table tr.google-oauth2 .associated-account__name")
+      expect(name).to have_link("Google", href: "https://accounts.google.com")
+    end
+
+    it "shows provider names without links when provider_url is not implemented" do
+      begin
+        authenticator =
+          Class
+            .new(Auth::ManagedAuthenticator) do
+              def name
+                "test_no_url"
+              end
+
+              def enabled?
+                true
+              end
+            end
+            .new
+
+        provider = Auth::AuthProvider.new(authenticator:, icon: "flash")
+        DiscoursePluginRegistry.register_auth_provider(provider)
+
+        user_account_preferences_page.visit(user)
+
+        name = find(".pref-associated-accounts table tr.test-no-url .associated-account__name")
+        expect(name).not_to have_css("a")
+      ensure
+        DiscoursePluginRegistry.reset!
+      end
+    end
+  end
 end