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,88 +2,133 @@ import { _converse, api } from '@converse/headless/core'
 import { __ } from 'i18n'
 import { html } from 'lit'
 
+function externalLoginClickHandler (ev, el, externalAuthOIDCUrl) {
+  ev.preventDefault()
+
+  el.clearAlert()
+
+  const popup = window.open(
+    externalAuthOIDCUrl,
+    'livechat-external-auth',
+    'popup'
+  )
+
+  window.externalAuthGetResult = (data) => {
+    window.externalAuthGetResult = undefined
+
+    if (!data) {
+      // special case: when this modal is closed, used to close the popup
+      if (popup) { popup.close() }
+      return
+    }
+
+    console.log('Received an external authentication result...', data)
+    if (!data.ok) {
+      // eslint-disable-next-line no-undef
+      el.external_auth_oidc_alert_message = __(LOC_login_external_auth_alert_message) +
+        (data.message ? ` (${data.message})` : '')
+      return
+    }
+
+    console.info('Got external account information', data)
+    // Storing the token in sessionStorage.
+    window.sessionStorage.setItem('peertube-plugin-livechat-external-auth-oidc-token', data.token)
+
+    const reconnectMode = api.settings.get('livechat_external_auth_reconnect_mode')
+    if (reconnectMode === 'button-close-open') {
+      // Here, we click on the close button, then on the open button.
+      // FIXME: there is maybe a better way to do this.
+      try {
+        // But first, close the modal.
+        document.getElementsByClassName('livechat-external-login-modal')[0]
+          .closest('.modal-dialog')
+          .querySelector('button.close')
+          .click()
+
+        // As soon as disconnected, re-open:
+        _converse.api.listen.once('disconnected', () => {
+          document.getElementsByClassName('peertube-plugin-livechat-button-open')[0].click()
+        })
+
+        // And we close!
+        document.getElementsByClassName('peertube-plugin-livechat-button-close')[0].click()
+      } catch (err) {
+        // fallback... reloading window :/
+        console.error(err)
+        window.location.reload()
+      }
+    } else { // reload and other use cases...
+      window.location.reload()
+    }
+  }
+
+  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 externalAuthOIDCButtonLabel = api.settings.get('livechat_external_auth_oidc_button_label')
+  const buttonsDefinitions = api.settings.get('livechat_external_auth_oidc_buttons')
-  const externalAuthOIDCUrl = api.settings.get('livechat_external_auth_oidc_url')
+
+  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">
-    ${!externalAuthOIDCButtonLabel || !externalAuthOIDCUrl || !window.sessionStorage
+    ${!externalButtonsBlocks.length || !window.sessionStorage
       ? ''
-      : html`
+      : html`<div class="livechat-external-login-modal-external-auth-oidc">
-        <div class="livechat-external-login-modal-external-auth-oidc">
+          ${
-          <button
+            externalButtonsBlocks.map(externalButtons => html`
-            class="btn btn-primary"
+              <div class="livechat-external-login-modal-external-auth-oidc-block">
-            @click=${
+                ${
-              (ev) => {
+                  externalButtons.map(button => html`
-                ev.preventDefault()
+                    <button
-
+                      class="btn btn-primary ${button.class}"
-                el.clearAlert()
+                      @click=${
-
+                        (ev) => {
-                const popup = window.open(
+                          externalLoginClickHandler(ev, el, button.url)
-                  externalAuthOIDCUrl,
+                        }
-                  'livechat-external-auth',
+                      }
-                  'popup'
+                    >
-                )
+                      ${button.label}
-
+                    </button>
-                window.externalAuthGetResult = (data) => {
+                  `)
-                  window.externalAuthGetResult = undefined
-
-                  if (!data) {
-                    // special case: when this modal is closed, used to close the popup
-                    if (popup) { popup.close() }
-                    return
-                  }
-
-                  console.log('Received an external authentication result...', data)
-                  if (!data.ok) {
-                    // eslint-disable-next-line no-undef
-                    el.external_auth_oidc_alert_message = __(LOC_login_external_auth_alert_message) +
-                      (data.message ? ` (${data.message})` : '')
-                    return
-                  }
-
-                  console.info('Got external account information', data)
-                  // Storing the token in sessionStorage.
-                  window.sessionStorage.setItem('peertube-plugin-livechat-external-auth-oidc-token', data.token)
-
-                  const reconnectMode = api.settings.get('livechat_external_auth_reconnect_mode')
-                  if (reconnectMode === 'button-close-open') {
-                    // Here, we click on the close button, then on the open button.
-                    // FIXME: there is maybe a better way to do this.
-                    try {
-                      // But first, close the modal.
-                      document.getElementsByClassName('livechat-external-login-modal')[0]
-                        .closest('.modal-dialog')
-                        .querySelector('button.close')
-                        .click()
-
-                      // As soon as disconnected, re-open:
-                      _converse.api.listen.once('disconnected', () => {
-                        document.getElementsByClassName('peertube-plugin-livechat-button-open')[0].click()
-                      })
-
-                      // And we close!
-                      document.getElementsByClassName('peertube-plugin-livechat-button-close')[0].click()
-                    } catch (err) {
-                      // fallback... reloading window :/
-                      console.error(err)
-                      window.location.reload()
-                    }
-                  } else { // reload and other use cases...
-                    window.location.reload()
-                  }
                 }
+              </div>
+            `)
+          }
 
-                return false
-              }
-            }
-          >
-            ${externalAuthOIDCButtonLabel}
-          </button>
           ${!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()
-          if (authUrl && buttonLabel) {
+            const buttonLabel = oidc.getButtonLabel()
-            externalAuthOIDC = {
+            if (authUrl && buttonLabel) {
-              buttonLabel: buttonLabel,
+              externalAuthOIDC ??= []
-              url: authUrl
+              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
 }