Skip to content

Commit 37e4568

Browse files
committed
feat(infra): style Cognito hosted login UI in Observatory palette
Adds aws_cognito_user_pool_ui_customization with CSS that swings the hosted login page from stock white to the dark ink + ember-accent palette the rest of the app uses, so the redirect from / to the Cognito login no longer breaks the visual flow. Security: zero boundary change. - AWS still owns the password input, form action, MFA, brute-force protection, OIDC/PKCE, token issuance, and session security - Cognito accepts only a whitelisted set of CSS selectors and properties and validates the string server-side — the CSS cannot inject scripts, hide the password field, change the form target, or capture credentials - No frontend code changes — the redirect target /oauth2/start is untouched Apply with the next ./deploy.sh; the next time you hit /oauth2/start the Cognito form will render in dark Observatory styling. To revert, remove the resource and Cognito reverts to defaults on next apply.
1 parent f20874e commit 37e4568

1 file changed

Lines changed: 106 additions & 0 deletions

File tree

infra/platform/cognito.tf

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,3 +130,109 @@ resource "aws_secretsmanager_secret_version" "oauth2_proxy" {
130130
cookieSecret = base64encode(random_password.oauth2_proxy_cookie_secret.result)
131131
})
132132
}
133+
134+
#------------------------------------------------------------------------------
135+
# Cognito Hosted UI customization
136+
#
137+
# Paint-job only. AWS still owns the password flow, form layout, MFA,
138+
# brute-force protection, OIDC compliance, and token issuance. We only
139+
# upload a CSS string (Cognito enforces a whitelist of selectors and
140+
# properties) so the hosted login page renders in the Observatory palette
141+
# instead of stock white. No security boundary moved.
142+
#
143+
# The whitelist means this CSS cannot:
144+
# - inject scripts
145+
# - hide or modify the password field
146+
# - change the form action or redirect target
147+
# - capture credentials
148+
# Cognito validates the CSS server-side before serving it.
149+
#------------------------------------------------------------------------------
150+
151+
resource "aws_cognito_user_pool_ui_customization" "main" {
152+
user_pool_id = aws_cognito_user_pool.main.id
153+
client_id = aws_cognito_user_pool_client.main.id
154+
155+
css = <<-CSS
156+
.background-customizable {
157+
background-color: #0c0a08;
158+
background-image: linear-gradient(180deg, #15120e 0%, #0c0a08 100%);
159+
}
160+
.banner-customizable {
161+
background-color: #0c0a08;
162+
padding: 32px 0 16px;
163+
}
164+
.logo-customizable {
165+
max-width: 0;
166+
max-height: 0;
167+
}
168+
.label-customizable {
169+
color: #ece6d8;
170+
font-weight: 500;
171+
letter-spacing: 0.02em;
172+
}
173+
.textDescription-customizable {
174+
color: #a39a87;
175+
}
176+
.idpDescription-customizable {
177+
color: #a39a87;
178+
}
179+
.legalText-customizable {
180+
color: #6f6759;
181+
font-size: 11px;
182+
}
183+
.inputField-customizable {
184+
background-color: #15120e;
185+
color: #ece6d8;
186+
border: 1px solid #2a241d;
187+
border-radius: 2px;
188+
padding: 12px 14px;
189+
}
190+
.inputField-customizable:focus {
191+
border-color: #d97757;
192+
outline: none;
193+
}
194+
.submitButton-customizable {
195+
background-color: #d97757;
196+
color: #0c0a08;
197+
border: 1px solid #d97757;
198+
border-radius: 2px;
199+
font-weight: 600;
200+
letter-spacing: 0.04em;
201+
text-transform: uppercase;
202+
padding: 12px 18px;
203+
}
204+
.submitButton-customizable:hover {
205+
background-color: #c25a36;
206+
border-color: #c25a36;
207+
color: #0c0a08;
208+
}
209+
.errorMessage-customizable {
210+
background-color: #3a1f15;
211+
color: #d97757;
212+
border: 1px solid #a35336;
213+
}
214+
.idpButton-customizable {
215+
background-color: #15120e;
216+
color: #ece6d8;
217+
border: 1px solid #2a241d;
218+
}
219+
.idpButton-customizable:hover {
220+
background-color: #1d1812;
221+
border-color: #a39a87;
222+
}
223+
.socialButton-customizable {
224+
background-color: #15120e;
225+
color: #ece6d8;
226+
border: 1px solid #2a241d;
227+
}
228+
.redirect-customizable {
229+
color: #d97757;
230+
}
231+
.passwordCheck-notValid-customizable {
232+
color: #c4524d;
233+
}
234+
.passwordCheck-valid-customizable {
235+
color: #9bb556;
236+
}
237+
CSS
238+
}

0 commit comments

Comments
 (0)