Revise VerifyEmailCodeAction

- We now use the new required action configuration support
- If try-auto-submit is enabled, we attempt submit the form if the input matches the configured pattern.

Author: thomasdarimont

keycloak/extensions/src/main/java/com/github/thomasdarimont/keycloak/custom/auth/verifyemailcode/VerifyEmailCodeAction.java

@@ -22,9 +22,12 @@
 import org.keycloak.models.KeycloakSession;
 import org.keycloak.models.KeycloakSessionFactory;
 import org.keycloak.models.RealmModel;
+import org.keycloak.models.RequiredActionConfigModel;
 import org.keycloak.models.UserModel;
 import org.keycloak.models.utils.FormMessage;
 import org.keycloak.protocol.AuthorizationEndpointBase;
+import org.keycloak.provider.ProviderConfigProperty;
+import org.keycloak.provider.ProviderConfigurationBuilder;
 import org.keycloak.services.messages.Messages;
 import org.keycloak.services.validation.Validation;
 import org.keycloak.sessions.AuthenticationSessionModel;
@@ -42,8 +45,6 @@ public class VerifyEmailCodeAction implements RequiredActionProvider, RequiredAc
     public static final String EMAIL_CODE_FORM = "email-code-form.ftl";
     public static final String EMAIL_CODE_NOTE = "emailCode";
 
