Adding some standard OpenID Connect providers (Google, Facebook) (WIP):

* frontend

conversejs/builtin.ts

@@ -109,7 +109,7 @@ async function initConverse (
   let isRemoteWithNicknameSet: boolean = false
 
   // OIDC (OpenID Connect):
-  const tryOIDC = !!initConverseParams.externalAuthOIDC
+  const tryOIDC = (initConverseParams.externalAuthOIDC?.length ?? 0) > 0
 
   const auth = await getLocalAuthentInfos(authenticationUrl, tryOIDC, peertubeAuthHeader)
 
@@ -171,8 +171,7 @@ async function initConverse (
   params.livechat_specific_external_authent = isAuthenticatedWithExternalAccount
 
   if (tryOIDC && !isAuthenticated) {
-    params.livechat_external_auth_oidc_button_label = initConverseParams.externalAuthOIDC?.buttonLabel
+    params.livechat_external_auth_oidc_buttons = initConverseParams.externalAuthOIDC
-    params.livechat_external_auth_oidc_url = initConverseParams.externalAuthOIDC?.url
   }
 
   if (tryOIDC) { // also needed when authenticated (for the signout button)

conversejs/custom/shared/styles/livechat.scss

@@ -94,8 +94,13 @@ body[livechat-viewer-mode="on"] {
 }
 
 .livechat-external-login-modal {
-  .livechat-external-login-modal-external-auth-oidc {
+  .livechat-external-login-modal-external-auth-oidc-block {
-    text-align: center;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-flow: row wrap;
+    gap: 20px;
+    margin-bottom: 20px;
     width: 100%;
   }
 

conversejs/custom/templates/livechat-external-login-modal.js

@@ -2,23 +2,7 @@ import { _converse, api } from '@converse/headless/core'
 import { __ } from 'i18n'
 import { html } from 'lit'
 
-export const tplExternalLoginModal = (el, o) => {
+function externalLoginClickHandler (ev, el, externalAuthOIDCUrl) {
-  // eslint-disable-next-line no-undef
-  const i18nRemotePeertube = __(LOC_login_remote_peertube)
-  // eslint-disable-next-line no-undef
-  const i18nRemotePeertubeUrl = __(LOC_login_remote_peertube_url)
-  const i18nRemotePeertubeOpen = __('OK')
-  const externalAuthOIDCButtonLabel = api.settings.get('livechat_external_auth_oidc_button_label')
-  const externalAuthOIDCUrl = api.settings.get('livechat_external_auth_oidc_url')
-  return html`<div class="modal-body livechat-external-login-modal">
-    ${!externalAuthOIDCButtonLabel || !externalAuthOIDCUrl || !window.sessionStorage
-      ? ''
-      : html`
-        <div class="livechat-external-login-modal-external-auth-oidc">
-          <button
-            class="btn btn-primary"
-            @click=${
-              (ev) => {
   ev.preventDefault()
 
   el.clearAlert()
@@ -80,10 +64,71 @@ export const tplExternalLoginModal = (el, o) => {
 
   return false
 }
+
+export const tplExternalLoginModal = (el, o) => {
+  // eslint-disable-next-line no-undef
+  const i18nRemotePeertube = __(LOC_login_remote_peertube)
+  // eslint-disable-next-line no-undef
+  const i18nRemotePeertubeUrl = __(LOC_login_remote_peertube_url)
+  const i18nRemotePeertubeOpen = __('OK')
+  const buttonsDefinitions = api.settings.get('livechat_external_auth_oidc_buttons')
+
+  const externalButtonsBlocks = []
+  if (Array.isArray(buttonsDefinitions) && buttonsDefinitions.length) {
+    // type=custom first, if present
+    // and sorting on label alphabetically
+    const customButtonsDefinitions = buttonsDefinitions.filter(b => b.type === 'custom')
+      .sort((a, b) => a.buttonLabel > b.buttonLabel ? 1 : (a.buttonLabel < b.buttonLabel ? -1 : 0))
+
+    const otherButtonsDefinition = buttonsDefinitions.filter(b => b.type !== 'custom')
+      .sort((a, b) => a.buttonLabel > b.buttonLabel ? 1 : (a.buttonLabel < b.buttonLabel ? -1 : 0))
+
+    for (const block of [customButtonsDefinitions, otherButtonsDefinition]) {
+      if (!block.length) { continue }
+      const externalButtons = []
+      for (const buttonDef of block) {
+        if (typeof buttonDef !== 'object') { continue }
+        const type = buttonDef.type
+        const label = buttonDef.buttonLabel
+        const url = buttonDef.url
+        if (!type || !type || !url) {
+          continue
+        }
+        externalButtons.push({
+          label,
+          url,
+          class: 'livechat-external-login-modal-external-auth-oidc-type-' + type
+        })
+      }
+      externalButtonsBlocks.push(externalButtons)
+    }
+  }
+
+  return html`<div class="modal-body livechat-external-login-modal">
+    ${!externalButtonsBlocks.length || !window.sessionStorage
+      ? ''
+      : html`<div class="livechat-external-login-modal-external-auth-oidc">
+          ${
+            externalButtonsBlocks.map(externalButtons => html`
+              <div class="livechat-external-login-modal-external-auth-oidc-block">
+                ${
+                  externalButtons.map(button => html`
+                    <button
+                      class="btn btn-primary ${button.class}"
+                      @click=${
+                        (ev) => {
+                          externalLoginClickHandler(ev, el, button.url)
+                        }
                       }
                     >
-            ${externalAuthOIDCButtonLabel}
+                      ${button.label}
                     </button>
+                  `)
+                }
+              </div>
+            `)
+          }
+
           ${!o.external_auth_oidc_alert_message
             ? ''
             : html`<div class="invalid-feedback d-block">${o.external_auth_oidc_alert_message}</div>`

conversejs/lib/plugins/livechat-specific.ts

@@ -82,7 +82,7 @@ export const livechatSpecificsPlugin = {
       for (const k of [
         'hide_muc_participants',
         'livechat_enable_viewer_mode',
-        'livechat_external_auth_oidc_button_label', 'livechat_external_auth_oidc_url',
+        'livechat_external_auth_oidc_buttons',
         'livechat_external_auth_reconnect_mode',
         'livechat_mini_muc_head',
         'livechat_specific_external_authent'

conversejs/lib/plugins/livechat-viewer-mode.ts

@@ -9,8 +9,7 @@ export const livechatViewerModePlugin = {
       livechat_enable_viewer_mode: false,
       livechat_peertube_video_original_url: undefined,
       livechat_peertube_video_uuid: undefined,
-      livechat_external_auth_oidc_button_label: undefined,
+      livechat_external_auth_oidc_buttons: undefined,
-      livechat_external_auth_oidc_url: undefined,
       livechat_external_auth_reconnect_mode: undefined
     })
 

server/lib/conversejs/params.ts

@@ -85,14 +85,18 @@ async function getConverseJSParams (
       )
     } else {
       try {
-        const customOidc = ExternalAuthOIDC.singleton('custom')
+        const oidcs = ExternalAuthOIDC.allSingletons()
-        if (await customOidc.isOk()) {
+        for (const oidc of oidcs) {
-          const authUrl = customOidc.getConnectUrl()
+          if (await oidc.isOk()) {
-          const buttonLabel = customOidc.getButtonLabel()
+            const authUrl = oidc.getConnectUrl()
+            const buttonLabel = oidc.getButtonLabel()
             if (authUrl && buttonLabel) {
-            externalAuthOIDC = {
+              externalAuthOIDC ??= []
+              externalAuthOIDC.push({
+                type: oidc.type,
                 buttonLabel: buttonLabel,
                 url: authUrl
+              })
             }
           }
         }

server/lib/external-auth/oidc.ts

@@ -1,6 +1,7 @@
 import type { RegisterServerOptions } from '@peertube/peertube-types'
 import type { Request, Response, CookieOptions } from 'express'
 import type { ExternalAccountInfos, AcceptableAvatarMimeType } from './types'
+import type { ExternalAuthOIDCType } from '../../../shared/lib/types'
 import { ExternalAuthenticationError } from './error'
 import { getBaseRouterRoute } from '../helpers'
 import { canonicalizePluginUri } from '../uri/canonicalize'
@@ -68,8 +69,6 @@ async function getRandomBytes (size: number): Promise<Buffer> {
   })
 }
 
-type ExternalAuthOIDCType = 'custom' | 'google' | 'facebook'
-
 /**
  * This class handles the external OpenId Connect provider, if defined.
  */

shared/lib/types.ts

@@ -22,10 +22,11 @@ interface InitConverseJSParams {
   transparent: boolean
   forceDefaultHideMucParticipants?: boolean
   autofocus?: boolean
-  externalAuthOIDC?: {
+  externalAuthOIDC?: Array<{
+    type: ExternalAuthOIDCType
     buttonLabel: string
     url: string
-  }
+  }>
 }
 
 interface InitConverseJSParamsError {
@@ -119,6 +120,8 @@ interface ExternalAuthResultError {
 
 type ExternalAuthResult = ExternalAuthResultError | ExternalAuthResultOk
 
+type ExternalAuthOIDCType = 'custom' | 'google' | 'facebook'
+
 export type {
   ConverseJSTheme,
   InitConverseJSParams,
@@ -132,5 +135,6 @@ export type {
   ChatPeertubeIncludeMode,
   ExternalAuthResultError,
   ExternalAuthResultOk,
-  ExternalAuthResult
+  ExternalAuthResult,
+  ExternalAuthOIDCType
 }