wip: Auth picker view picker content

[demolaf]

  private let tint = Color.orange
  private let background = Color(red: 42 / 255, green: 1 / 255, blue: 52 / 255)
  private let container = Color(.secondarySystemBackground)
  private let secondary = Color.gray
  private let error = Color.red

  var body: some View {
    AuthPickerView {
      authenticatedApp
    }
    .pickerContent {
      AuthPickerContentView { providers, onProviderSelected in
        SpotlightMethodPicker(providers: providers, onProviderSelected: onProviderSelected)
      }
      .tint(tint)
      .background(background)
    }
    .pickerDestination { screen in
      AuthPickerDestinationView(screen: screen)
        .tint(tint)
        .background(background)
    }
    .authTextFieldStyle(
      AuthTextFieldStyle(
        tint: tint,
        containerColor: container,
        secondaryColor: secondary,
        errorColor: error
      )
    )
    .authTypography(
      AuthTypography(fontFamily: "AmericanTypewriter")
    )
    .authCTAButtonStyle(
      AuthCTAButtonStyle(backgroundColor: tint, contentColor: .white, shape: .capsule)
    )
  }

Preview

[gemini-code-assist]

Code Review

This pull request introduces extensive customization capabilities for the Firebase SwiftUI Auth UI components, including custom styling for CTA buttons, text fields, typography, and customizable picker content/destinations. The review feedback highlights critical compilation errors in AuthTextField.swift and VerificationCodeInputField.swift due to calling .strikethrough on a custom view modifier instead of directly on Text. Additionally, it points out visual inconsistencies where custom fonts are applied to placeholders but not to the typed text of SecureField and TextField components.

[gemini-code-assist]

This will cause a compilation error. .authFont(.caption) returns some View (since it is a custom view modifier), but .strikethrough is a modifier exclusive to Text. Calling .strikethrough on some View is not allowed. To fix this, apply .strikethrough directly to the Text view before applying .authFont.

Suggested change

	Text(validator.message)
	.font(.caption)
	.strikethrough(isValid, color: .gray)
	.foregroundStyle(isValid ? .gray : .red)
	.authFont(.caption)
	.strikethrough(isValid, color: style.secondaryColor ?? .gray)
	.foregroundStyle(isValid ? (style.secondaryColor ?? .gray) : (style.errorColor ?? .red))
	.fixedSize(horizontal: false, vertical: true)
	Text(validator.message)
	.strikethrough(isValid, color: style.secondaryColor ?? .gray)
	.authFont(.caption)
	.foregroundStyle(isValid ? (style.secondaryColor ?? .gray) : (style.errorColor ?? .red))
	.fixedSize(horizontal: false, vertical: true)

[gemini-code-assist]

This will cause a compilation error. .authFont(.caption) returns some View (since it is a custom view modifier), but .strikethrough is a modifier exclusive to Text. Calling .strikethrough on some View is not allowed. To fix this, apply .strikethrough directly to the Text view before applying .authFont.

Suggested change

	Text(validator.message)
	.font(.caption)
	.authFont(.caption)
	.strikethrough(isValid, color: .gray)
	.foregroundStyle(isValid ? .gray : .red)
	.fixedSize(horizontal: false, vertical: true)
	Text(validator.message)
	.strikethrough(isValid, color: .gray)
	.authFont(.caption)
	.foregroundStyle(isValid ? .gray : .red)
	.fixedSize(horizontal: false, vertical: true)

[gemini-code-assist]

The custom font is explicitly applied to the placeholder (prompt) but not to the typed text of the SecureField and TextField themselves. This causes a visual inconsistency where the placeholder uses the custom font, but the user's typed input falls back to the system font. Applying .authFont(.body) directly to the text fields will style both the typed text and the placeholder consistently, allowing you to simplify the prompt parameter.

              SecureField(label, text: $text, prompt: Text(prompt))
                .authFont(.body)
                .opacity(obscured ? 1 : 0)
                .focused($isFocused)
                .frame(height: 24)
              TextField(label, text: $text, prompt: Text(prompt))
                .authFont(.body)
                .opacity(obscured ? 0 : 1)
                .focused($isFocused)
                .frame(height: 24)

[gemini-code-assist]

The custom font is explicitly applied to the placeholder (prompt) but not to the typed text of the TextField itself. Applying .authFont(.body) directly to the TextField will style both the typed text and the placeholder consistently, allowing you to simplify the prompt parameter.

            TextField(
              label,
              text: $text,
              prompt: Text(prompt)
            )
            .authFont(.body)
            .frame(height: 24)