Skip to content

Cognito - Hosted UI (classic) - Not able to add custom text.

0

We are currently using the Cognito Classic Hosted UI for our authentication flow. Our business requirements strictly require adding a custom footer (specifically for copyright information and legal links) at the bottom of the login and sign-up forms. Since the current 'UI Customization' settings only allow for logo uploads and specific CSS property modifications, we have the following questions: Is there a supported way to inject plaintext or HTML-based links into the footer area of the Classic Hosted UI? CSS Workaround: Can we use the ::after or ::before pseudo-elements in the uploaded custom CSS file to display static text (e.g., .footer-content::after { content: "© 2024 Company Name"; })?

I saw this from a previous qustion https://repost.aws/questions/QUet8a4W6QRISAsgQkIjuODw/cognito-managed-login-new-add-text-to-footer#:~:text=If%20adding%20custom,more%20customization%20options.

  • If my answer helped solve your problem, I would appreciate it if you click on “accepted answer”

asked 2 months ago89 views
1 Answer
2

A technical reason why the ::after { content: "..."; } CSS hack fails is CSS Sanitization. When you upload a custom CSS file to Cognito, the service runs a validation and sanitization script. AWS strictly filters the CSS and removes any properties that are not on their explicit "allow-list."

The content property, along with most selectors for pseudo-elements, is stripped out for security reasons and to maintain UI integrity. Therefore, even if your CSS file is accepted during the upload process, the text will simply not render in the frontend.

Bottom Line: Since the Classic Hosted UI has reached its technical limit, you have two options:

Option 1 - Upgrade to Cognito "Managed Login" (Recommended): AWS has introduced a newer version of the Hosted UI (Managed Login). While it still doesn't allow raw HTML injection, it has built-in support for Terms of Service and Privacy Policy links. You configure these URLs at the App Client level, and Cognito will automatically render them as clickable links in the footer. This is the "low-code" path to meeting legal requirements.

Option 2 - Custom UI: If you need specific plaintext (like a custom copyright year) or a very specific layout that even Managed Login doesn't provide, then building a custom UI via Amplify/SDK is indeed the only way.

EXPERT
answered 2 months ago
EXPERT
reviewed 2 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.