Additional texts and translations for ACUL

[Jojo.Jose]

Hi,
We are trying to customize the Universal login with ACUL react.

We can get all the existing texts and translations for each screen and wanted to know if we can add additional record to that from auth0.

[nik.baleca]

Hi @Jojo.Jose

Unfortunately, you are not able to add additional records, custom texts or keys for a screen.

The Auth0 backend enforces a strict schema for its translation dictionaries. While you can customize the text for any existing key using the Custom Text API, you cannot inject net-new keys into the payload itself.

Since you are building a custom React application with ACUL, you actually have full control over the UI, which opens up a much more standard approach in the frontend. The recommended architecture is to bundle your custom strings directly within your React application using a standard localization library (like react-intl , react-i18next , or even a simple JSON dictionary map).

Here is an example of how you would merge Auth0’s native text with your own custom translation dictionary:

import React from 'react';
import { useScreen } from '@auth0/auth0-acul-react';

const myCustomTranslations = {
  en: {
    customFooter: "Need help? Call our support team.",
    promoBanner: "Sign up today!"
  },
  es: {
    customFooter: "¿Necesita ayuda? Llame a soporte.",
    promoBanner: "¡Regístrese hoy para!"
  }
};

export const CustomLoginScreen = () => {
  const { texts, locale } = useScreen();
  
  const customText = myCustomTranslations[locale] || myCustomTranslations['en'];

  return (
    <div>
      <h1>{texts.title}</h1>
      
      {LOGIN_COMPONENTS}

      <div className="promo-banner">
        {customText.promoBanner}
      </div>
      
      <footer>
        {customText.customFooter}
      </footer>
    </div>
  );
};

If you have any other questions, let me know!

Kind Regards,
Nik