refactor: UI tweaks

FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Services/AuthService.swift

@@ -83,6 +83,44 @@ public final class AuthService {
   public var authenticationFlow: AuthenticationFlow = .login
   public var errorMessage = ""
   public let passwordPrompt: PasswordPromptCoordinator = .init()
+
+  // MARK: - AuthPickerView Modal APIs
+
+  public var isShowingAuthModal = false
+
+  public enum AuthModalContentType {
+    case phoneAuth
+  }
+
+  public var currentModal: AuthModalContentType?
+
+  public var authModalViewBuilderRegistry: [AuthModalContentType: () -> AnyView] = [:]
+
+  public func registerModalView(for type: AuthModalContentType, builder: @escaping () -> AnyView) {
+    authModalViewBuilderRegistry[type] = builder
+  }
+
+  public func viewForCurrentModal() -> AnyView? {
+    guard let type = currentModal,
+          let builder = authModalViewBuilderRegistry[type] else {
+      return nil
+    }
+    return builder()
+  }
+
+  public func presentModal(for type: AuthModalContentType) {
+    currentModal = type
+    isShowingAuthModal = true
+  }
+
+  public func dismissModal() {
+    isShowingAuthModal = false
+  }
+
+  // MARK: - End AuthPickerView Modal APIs
+
+  // MARK: - Provider APIs
+
   private var unsafeGoogleProvider: (any GoogleProviderAuthUIProtocol)?
   private var unsafeFacebookProvider: (any FacebookProviderAuthUIProtocol)?
   private var unsafePhoneAuthProvider: (any PhoneAuthProviderAuthUIProtocol)?
@@ -146,6 +184,8 @@ public final class AuthService {
     }
   }
 
+  // MARK: - End Provider APIs
+
   private func safeActionCodeSettings() throws -> ActionCodeSettings {
     // email sign-in requires action code settings
     guard let actionCodeSettings = configuration

FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Utils/StringUtils.swift

@@ -271,7 +271,7 @@ public class StringUtils {
   /// found in:
   /// - SignInWithFacebookButton
   public var facebookLoginButtonLabel: String {
-    return localizedString(for: "Continue with Facebook")
+    return localizedString(for: "Sign in with Facebook")
   }
 
   /// Facebook provider
@@ -319,8 +319,8 @@ public class StringUtils {
   /// Phone provider
   /// found in:
   /// - PhoneAuthButtonView
-  public var smsCodeSentLabel: String {
-    return localizedString(for: "SMS code sent")
+  public var smsCodeSendButtonLabel: String {
+    return localizedString(for: "Send SMS code")
   }
 
   /// Phone provider

FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthPickerView.swift

@@ -11,51 +11,91 @@ public struct AuthPickerView {
     authService.authenticationFlow = authService
       .authenticationFlow == .login ? .signUp : .login
   }
+
+  private var isAuthModalPresented: Binding<Bool> {
+    Binding(
+      get: { authService.isShowingAuthModal },
+      set: { authService.isShowingAuthModal = $0 }
+    )
+  }
 }
 
 extension AuthPickerView: View {
   public var body: some View {
-    VStack {
-      Text(authService.string.authPickerTitle)
-        .font(.largeTitle)
-        .fontWeight(.bold)
-        .padding()
-      if authService.authenticationState == .authenticated {
-        SignedInView()
-      } else if authService.authView == .passwordRecovery {
-        PasswordRecoveryView()
-      } else if authService.authView == .emailLink {
-        EmailLinkView()
-      } else {
-        if authService.emailSignInEnabled {
-          Text(authService.authenticationFlow == .login ? authService.string
-            .emailLoginFlowLabel : authService.string.emailSignUpFlowLabel)
+    ScrollView {
+      VStack {
+        Text(authService.string.authPickerTitle)
+          .font(.largeTitle)
+          .fontWeight(.bold)
+          .padding()
+        if authService.authenticationState == .authenticated {
+          SignedInView()
+        } else if authService.authView == .passwordRecovery {
+          PasswordRecoveryView()
+        } else if authService.authView == .emailLink {
           Divider()
-          EmailAuthView()
-        }
-        VStack {
-          authService.renderButtons()
-        }.padding(.horizontal)
-        if authService.emailSignInEnabled {
+          EmailLinkView()
+        } else {
           Divider()
-          HStack {
-            Text(authService
-              .authenticationFlow == .login ? authService.string.dontHaveAnAccountYetLabel :
-              authService.string.alreadyHaveAnAccountLabel)
-            Button(action: {
-              withAnimation {
-                switchFlow()
+          if authService.emailSignInEnabled {
+            Text(authService.authenticationFlow == .login ? authService.string
+              .emailLoginFlowLabel : authService.string.emailSignUpFlowLabel)
+            Divider()
+
+            EmailAuthView()
+          }
+          VStack {
+            authService.renderButtons()
+          }.padding(.horizontal)
+
+          VStack { Divider() }
+          if authService.emailSignInEnabled {
+            HStack {
+              Text(authService
+                .authenticationFlow == .login ? authService.string.dontHaveAnAccountYetLabel :
+                authService.string.alreadyHaveAnAccountLabel)
+              Button(action: {
+                withAnimation {
+                  switchFlow()
+                }
+              }) {
+                Text(authService.authenticationFlow == .signUp ? authService.string
+                  .emailLoginFlowLabel : authService.string.emailSignUpFlowLabel)
+                  .fontWeight(.semibold)
+                  .foregroundColor(.blue)
               }
-            }) {
-              Text(authService.authenticationFlow == .signUp ? authService.string
-                .emailLoginFlowLabel : authService.string.emailSignUpFlowLabel)
-                .fontWeight(.semibold)
-                .foregroundColor(.blue)
             }
           }
           PrivacyTOCsView(displayMode: .footer)
           Text(authService.errorMessage).foregroundColor(.red)
         }
+      }.sheet(isPresented: isAuthModalPresented) {
+        VStack(spacing: 0) {
+          HStack {
+            Button(action: {
+              authService.dismissModal()
+            }) {
+              HStack(spacing: 4) {
+                Image(systemName: "chevron.left")
+                  .font(.system(size: 17, weight: .medium))
+                Text(authService.string.backButtonLabel)
+                  .font(.system(size: 17))
+              }
+              .foregroundColor(.blue)
+            }
+            Spacer()
+          }
+          .padding()
+          .background(Color(.systemBackground))
+
+          Divider()
+
+          if let view = authService.viewForCurrentModal() {
+            view
+              .frame(maxWidth: .infinity, maxHeight: .infinity)
+              .padding()
+          }
+        }
       }
     }
   }

FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailAuthView.swift

@@ -123,7 +123,7 @@ extension EmailAuthView: View {
         }
       }
       .disabled(!isValid)
-      .padding([.top, .bottom], 8)
+      .padding([.top, .bottom, .horizontal], 8)
       .frame(maxWidth: .infinity)
       .buttonStyle(.borderedProminent)
       Button(action: {

FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PasswordRecoveryView.swift

@@ -69,7 +69,7 @@ extension PasswordRecoveryView: View {
       }
       .padding()
     }.onOpenURL { _ in
-      // move the user to email/password View
+      // TODO: - move the user to email/password View
     }
     .navigationBarItems(leading: Button(action: {
       authService.authView = .authPicker

FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/VerifyEmailView.swift

@@ -25,7 +25,7 @@ extension VerifyEmailView: View {
           .padding(.vertical, 8)
           .frame(maxWidth: .infinity)
       }
-      .padding([.top, .bottom], 8)
+      .padding([.top, .bottom, .horizontal], 8)
       .frame(maxWidth: .infinity)
       .buttonStyle(.borderedProminent)
     }.sheet(isPresented: $showModal) {

FirebaseSwiftUI/FirebasePhoneAuthSwiftUI/Sources/Views/PhoneAuthButtonView.swift

@@ -5,90 +5,25 @@ import SwiftUI
 @MainActor
 public struct PhoneAuthButtonView {
   @Environment(AuthService.self) private var authService
-  @State private var errorMessage = ""
-  @State private var phoneNumber = ""
-  @State private var showVerificationCodeInput = false
-  @State private var verificationCode = ""
-  @State private var verificationID = ""
 
   public init() {}
 }
 
 extension PhoneAuthButtonView: View {
   public var body: some View {
-    if authService.authenticationState != .authenticating {
-      VStack {
-        LabeledContent {
-          TextField(authService.string.enterPhoneNumberLabel, text: $phoneNumber)
-            .textInputAutocapitalization(.never)
-            .disableAutocorrection(true)
-            .submitLabel(.next)
-        } label: {
-          Image(systemName: "at")
-        }.padding(.vertical, 6)
-          .background(Divider(), alignment: .bottom)
-          .padding(.bottom, 4)
-        Button(action: {
-          Task {
-            do {
-              let id = try await authService.verifyPhoneNumber(phoneNumber: phoneNumber)
-              verificationID = id
-              showVerificationCodeInput = true
-            } catch {
-              errorMessage = authService.string.localizedErrorMessage(
-                for: error
-              )
-            }
-          }
-        }) {
-          Text(authService.string.smsCodeSentLabel)
-            .padding(.vertical, 8)
-            .frame(maxWidth: .infinity)
-        }
-        .disabled(!PhoneUtils.isValidPhoneNumber(phoneNumber))
-        .padding([.top, .bottom], 8)
-        .frame(maxWidth: .infinity)
-        .buttonStyle(.borderedProminent)
-        Text(errorMessage).foregroundColor(.red)
-      }.sheet(isPresented: $showVerificationCodeInput) {
-        TextField(authService.string.phoneNumberVerificationCodeLabel, text: $verificationCode)
-          .keyboardType(.numberPad)
-          .padding()
-          .background(Color(.systemGray6))
-          .cornerRadius(8)
-          .padding(.horizontal)
-
-        Button(action: {
-          Task {
-            do {
-              try await authService.signInWithPhoneNumber(
-                verificationID: verificationID,
-                verificationCode: verificationCode
-              )
-            } catch {
-              errorMessage = authService.string.localizedErrorMessage(for: error)
-            }
-            showVerificationCodeInput = false
-          }
-        }) {
-          Text(authService.string.verifyPhoneNumberAndSignInLabel)
-            .foregroundColor(.white)
-            .padding()
-            .frame(maxWidth: .infinity)
-            .background(Color.green)
-            .cornerRadius(8)
-            .padding(.horizontal)
-        }
-      }.onOpenURL { url in
-        authService.auth.canHandle(url)
+    Button(action: {
+      authService.registerModalView(for: .phoneAuth) {
+        AnyView(PhoneAuthView().environment(authService))
       }
-    } else {
-      ProgressView()
-        .progressViewStyle(CircularProgressViewStyle(tint: .white))
-        .padding(.vertical, 8)
-        .frame(maxWidth: .infinity)
+      authService.presentModal(for: .phoneAuth)
+    }) {
+      Label("Sign in with Phone", systemImage: "phone.fill")
+        .foregroundColor(.white)
+        .padding()
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .background(Color.green.opacity(0.8)) // Light green
+        .cornerRadius(8)
     }
-    Text(errorMessage).foregroundColor(.red)
   }
 }