Skip to content

feat(auth): add environment-driven theming for text fields, CTA buttons and typography - #1402

Open
demolaf wants to merge 8 commits into
mainfrom
auth/theming
Open

demolaf wants to merge 8 commits into
mainfrom
auth/theming

Conversation

@demolaf

@demolaf demolaf commented Sep 25, 2026 •

Copy link
Copy Markdown
Member

Adds environment-driven theming for the SwiftUI auth flow's text fields, CTA buttons and typography. Unset values keep today's exact appearance. First of the PRs splitting up #1400.

Changes

  • Add AuthTextFieldStyle, AuthCTAButtonStyle and AuthTypography, each set with a View modifier and carried through the environment so they reach pushed screens inside the auth sheet.
  • Replace bare .buttonStyle(.borderedProminent) and .font(_:) calls across the auth screens with .authCTAButtonStyle() and .authFont(_:weight:). Brand-styled provider buttons and the Delete Account button are unchanged.
  • Apply AuthTypography to typed text and AuthTextFieldStyle to the verification code boxes, not just AuthTextField.
  • Move MFAResolutionView onto VerificationCodeInputField and the shared button styles, so theming reaches it like the other MFA screens.
  • Re-export FirebaseAuthUIComponents from FirebaseAuthSwiftUI. It is not a library product, so AuthTextFieldStyle and AuthTypography were otherwise unreachable from import FirebaseAuthSwiftUI.

API Usage

AuthPickerView { authenticatedApp }
  .authTypography(AuthTypography(fontName: "AvenirNext-Regular"))
  .authTextFieldStyle(AuthTextFieldStyle(tint: .purple, cornerRadius: 16))
  .authCTAButtonStyle(AuthCTAButtonStyle(backgroundColor: .purple, shape: .capsule))

Preview


Maintainer note: Fixes internal CPRN-515

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request introduces a customizable styling and typography system for the authentication flow, including AuthCTAButtonStyle for primary buttons, AuthTextFieldStyle for text fields, and AuthTypography for custom font families. The feedback highlights three key issues: a double-scaling bug in AuthTypography when resolving custom fonts with Dynamic Type, a regression in AuthCTAButtonModifier where passing a nil background color clears the inherited environment tint, and a visual regression in EmailAuthView where the blue color of the switch-auth-flow action label was accidentally removed.

Comment thread FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Theme/AuthTypography.swift Outdated
@demolaf
demolaf marked this pull request as ready for review September 25, 2026 11:23
- CTA labels fall back to body, not headline, so unthemed buttons keep their weight
- Provider buttons keep the system font; Delete Account stays red under a CTA theme
- Make the no-argument authCTAButtonStyle() and AuthFontModifier internal
- Rename AuthTypography.fontFamily to fontName
- Re-apply the custom font to verification code boxes on update
- Move MFAResolutionView onto VerificationCodeInputField and shared button styles
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant