WGAC Compliancy

Get Help
,
1

Hi,
In our company we have two tenants. One for Dev/Stage.
One for production.

But the UI shows different behaviour. On Stage the custom texts are diplayed when inputs are validated, but on prod the default validation from the browser is used.

I see in dev tools that there are different css files referenced:

Stage
https://cdn.auth0.com/ulp/react-components/1.219.2/css/main_wcag_compliant.cdn.min.css

Prod:

https://cdn.auth0.com/ulp/react-components/1.219.2/css/main.cdn.min.css

3

Hi @Alois.Goeth

Your Stage and Production tenants are loading different CSS files for Universal Login: Stage loads main_wcag_compliant.cdn.min.css and displays custom validation messages, while Production loads main.cdn.min.css and displays browser default validation. This difference in CSS files is causing the different validation behavior between the two environments.

The WCAG-compliant CSS file includes styling that suppresses browser default validation messages and enables custom validation text display. The standard CSS file does not include this styling, which allows browser default HTML5 validation to appear instead. To fix this, you need to ensure both tenants are configured to use the same CSS file or have matching Universal Login settings.

Root Cause:

Auth0 serves different CSS files based on your Universal Login configuration. The main_wcag_compliant.cdn.min.css file is designed to meet Web Content Accessibility Guidelines (WCAG) standards and includes CSS rules that:

  1. Hide or suppress browser default validation popups
  2. Enable custom validation message styling through Auth0's form components
  3. Provide accessible form validation feedback

The main.cdn.min.css file does not include these CSS rules, so browser default HTML5 validation (the native browser popup) takes precedence.

Solution: Align Universal Login Configuration Between Tenants

Step 1: Check Your Universal Login Experience Setting

  1. Navigate to Auth0 Dashboard → Universal Login → Experience
  2. Note which experience is selected:
    • New Universal Login — Uses the modern React-based components
    • Classic — Uses the older Lock widget
  3. Verify this setting is the SAME in both Stage and Production

If they differ, this is likely the cause of the CSS file difference.

Step 2: Enable WCAG Compliance in Production (Recommended)

If your Stage tenant is using the WCAG-compliant CSS and you want Production to match:

  1. Navigate to Auth0 Dashboard → Universal Login → Branding
  2. Look for an accessibility or WCAG compliance setting (if available in your plan)
  3. Enable it to match your Stage configuration
  4. Save the settings

Step 3: Verify Custom Validation Text Configuration

Ensure both tenants have the same custom validation messages configured:

  1. Navigate to Auth0 Dashboard → Universal Login → Login (or Signup)
  2. Check if "Customize login page" is enabled
  3. If enabled, verify the custom HTML/CSS is identical in both tenants
  4. If not enabled, ensure both tenants use the default New Universal Login

Step 4: Check for Tenant-Level Feature Flags

Some Auth0 plans or configurations may have feature flags that control which CSS file is served. Contact Auth0 Support to verify:

  • Whether your Stage tenant has a feature flag enabled that Production does not
  • Whether both tenants are on the same Auth0 plan (different plans may have different CSS files)
  • Whether there are any tenant-level settings that control CSS file selection

Step 5: Force Consistency by Updating Both Tenants

If you want Production to use the WCAG-compliant CSS:

  1. Export your Stage tenant configuration (if using Infrastructure as Code like a0deploy)
  2. Apply the same configuration to Production
  3. Test that Production now loads main_wcag_compliant.cdn.min.css

Workaround: Add Custom CSS to Production

If you cannot change the CSS file being served, you can add custom CSS to suppress browser validation in Production:

  1. Navigate to Auth0 Dashboard → Universal Login → Login
  2. Enable "Customize login page"
  3. Add this CSS to your custom HTML:
<style>
  /* Suppress browser default validation popups */
  input:invalid {
    box-shadow: none;
  }
  
  input:required:invalid:focus {
    outline: none;
  }
  
  /* Hide browser validation messages */
  input:invalid::placeholder {
    color: inherit;
  }
</style>

This will hide the browser default validation and allow Auth0's custom validation messages to display.

This difference in CSS files is a configuration issue between your two tenants. Aligning the Universal Login settings and ensuring both tenants use the same CSS file will resolve the validation message display inconsistency.

Kind Regards,
Nik

4

@nik.baleca
Thanks for your help.
We seem to have a mismatch between our Stage and Production environment.
There is a setting in the “Advanced” Tab of the tenatn settings, which i can fing in prod but not in stage.

image
image552×178 13.6 KB

Activating that toggle solved my problem.