-    private VerifyEmailCodeActionConfig config;
-
     @Override
     public void evaluateTriggers(RequiredActionContext context) {
         if (context.getRealm().isVerifyEmail() && !context.getUser().isEmailVerified()) {
@@ -75,19 +76,20 @@ public void requiredActionChallenge(RequiredActionContext context, FormMessage e
         LoginFormsProvider form = context.form();
         authSession.setClientNote(AuthorizationEndpointBase.APP_INITIATED_FLOW, null);
 
+        VerifyEmailCodeActionConfig config = new VerifyEmailCodeActionConfig(context.getConfig());
+
         // Do not allow resending e-mail by simple page refresh, i.e. when e-mail sent, it should be resent properly via email-verification endpoint
         if (!Objects.equals(authSession.getAuthNote(Constants.VERIFY_EMAIL_KEY), email)) {
             authSession.setAuthNote(Constants.VERIFY_EMAIL_KEY, email);
             EventBuilder event = context.getEvent().clone().event(EventType.SEND_VERIFY_EMAIL).detail(Details.EMAIL, email);
-            generateAndSendEmailCode(context);
+            generateAndSendEmailCode(context, config);
         }
 
         if (errorMessage != null) {
             form.setErrors(List.of(errorMessage));
         }
 
         form.setAttribute("codePattern", config.getCodePattern());
-        form.setAttribute("codeLength", config.getCodeLengthUi());
         form.setAttribute("tryAutoSubmit", config.isTryAutoSubmit());
 
         Response challenge = form.createForm(EMAIL_CODE_FORM);
@@ -135,37 +137,37 @@ public void processAction(RequiredActionContext context) {
     }
 
 
-    private void generateAndSendEmailCode(RequiredActionContext context) {
+    protected void generateAndSendEmailCode(RequiredActionContext context, VerifyEmailCodeActionConfig config) {
 
         if (context.getAuthenticationSession().getAuthNote(EMAIL_CODE_NOTE) != null) {
             // skip sending email code
             return;
         }
 
         var emailCode = SecretGenerator.getInstance().randomString(config.getCodeLength(), SecretGenerator.DIGITS);
-        sendEmailWithCode(context, toDisplayCode(emailCode));
+        sendEmailWithCode(context, toDisplayCode(emailCode, config));
 
         context.getAuthenticationSession().setAuthNote(EMAIL_CODE_NOTE, emailCode);
     }
 
-    private String toDisplayCode(String emailCode) {
+    protected String toDisplayCode(String emailCode, VerifyEmailCodeActionConfig config) {
         return new StringBuilder(emailCode).insert(config.getCodeLength() / 2, "-").toString();
     }
 
-    private String fromDisplayCode(String code) {
+    protected String fromDisplayCode(String code) {
         return code.replace("-", "");
     }
 
-    private void resetEmailCode(RequiredActionContext context) {
+    protected void resetEmailCode(RequiredActionContext context) {
         context.getAuthenticationSession().removeAuthNote(EMAIL_CODE_NOTE);
     }
 
-    private boolean validateCode(RequiredActionContext context, String givenCode) {
+    protected boolean validateCode(RequiredActionContext context, String givenCode) {
         var emailCode = context.getAuthenticationSession().getAuthNote(EMAIL_CODE_NOTE);
         return emailCode.equals(givenCode);
     }
 
-    private void sendEmailWithCode(RequiredActionContext context, String code) {
+    protected void sendEmailWithCode(RequiredActionContext context, String code) {
 
         RealmModel realm = context.getRealm();
         UserModel user = context.getUser();
@@ -216,30 +218,59 @@ public RequiredActionProvider create(KeycloakSession session) {
 
     @Override
     public void init(Config.Scope config) {
-        this.config = new VerifyEmailCodeActionConfig(config);
+        // this.config = new VerifyEmailCodeActionConfig(config);
     }
 
     @Override
     public void postInit(KeycloakSessionFactory factory) {
 
     }
 
+    @Override
+    public List<ProviderConfigProperty> getConfigMetadata() {
+
+        List<ProviderConfigProperty> configProperties = ProviderConfigurationBuilder.create() //
+                .property() //
+                .name("code-length") //
+                .label("Code Length") //
+                .required(true) //
+                .defaultValue(8) //
+                .helpText("Length of email code") //
+                .type(ProviderConfigProperty.INTEGER_TYPE) //
+                .add() //
+                .property() //
+                .name("code-pattern") //
+                .label("Code Pattern String") //
+                .required(true) //
+                .defaultValue("\\d{4}-\\d{4}") //
+                .helpText("Format pattern to render the email code. Use \\d as a placeholder for a digit") //
+                .type(ProviderConfigProperty.STRING_TYPE) //
+                .add() //
+                .property() //
+                .name("try-auto-submit") //
+                .label("Try auto submit") //
+                .required(true) //
+                .defaultValue(false) //
+                .helpText("Submits the form if the input is complete") //
+                .type(ProviderConfigProperty.BOOLEAN_TYPE) //
+                .add() //
+                .build();
+        return configProperties;
+    }
+
     @Data
     public static class VerifyEmailCodeActionConfig {
 
         private int codeLength;
 
-        private int codeLengthUi;
-
         private String codePattern;
 
         private boolean tryAutoSubmit;
 
-        public VerifyEmailCodeActionConfig(Config.Scope config) {
-            this.codeLength = config.getInt("code-length", 8);
-            this.codePattern = config.get("code-pattern", "\\d{4}-\\d{4}");
-            this.codeLengthUi = config.getInt("code-length-ui", 8 + 1); //+1 for "-"
-            this.tryAutoSubmit = config.getBoolean("try-auto-submit", false);
+        public VerifyEmailCodeActionConfig(RequiredActionConfigModel config) {
+            this.codeLength = Integer.parseInt(config.getConfigValue("code-length", "8"));
+            this.codePattern = config.getConfigValue("code-pattern", "\\d{4}-\\d{4}");
+            this.tryAutoSubmit = Boolean.parseBoolean(config.getConfigValue("try-auto-submit", "false"));
         }
     }
 }

keycloak/themes/internal/login/email-code-form.ftl

@@ -6,9 +6,9 @@
         ${msg('emailCodeFormTitle')}
     <#elseif section = "form">
         <script>
-            function tryCompleteForm(codeLength) {
-                let code = document.querySelector("#emailCode").value;
-                if (code.length === codeLength) {
+            function tryCompleteForm() {
+                let emailCodeInput = document.querySelector("#emailCode");
+                if (emailCodeInput.validity.valid) {
                     document.querySelector("#kc-email-code-login-form").submit();
                 }
             }
@@ -20,7 +20,7 @@
                     <div class="${properties.kcInputWrapperClass!}">
                         <label for="emailCode">${msg('accessCode')}:</label>
                         <input id="emailCode" name="emailCode" type="text" inputmode="numeric" pattern="${codePattern}" autofocus
-                               class="${properties.kcInputClass!}" <#if tryAutoSubmit> oninput="tryCompleteForm(${codeLength})" </#if>
+                               class="${properties.kcInputClass!}" <#if tryAutoSubmit> oninput="tryCompleteForm()" </#if>
                                required autocomplete="one-time-code"/>
                     </div>
                 </div>