This repository contains a Cloudflare Worker script that demonstrates advanced customizations of the AWS Cognito hosted UI using Cloudflare Workers and the HTMLRewriter API. It allows developers to apply custom styles, titles, and additional content beyond AWS's standard customization options, without the need to build a custom SSO sign-in UI, reset password, or sign-up pages. This approach saves development time and ensures consistency with your brand’s design, all while enhancing the user experience.
- Custom Favicon: Injects custom favicon links into the
<head>of the HTML response. - Custom Styles: Applies custom styles to the AWS Cognito UI, such as button colors and background colors.
- Custom Page Title: Modifies the page title to provide a more personalized experience.
- Additional Links: Adds a custom link below the sign-in form to redirect users back to the main website.
The Worker listens for incoming requests and checks if they are GET requests with an HTML content type. If the conditions are met, it uses the HTMLRewriter API to modify the HTML response by:
-
Modifying the
<head>element:- Adds custom favicon links.
- Injects custom CSS styles for buttons and background color.
-
Modifying the
<title>element:- Changes the page title to "SSO Sign In - Santiagogarza.co".
-
Modifying the
<form>element:- Adds a link below the form to navigate back to the main website.
To ensure that the Worker is triggered for requests to your Cognito hosted UI, you need to configure the route in your wrangler.toml file to match the subdomain of your hosted UI. For example:
routes = [
{ pattern = "sso.santiagogarza.co/*", zone_name = "santiagogarza.co"}
]This configuration routes all traffic for sso.santiagogarza.co through the Cloudflare Worker, allowing it to intercept and modify the UI as needed.
To deploy this Cloudflare Worker, follow these steps:
-
Install npm packages (if not already installed):
npm install
-
Login to Cloudflare:
npm run login
-
Deploy the Worker:
npm run deploy
This project is licensed under the MIT License. See the LICENSE file for details.
- Santiago Garza - santiagogarza.co
Feel free to customize and extend this Worker as needed to fit your specific requirements!