support multiple OTP sources

Author: felixevers

package.json

@@ -1,6 +1,6 @@
 {
   "name": "id.helpwave.de",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "repository": {
     "type": "git",
     "url": "git://github.com/helpwave/id.helpwave.de.git"

src/login/pages/LoginOtp.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { Button, Input, FormFieldLayout } from '@helpwave/hightide'
+import { Button, Input, FormFieldLayout, SelectUncontrolled, SelectOption } from '@helpwave/hightide'
 import type { KcContext } from '../KcContext'
 import { useI18n } from '../i18n'
 import Template from 'keycloakify/login/Template'
@@ -14,13 +14,19 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
     const { i18n } = useI18n({ kcContext })
     const t = useTranslation()
     const [otp, setOtp] = useState('')
+    const [selectedAuthExecId, setSelectedAuthExecId] = useState(
+        kcContext.auth?.authenticationSelections?.[0]?.authExecId ?? ''
+    )
 
     const otpError = kcContext.messagesPerField?.existsError('otp')
         ? kcContext.messagesPerField.get('otp')
         : undefined
 
     const message = kcContext.message
 
+    const authenticationSelections = kcContext.auth?.authenticationSelections
+    const hasMultipleSources = authenticationSelections && authenticationSelections.length > 1
+
     return (
         <Template
             kcContext={kcContext}
@@ -57,6 +63,42 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
                     method="post"
                     style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}
                 >
+                    {hasMultipleSources ? (
+                        <>
+                            <input
+                                type="hidden"
+                                name="authExecId"
+                                value={selectedAuthExecId}
+                            />
+                            <FormFieldLayout
+                                label={t('selectAuthenticatorTitle')}
+                                required
+                            >
+                                {({ id, ariaAttributes }) => (
+                                    <SelectUncontrolled
+                                        id={id}
+                                        value={selectedAuthExecId}
+                                        onValueChange={(value) => setSelectedAuthExecId(value)}
+                                        onEditComplete={() => {}}
+                                        {...ariaAttributes}
+                                    >
+                                        {authenticationSelections.map((selection) => (
+                                            <SelectOption key={selection.authExecId} value={selection.authExecId}>
+                                                {selection.displayName}
+                                            </SelectOption>
+                                        ))}
+                                    </SelectUncontrolled>
+                                )}
+                            </FormFieldLayout>
+                        </>
+                    ) : authenticationSelections && authenticationSelections.length === 1 ? (
+                        <input
+                            type="hidden"
+                            name="authExecId"
+                            value={authenticationSelections[0].authExecId}
+                        />
+                    ) : null}
+
                     <FormFieldLayout
                         label={t('otp')}
                         invalidDescription={otpError}