Rich Text Elements cause viewing Forms in console to crash

[msinstil]

Checklist

• I have looked into the README and have not found a suitable solution or answer.
• I have looked into the documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have upgraded to the latest version of this provider and the issue still persists.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

Given the form below with rich text:

resource "auth0_form" "example_form" {
  name = "Example Form"

  start = jsonencode({
    coordinates = {
      x = 0
      y = 0
    }
    next_node = "step_ggeX"
  })
  nodes = jsonencode([{
    alias = "New step"
    config = {
      components = [
         {
            id= "rich_text_L6fH"
            type= "RICH_TEXT"
            config= {
              content= "<p style=\"text-align=center;\"><strong>Error</strong></p><p style=\"text-align=center;\">{{vars.error_message}}</p>"
            }
            category = "BLOCK"
          },
        {
        category = "FIELD"
        config = {
          max_length = 50
          min_length = 1
          multiline  = false
        }
        id        = "full_name"
        label     = "Your Name"
        required  = true
        sensitive = false
        type      = "TEXT"
        }, {
        category = "BLOCK"
        config = {
          text = "Continue"
        }
        id   = "next_button_3FbA"
        type = "NEXT_BUTTON"
      }]
      next_node = "$ending"
    }
    coordinates = {
      x = 500
      y = 0
    }
    id   = "step_ggeX"
    type = "STEP"
  }])
  ending = jsonencode({
    coordinates = {
      x = 1250
      y = 0
    }
    resume_flow = true
  })

  style = jsonencode({
    css = "h1 {\n  color: white;\n  text-align: center;\n}"
  })

  translations = jsonencode({
    es = {
      components = {
        rich_text_uctu = {
          config = {
            content = "<h2>Help us verify your personal information</h2><p>We want to learn more about you so that we can validate and protect your account...</p>"
          }
        }
      }
      messages = {
        custom = {}
        errors = {
          ERR_ACCEPTANCE_REQUIRED = "Por favor, marca este campo para continuar."
        }
      }
    }
  })

  languages {
    default = "en"
    primary = "en"
  }
}

When deployed with terraform, it throws the following error when seen in forms console:

The error is currently only observed when deploying Rich Text component in Auth0 Form, but may exist with other components that I have not tested.

Expectation

I should be able to see and edit/play around with the form deployed using Terraform in the Forms Console in Auth0 Management Platform.

Reproduction

1. Deploy a Form with Rich Text widget with auth0 Terraform provider
2. Try to access the form in the Auth0 Management Platform
3. And see the error when it tries to load the form.

Auth0 Terraform Provider version

1.7.1

Terraform version

1.9.5

[emmamoinat]

+1

[kushalshit27]

Hi, @msinstil and @emmapatterson,
Thanks for creating this issue. We are looking into it and will resolve it as soon as possible.

[GDownes]

+1

[kushalshit27]

Please check the resources:

<p style=\"text-align=center;\"><strong>Error</strong></p><p style=\"text-align=center;\">{{vars.error_message}}</p>

Should be

<p style=\"text-align:center;\"><strong>Error</strong></p><p style=\"text-align:center;\">{{vars.error_message}}</p>

📌 Note: We replaced = with : on the text-align

We will improve when loading the front end. I would appreciate you test this out and if problem still persists, we can re-evaluate.

[msinstil]

Please check the resources:

<p style=\"text-align=center;\"><strong>Error</strong></p><p style=\"text-align=center;\">{{vars.error_message}}</p>

Should be

<p style=\"text-align:center;\"><strong>Error</strong></p><p style=\"text-align:center;\">{{vars.error_message}}</p>

📌 Note: We replaced = with : on the text-align

We will improve when loading the front end. I would appreciate you test this out and if problem still persists, we can re-evaluate.

Thanks a lot @kushalshit27 for looking into this.

Can confirm this resolves the issue. Thank you 😊

[kushalshit27]

I’ll close it now, but feel free to reopen it if you have more details later.
Thanks