diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Exports.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Exports.swift new file mode 100644 index 00000000000..fdc5d9c91e9 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Exports.swift @@ -0,0 +1,17 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +// FirebaseAuthUIComponents is not a library product, so re-export it to make +// AuthTextFieldStyle and AuthTypography reachable from `import FirebaseAuthSwiftUI`. +@_exported import FirebaseAuthUIComponents diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Services/AuthService.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Services/AuthService.swift index 2145b6733e7..2bd86e1605e 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Services/AuthService.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Services/AuthService.swift @@ -33,6 +33,24 @@ public protocol AuthProviderUI { var provider: AuthProviderSwift { get } } +/// Lets ``AuthService/triggerSignIn(for:)`` start sign-in for a provider whose flow doesn't +/// produce a credential, such as phone or a custom flow that presents its own screens. +/// +/// Adopt it on a custom provider so a custom method picker layout can start its sign-in through +/// ``AuthMethodPickerState/select``. Otherwise, start sign-in from the provider's own button. +/// +/// Example: +/// ```swift +/// extension MyProviderAuthUI: AuthProviderAction { +/// func triggerAction() async throws { +/// try await startMySignInFlow() +/// } +/// } +/// ``` +public protocol AuthProviderAction: AuthProviderUI { + @MainActor func triggerAction() async throws +} + public enum AuthenticationState { case unauthenticated case authenticating @@ -184,6 +202,40 @@ public final class AuthService { providers.append(providerWithButton) } + /// The providers registered with ``registerProvider(providerWithButton:)``, in registration + /// order. Email and email-link sign-in aren't included. + public var registeredProviders: [AuthProviderUI] { + providers + } + + /// Starts sign-in with `provider` without rendering its button. + /// + /// ``AuthProviderAction`` providers run ``AuthProviderAction/triggerAction()``, in which case + /// this returns `nil`. Other credential-based providers sign in through ``signIn(_:)``. + /// Any other provider throws ``AuthServiceError/providerAuthenticationFailed(_:)``. + public func triggerSignIn(for provider: AuthProviderUI) async throws -> SignInOutcome? { + if let actionProvider = provider as? AuthProviderAction { + try await actionProvider.triggerAction() + return nil + } + if let credentialProvider = provider.provider as? CredentialAuthProviderSwift { + return try await signIn(credentialProvider) + } + throw AuthServiceError.providerAuthenticationFailed( + "\(provider.displayName) doesn't support starting sign-in programmatically. " + + "Adopt AuthProviderAction on the provider, or start sign-in from its own button." + ) + } + + /// Runs the email-link sign-in action, the same as the stock email-link button. + func selectEmailLink() { + if let callback = emailLinkSignInCallback { + callback() + } else { + navigator.push(.emailLink) + } + } + public func renderButtons(spacing: CGFloat = 16) -> AnyView { AnyView( VStack(spacing: spacing) { @@ -193,11 +245,7 @@ public final class AuthService { style: .email, accessibilityId: "sign-in-with-email-link-button" ) { - if let callback = self.emailLinkSignInCallback { - callback() - } else { - self.navigator.push(.emailLink) - } + self.selectEmailLink() } } ForEach(providers, id: \.id) { provider in diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthCTAButtonModifier.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthCTAButtonModifier.swift new file mode 100644 index 00000000000..ad602136ce7 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthCTAButtonModifier.swift @@ -0,0 +1,134 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// Styling configuration for the primary call-to-action buttons used throughout the auth flow +/// (sign in, send code, update password, etc). All fields default to `nil`, in which case +/// today's exact appearance is unchanged — including `backgroundColor`, which otherwise already +/// follows the environment's `.tint()` via `.buttonStyle(.borderedProminent)`; setting it here +/// overrides that for CTA buttons specifically, without affecting `.tint()` elsewhere. +public struct AuthCTAButtonStyle: Sendable { + public var backgroundColor: Color? + public var contentColor: Color? + public var shape: ButtonBorderShape? + public var font: Font? + + public init(backgroundColor: Color? = nil, + contentColor: Color? = nil, + shape: ButtonBorderShape? = nil, + font: Font? = nil) { + self.backgroundColor = backgroundColor + self.contentColor = contentColor + self.shape = shape + self.font = font + } + + public static let `default` = AuthCTAButtonStyle() +} + +private struct AuthCTAButtonStyleKey: EnvironmentKey { + static let defaultValue: AuthCTAButtonStyle = .default +} + +public extension EnvironmentValues { + var authCTAButtonStyle: AuthCTAButtonStyle { + get { self[AuthCTAButtonStyleKey.self] } + set { self[AuthCTAButtonStyleKey.self] = newValue } + } +} + +/// Applies `.buttonStyle(.borderedProminent)` plus the colors/shape/font from the environment's +/// ``AuthCTAButtonStyle``, in place of a bare `.buttonStyle(.borderedProminent)` call. Unset +/// values leave the inherited shape, tint and font alone. When `style.font` is unset, the label +/// uses ``AuthTypography``'s custom font if one is set. +struct AuthCTAButtonModifier: ViewModifier { + @Environment(\.authCTAButtonStyle) private var style + + func body(content: Content) -> some View { + Group { + if let contentColor = style.contentColor { + content.foregroundStyle(contentColor) + } else { + content + } + } + .buttonStyle(.borderedProminent) + .modifier(CTAShapeModifier(shape: style.shape)) + .modifier(CTATintModifier(tint: style.backgroundColor)) + .modifier(CTAFontModifier(explicitFont: style.font)) + } +} + +// Each modifier below only applies a value when one is set, so an unset style leaves whatever +// the app set higher up (shape, tint, font) in effect, as before theming. + +private struct CTAShapeModifier: ViewModifier { + let shape: ButtonBorderShape? + + func body(content: Content) -> some View { + if let shape { + content.buttonBorderShape(shape) + } else { + content + } + } +} + +private struct CTATintModifier: ViewModifier { + let tint: Color? + + func body(content: Content) -> some View { + if let tint { + content.tint(tint) + } else { + content + } + } +} + +private struct CTAFontModifier: ViewModifier { + let explicitFont: Font? + + func body(content: Content) -> some View { + if let explicitFont { + content.font(explicitFont) + } else { + content.authCustomFont(.body) + } + } +} + +extension View { + /// Applies the auth flow's primary call-to-action button styling, reading colors/shape/font + /// from the environment's ``AuthCTAButtonStyle`` (set via `.authCTAButtonStyle(_:)`). + func authCTAButtonStyle() -> some View { + modifier(AuthCTAButtonModifier()) + } +} + +public extension View { + /// Sets the ``AuthCTAButtonStyle`` used by every CTA button in this view's subtree. + /// + /// ```swift + /// AuthPickerView { ... } + /// .authCTAButtonStyle( + /// AuthCTAButtonStyle(backgroundColor: theme.colors.tint, contentColor: .white, shape: .capsule) + /// ) + /// ``` + func authCTAButtonStyle(_ style: AuthCTAButtonStyle) -> some View { + environment(\.authCTAButtonStyle, style) + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthPickerContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthPickerContent.swift new file mode 100644 index 00000000000..7705768b5ce --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthPickerContent.swift @@ -0,0 +1,205 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuth +import FirebaseAuthUIComponents +import SwiftUI + +/// An ``AuthPickerView`` with custom sheet content, returned by +/// `AuthPickerView`'s `pickerContent`, ``AuthPickerView/pickerDestination(_:)`` and +/// ``AuthPickerView/signedInContent(_:)`` modifiers. +/// +/// It owns the authentication sheet, its `NavigationStack`, error alerts, and MFA and +/// account-conflict handling; only the first screen, the signed-in screen and the pushed screens +/// come from the slots. You don't create it directly. +@MainActor +public struct AuthPickerContent< + Content: View, + PickerContent: View, + DestinationContent: View, + SignedInContent: View +>: View { + init(content: @escaping () -> Content, + pickerContent: @escaping (AuthMethodPickerState) -> PickerContent, + destination: @escaping (AuthView) -> DestinationContent, + signedInContent: @escaping (SignedInContentState) -> SignedInContent, + showsPickerTitle: Bool = true) { + self.content = content + self.pickerContent = pickerContent + self.destination = destination + self.signedInContent = signedInContent + self.showsPickerTitle = showsPickerTitle + } + + @Environment(AuthService.self) private var authService + private let content: () -> Content + private let pickerContent: (AuthMethodPickerState) -> PickerContent + private let destination: (AuthView) -> DestinationContent + private let signedInContent: (SignedInContentState) -> SignedInContent + /// `false` when the whole first screen is custom, so the library's large title doesn't sit + /// above the app's own heading. The close button stays so the sheet can still be dismissed. + private let showsPickerTitle: Bool + + // View-layer error state + @State private var error: AlertError? + + public var body: some View { + @Bindable var authService = authService + content() + .sheet(isPresented: $authService.isPresented) { + @Bindable var navigator = authService.navigator + NavigationStack(path: $navigator.routes) { + root + .navigationTitle( + showsPickerTitle && authService.authenticationState == .unauthenticated + ? authService.string.authPickerTitle : "" + ) + .navigationBarTitleDisplayMode(showsPickerTitle ? .large : .inline) + .toolbar { + toolbar + } + .navigationDestination(for: AuthView.self) { view in + destination(view) + // Pushed screens inherit an `.automatic` title mode from the root. Keep them + // large when the root is inline because a custom first screen hid its title. + .navigationBarTitleDisplayMode(showsPickerTitle ? .automatic : .large) + } + } + .environment(\.reportError, reportError) + .errorAlert( + error: $error, + okButtonLabel: authService.string.okButtonLabel + ) + .sheet(item: $authService.legacySignInRecovery) { _ in + LegacySignInRecoveryView() + .environment(authService) + } + .interactiveDismissDisabled(authService.configuration.interactiveDismissEnabled) + // Apply account conflict handling at NavigationStack level + .accountConflictHandler() + // Apply MFA handling at NavigationStack level + .mfaHandler() + .environment(authService) + } + } + + /// The sheet's first screen: the signed-in slot for signed-in users, otherwise the picker slot. + /// The progress overlay always shows while signing in, whichever slot is on screen. + @ViewBuilder + private var root: some View { + VStack { + if authService.authenticationState == .authenticated { + SignedInScreen(content: signedInContent) + } else { + AuthMethodPickerStateReader { state in + pickerContent(state) + } + } + } + .overlay { + if authService.authenticationState == .authenticating { + VStack(spacing: 24) { + ProgressView() + .scaleEffect(1.25) + .tint(.white) + Text("Authenticating...") + .authCustomFont(.body) + .foregroundStyle(.white) + } + .frame(maxWidth: .infinity, maxHeight: .infinity) + .background(.black.opacity(0.7)) + } + } + } + + /// Replaces the signed-out first screen of the authentication sheet. See + /// the no-argument `pickerContent` on ``AuthPickerView``. + public func pickerContent( + @ViewBuilder _ pickerContent: @escaping () -> NewPickerContent + ) -> AuthPickerContent { + AuthPickerContent( + content: content, + pickerContent: { _ in pickerContent() }, + destination: destination, + signedInContent: signedInContent, + showsPickerTitle: true + ) + } + + /// Replaces the whole signed-out first screen with your own, receiving an + /// ``AuthMethodPickerState``. See the matching `pickerContent` on ``AuthPickerView``. + public func pickerContent( + @ViewBuilder _ pickerContent: @escaping (AuthMethodPickerState) -> NewPickerContent + ) -> AuthPickerContent { + AuthPickerContent( + content: content, + pickerContent: pickerContent, + destination: destination, + signedInContent: signedInContent, + showsPickerTitle: false + ) + } + + /// Replaces the screens pushed inside the authentication sheet. See + /// ``AuthPickerView/pickerDestination(_:)``. + public func pickerDestination( + @ViewBuilder _ destination: @escaping (AuthView) -> NewDestinationContent + ) -> AuthPickerContent { + AuthPickerContent( + content: content, + pickerContent: pickerContent, + destination: destination, + signedInContent: signedInContent, + showsPickerTitle: showsPickerTitle + ) + } + + /// Replaces the signed-in screen of the authentication sheet. See + /// ``AuthPickerView/signedInContent(_:)``. + public func signedInContent( + @ViewBuilder _ signedInContent: @escaping (SignedInContentState) -> NewSignedInContent + ) -> AuthPickerContent { + AuthPickerContent( + content: content, + pickerContent: pickerContent, + destination: destination, + signedInContent: signedInContent, + showsPickerTitle: showsPickerTitle + ) + } + + /// Closure for reporting errors from child views + private func reportError(_ error: Error) { + Task { @MainActor in + self.error = AlertError( + message: authService.string.localizedErrorMessage(for: error), + underlyingError: error + ) + } + } + + @ToolbarContentBuilder + private var toolbar: some ToolbarContent { + ToolbarItem(placement: .topBarTrailing) { + if !authService.configuration.shouldHideCancelButton { + Button { + authService.isPresented = false + } label: { + Image(systemName: "xmark") + .foregroundStyle(Color(UIColor.label)) + } + } + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthPickerView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthPickerView.swift index 8454c79d8b0..c939d56c910 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthPickerView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/AuthPickerView.swift @@ -17,151 +17,159 @@ import FirebaseAuthUIComponents import FirebaseCore import SwiftUI +/// Wraps your app content and presents the authentication sheet whenever +/// `AuthService.isPresented` is `true`. +/// +/// Use the `pickerContent` modifiers, ``pickerDestination(_:)`` and ``signedInContent(_:)`` to +/// replace the sheet's first screen, any pushed screen or the signed-in screen while the library +/// keeps driving navigation, MFA and account conflicts. +/// +/// Example: +/// ```swift +/// AuthPickerView { +/// HomeView() +/// } +/// .environment(authService) +/// ``` @MainActor -public struct AuthPickerView { +public struct AuthPickerView: View { public init(@ViewBuilder content: @escaping () -> Content = { EmptyView() }) { self.content = content } - @Environment(AuthService.self) private var authService private let content: () -> Content - // View-layer error state - @State private var error: AlertError? -} - -extension AuthPickerView: View { public var body: some View { - @Bindable var authService = authService - content() - .sheet(isPresented: $authService.isPresented) { - @Bindable var navigator = authService.navigator - NavigationStack(path: $navigator.routes) { - authPickerViewInternal - .navigationTitle(authService.authenticationState == .unauthenticated ? authService - .string.authPickerTitle : "") - .navigationBarTitleDisplayMode(.large) - .toolbar { - toolbar - } - .navigationDestination(for: AuthView.self) { view in - switch view { - case AuthView.passwordRecovery: - PasswordRecoveryView() - case AuthView.emailLink: - EmailLinkView() - case AuthView.updatePassword: - UpdatePasswordView() - case AuthView.mfaEnrollment: - MFAEnrolmentView() - case AuthView.mfaManagement: - MFAManagementView() - case let .mfaResolution(mfaRequired): - MFAResolutionView(mfaRequired: mfaRequired) - case AuthView.enterPhoneNumber: - EnterPhoneNumberView() - case let .enterVerificationCode(verificationID, fullPhoneNumber): - EnterVerificationCodeView( - verificationID: verificationID, - fullPhoneNumber: fullPhoneNumber - ) - } - } - } - .environment(\.reportError, reportError) - .errorAlert( - error: $error, - okButtonLabel: authService.string.okButtonLabel - ) - .sheet(item: $authService.legacySignInRecovery) { _ in - LegacySignInRecoveryView() - .environment(authService) - } - .interactiveDismissDisabled(authService.configuration.interactiveDismissEnabled) - // Apply account conflict handling at NavigationStack level - .accountConflictHandler() - // Apply MFA handling at NavigationStack level - .mfaHandler() - .environment(authService) - } - } - - /// Closure for reporting errors from child views - private func reportError(_ error: Error) { - Task { @MainActor in - self.error = AlertError( - message: authService.string.localizedErrorMessage(for: error), - underlyingError: error - ) - } + AuthPickerContent( + content: content, + pickerContent: { _ in DefaultAuthPickerContent() }, + destination: { DefaultAuthPickerDestination(screen: $0) }, + signedInContent: { DefaultSignedInContent(state: $0) } + ) } - @ToolbarContentBuilder - var toolbar: some ToolbarContent { - ToolbarItem(placement: .topBarTrailing) { - if !authService.configuration.shouldHideCancelButton { - Button { - authService.isPresented = false - } label: { - Image(systemName: "xmark") - .foregroundStyle(Color(UIColor.label)) - } - } - } + /// Replaces the signed-out first screen of the authentication sheet. Signed-in users still see + /// ``DefaultSignedInContent`` unless you replace it with ``signedInContent(_:)``, and the + /// progress overlay still shows while signing in. + /// + /// ```swift + /// AuthPickerView { authenticatedApp } + /// .pickerContent { + /// DefaultAuthPickerContent() + /// .background(theme.colors.background) + /// } + /// ``` + public func pickerContent( + @ViewBuilder _ pickerContent: @escaping () -> NewPickerContent + ) -> AuthPickerContent< + Content, + NewPickerContent, + DefaultAuthPickerDestination, + DefaultSignedInContent + > { + AuthPickerContent( + content: content, + pickerContent: { _ in pickerContent() }, + destination: { DefaultAuthPickerDestination(screen: $0) }, + signedInContent: { DefaultSignedInContent(state: $0) } + ) } - @ViewBuilder - var authPickerViewInternal: some View { - @Bindable var authService = authService - VStack { - if authService.authenticationState == .authenticated { - SignedInView() - } else { - authMethodPicker - .safeAreaPadding() - } - } - .overlay { - if authService.authenticationState == .authenticating { - VStack(spacing: 24) { - ProgressView() - .scaleEffect(1.25) - .tint(.white) - Text("Authenticating...") - .foregroundStyle(.white) - } - .frame(maxWidth: .infinity, maxHeight: .infinity) - .background(.black.opacity(0.7)) - } - } + /// Replaces the whole signed-out first screen with your own, receiving an + /// ``AuthMethodPickerState`` to sign in with the registered providers. Call its `select` so MFA, + /// account conflicts and errors are handled the same as the default buttons. + /// + /// Your screen replaces the logo, email sign-in, terms and the large "Sign in" title (the close + /// button stays), so show your own heading, email entry (for example ``EmailAuthScreen``) and + /// any legal text you need. To keep the stock screen and only lay out the provider buttons, use + /// ``DefaultAuthPickerContent/init(authMethodPicker:)``. + /// + /// Example: + /// ```swift + /// AuthPickerView { authenticatedApp } + /// .pickerContent { state in + /// MyLandingScreen(state: state) + /// } + /// ``` + public func pickerContent( + @ViewBuilder _ pickerContent: @escaping (AuthMethodPickerState) -> NewPickerContent + ) -> AuthPickerContent< + Content, + NewPickerContent, + DefaultAuthPickerDestination, + DefaultSignedInContent + > { + AuthPickerContent( + content: content, + pickerContent: pickerContent, + destination: { DefaultAuthPickerDestination(screen: $0) }, + signedInContent: { DefaultSignedInContent(state: $0) }, + showsPickerTitle: false + ) } - @ViewBuilder - var authMethodPicker: some View { - GeometryReader { proxy in - ScrollView { - VStack(spacing: 24) { - Image(authService.configuration.logo ?? Assets.firebaseAuthLogo) - .resizable() - .aspectRatio(contentMode: .fit) - .frame(width: 100, height: 100) - if authService.emailPasswordSignInEnabled { - EmailAuthView() - } - Divider() - otherSignInOptions(proxy) - PrivacyTOCsView(displayMode: .full) - } - } - } + /// Replaces the screens pushed inside the authentication sheet. + /// + /// Always end a `switch` over the screen with a `default` branch that returns + /// ``DefaultAuthPickerDestination``. New ``AuthView`` routes may be added in future releases, + /// and the `default` branch keeps them working without a code change. + /// + /// ```swift + /// AuthPickerView { authenticatedApp } + /// .pickerDestination { screen in + /// switch screen { + /// case .enterPhoneNumber: + /// MyPhoneEntry() + /// default: + /// DefaultAuthPickerDestination(screen: screen) + /// } + /// } + /// ``` + public func pickerDestination( + @ViewBuilder _ destination: @escaping (AuthView) -> NewDestinationContent + ) -> AuthPickerContent< + Content, + DefaultAuthPickerContent, + NewDestinationContent, + DefaultSignedInContent + > { + AuthPickerContent( + content: content, + pickerContent: { _ in DefaultAuthPickerContent() }, + destination: destination, + signedInContent: { DefaultSignedInContent(state: $0) } + ) } - @ViewBuilder - func otherSignInOptions(_ proxy: GeometryProxy) -> some View { - VStack { - authService.renderButtons() - } - .padding(.horizontal, proxy.size.width * 0.14) + /// Replaces the screen the authentication sheet shows to signed-in users. Your content receives + /// a ``SignedInContentState``: the library still signs out, deletes the account behind its + /// confirmation and reauthentication, sends the verification email and navigates. Wrap + /// ``DefaultSignedInContent`` to keep the stock markup. + /// + /// ```swift + /// AuthPickerView { authenticatedApp } + /// .signedInContent { state in + /// MyAccountView( + /// email: state.user?.email, + /// onDeleteAccount: state.deleteAccount, + /// onSignOut: state.signOut + /// ) + /// } + /// ``` + public func signedInContent( + @ViewBuilder _ signedInContent: @escaping (SignedInContentState) -> NewSignedInContent + ) -> AuthPickerContent< + Content, + DefaultAuthPickerContent, + DefaultAuthPickerDestination, + NewSignedInContent + > { + AuthPickerContent( + content: content, + pickerContent: { _ in DefaultAuthPickerContent() }, + destination: { DefaultAuthPickerDestination(screen: $0) }, + signedInContent: signedInContent + ) } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultAuthPickerContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultAuthPickerContent.swift new file mode 100644 index 00000000000..cb444ca8582 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultAuthPickerContent.swift @@ -0,0 +1,186 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The default signed-out first screen of the authentication sheet: the logo, email sign-in, +/// the provider buttons and the terms. +/// +/// Return it from `AuthPickerView`'s no-argument `pickerContent` to keep the stock screen while adding +/// modifiers such as a background, or use ``init(authMethodPicker:)`` to lay out the provider +/// buttons yourself. +@MainActor +public struct DefaultAuthPickerContent: View { + public init() where AuthMethodPicker == DefaultAuthMethodPicker { + authMethodPicker = { _ in DefaultAuthMethodPicker() } + } + + /// Creates the default screen with your own layout for the provider buttons. + /// + /// The closure receives an ``AuthMethodPickerState``. Call its `select` to sign in with a + /// provider, so MFA, account conflicts and errors are handled the same as the default buttons. + /// Show an email-link button when `isEmailLinkEnabled` is `true`. + /// + /// Example: + /// ```swift + /// DefaultAuthPickerContent { state in + /// ForEach(state.providers, id: \.id) { provider in + /// Button(provider.displayName) { state.select(provider) } + /// } + /// if state.isEmailLinkEnabled { + /// Button("Email link", action: state.selectEmailLink) + /// } + /// } + /// ``` + public init(@ViewBuilder authMethodPicker: @escaping (AuthMethodPickerState) + -> AuthMethodPicker) { + self.authMethodPicker = authMethodPicker + } + + @Environment(AuthService.self) private var authService + private let authMethodPicker: (AuthMethodPickerState) -> AuthMethodPicker + + public var body: some View { + ScrollView { + VStack(spacing: 24) { + Image(authService.configuration.logo ?? Assets.firebaseAuthLogo) + .resizable() + .aspectRatio(contentMode: .fit) + .frame(width: 100, height: 100) + if authService.emailPasswordSignInEnabled { + EmailAuthView() + } + Divider() + VStack { + AuthMethodPickerStateReader { state in + authMethodPicker(state) + } + } + PrivacyTOCsView(displayMode: .full) + } + } + .safeAreaPadding() + } +} + +/// Builds an ``AuthMethodPickerState`` from the environment and passes it to its content, so +/// provider selection routes MFA, account conflicts and errors through the same handlers as the +/// default buttons. Used by ``DefaultAuthPickerContent`` and ``AuthPickerContent``. +@MainActor +struct AuthMethodPickerStateReader: View { + init(@ViewBuilder content: @escaping (AuthMethodPickerState) -> Content) { + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.mfaHandler) private var mfaHandler + @Environment(\.accountConflictHandler) private var accountConflictHandler + @Environment(\.reportError) private var reportError + private let content: (AuthMethodPickerState) -> Content + + var body: some View { + content(AuthMethodPickerState( + providers: authService.registeredProviders, + select: selectProvider, + isEmailLinkEnabled: authService.emailLinkSignInEnabled, + selectEmailLink: authService.selectEmailLink + )) + } + + private func selectProvider(_ provider: AuthProviderUI) { + Task { + let result: Result + do { + let outcome = try await authService.triggerSignIn(for: provider) + result = .success(outcome) + } catch { + result = .failure(error) + } + AuthMethodPickerState.route( + result, + mfaHandler: mfaHandler, + accountConflictHandler: accountConflictHandler, + reportError: reportError + ) + } + } +} + +/// The providers and sign-in actions passed to a custom first screen in +/// `AuthPickerView.pickerContent { state in ... }`, or to a custom provider layout in +/// ``DefaultAuthPickerContent/init(authMethodPicker:)``. +public struct AuthMethodPickerState { + /// The registered providers, in registration order. Email-link sign-in isn't included; see + /// ``isEmailLinkEnabled``. + public let providers: [AuthProviderUI] + + /// Signs in with a provider from ``providers``. A provider that is neither credential-based + /// nor an ``AuthProviderAction`` reports an error instead. + public let select: @MainActor (AuthProviderUI) -> Void + + /// Whether email-link sign-in is enabled on the ``AuthService``. + public let isEmailLinkEnabled: Bool + + /// Starts email-link sign-in, the same as the stock email-link button. + public let selectEmailLink: @MainActor () -> Void + + /// Creates a state, for example to preview a custom layout with stub actions. + public init(providers: [AuthProviderUI], + select: @escaping @MainActor (AuthProviderUI) -> Void, + isEmailLinkEnabled: Bool, + selectEmailLink: @escaping @MainActor () -> Void) { + self.providers = providers + self.select = select + self.isEmailLinkEnabled = isEmailLinkEnabled + self.selectEmailLink = selectEmailLink + } + + /// Hands a provider sign-in result to the same handlers the default provider buttons use: + /// MFA and account conflicts go to their handlers, and other errors are reported. + @MainActor + static func route(_ result: Result, + mfaHandler: ((MFARequired) -> Void)?, + accountConflictHandler: ((AccountConflictContext) -> Void)?, + reportError: ((Error) -> Void)?) { + switch result { + case let .success(.mfaRequired(mfaInfo)): + mfaHandler?(mfaInfo) + case .success: + break + case let .failure(AuthServiceError.accountConflict(ctx)) where accountConflictHandler != nil: + accountConflictHandler?(ctx) + case let .failure(error): + reportError?(error) + } + } +} + +/// The default provider list on ``DefaultAuthPickerContent``: every registered provider's +/// button, stacked vertically and inset from the screen edges. +/// +/// Its width is 72% of the nearest container, such as the enclosing `ScrollView`, not of its +/// direct parent. +@MainActor +public struct DefaultAuthMethodPicker: View { + public init() {} + + @Environment(AuthService.self) private var authService + + public var body: some View { + authService.renderButtons() + // 72% of the container width, matching a 14% inset on each side. + .containerRelativeFrame(.horizontal) { length, _ in length * 0.72 } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultAuthPickerDestination.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultAuthPickerDestination.swift new file mode 100644 index 00000000000..2d5762c3ca7 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultAuthPickerDestination.swift @@ -0,0 +1,64 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import SwiftUI + +/// The default screen for each route pushed inside the authentication sheet. +/// +/// Return it from ``AuthPickerView/pickerDestination(_:)`` for the routes you don't customize. +/// Keep a `default` branch: new ``AuthView`` routes may be added in future releases. +/// +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerDestination { screen in +/// switch screen { +/// case .enterPhoneNumber: +/// MyPhoneEntry() +/// default: +/// DefaultAuthPickerDestination(screen: screen) +/// } +/// } +/// ``` +@MainActor +public struct DefaultAuthPickerDestination: View { + public init(screen: AuthView) { + self.screen = screen + } + + private let screen: AuthView + + public var body: some View { + switch screen { + case AuthView.passwordRecovery: + PasswordRecoveryView() + case AuthView.emailLink: + EmailLinkView() + case AuthView.updatePassword: + UpdatePasswordView() + case AuthView.mfaEnrollment: + MFAEnrolmentView() + case AuthView.mfaManagement: + MFAManagementView() + case let .mfaResolution(mfaRequired): + MFAResolutionView(mfaRequired: mfaRequired) + case AuthView.enterPhoneNumber: + EnterPhoneNumberView() + case let .enterVerificationCode(verificationID, fullPhoneNumber): + EnterVerificationCodeView( + verificationID: verificationID, + fullPhoneNumber: fullPhoneNumber + ) + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEmailAuthContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEmailAuthContent.swift new file mode 100644 index 00000000000..c6a63a756c7 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEmailAuthContent.swift @@ -0,0 +1,159 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +private enum FocusableField: Hashable { + case email + case password + case confirmPassword +} + +/// The stock content of ``EmailAuthScreen``. +@MainActor +public struct DefaultEmailAuthContent: View { + public init(state: EmailAuthContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + @FocusState private var focus: FocusableField? + private let state: EmailAuthContentState + + public var body: some View { + VStack(spacing: 16) { + AuthTextField( + text: state.email, + label: authService.string.emailFieldLabel, + prompt: authService.string.emailInputLabel, + keyboardType: .emailAddress, + contentType: .emailAddress, + validations: [ + FormValidators.email, + ], + maintainsValidationMessage: state.flow == .signUp, + onSubmit: { _ in + self.focus = .password + }, + leading: { + Image(systemName: "at") + } + ) + .focused($focus, equals: .email) + .accessibilityIdentifier("email-field") + AuthTextField( + text: state.password, + label: authService.string.passwordFieldLabel, + prompt: authService.string.passwordInputLabel, + contentType: .password, + isSecureTextField: true, + validations: state.flow == .signUp ? [ + FormValidators.atLeast6Characters + ] : [], + maintainsValidationMessage: state.flow == .signUp, + onSubmit: { _ in + if state.flow == .signIn { + state.signIn() + } else { + focus = .confirmPassword + } + }, + leading: { + Image(systemName: "lock") + } + ) + .submitLabel(.go) + .focused($focus, equals: .password) + .accessibilityIdentifier("password-field") + if state.flow == .signIn { + Button(action: state.goToPasswordRecovery) { + Text(authService.string.passwordButtonLabel) + .authCustomFont(.body, weight: .medium) + .frame(maxWidth: .infinity, alignment: .trailing) + } + .accessibilityIdentifier("password-recovery-button") + } + + if state.flow == .signUp { + AuthTextField( + text: state.confirmPassword, + label: authService.string.confirmPasswordFieldLabel, + prompt: authService.string.confirmPasswordInputLabel, + contentType: .password, + isSecureTextField: true, + validations: [ + FormValidators.confirmPassword(password: state.password.wrappedValue), + ], + maintainsValidationMessage: true, + onSubmit: { _ in + state.signUp() + }, + leading: { + Image(systemName: "lock") + } + ) + .submitLabel(.go) + .focused($focus, equals: .confirmPassword) + .accessibilityIdentifier("confirm-password-field") + } + + Button { + if state.flow == .signIn { + state.signIn() + } else { + state.signUp() + } + } label: { + if !state.isLoading { + Text( + state.flow == .signIn + ? authService.string.signInWithEmailButtonLabel + : authService.string.signUpWithEmailButtonLabel + ) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } else { + ProgressView() + .progressViewStyle(CircularProgressViewStyle(tint: .white)) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + } + .disabled(!state.isValid) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .authCTAButtonStyle() + .accessibilityIdentifier("sign-in-button") + } + Button(action: state.switchFlow) { + HStack(spacing: 4) { + Text( + state.flow == .signIn + ? authService.string.dontHaveAnAccountYetLabel + : authService.string.alreadyHaveAnAccountLabel + ) + .authCustomFont(.body) + .foregroundStyle(Color(.label)) + Text( + state.flow == .signUp + ? authService.string.emailLoginFlowLabel + : authService.string.emailSignUpFlowLabel + ) + .authCustomFont(.body, weight: .medium) + } + } + .accessibilityIdentifier("switch-auth-flow") + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEmailLinkContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEmailLinkContent.swift new file mode 100644 index 00000000000..6955b65dcd6 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEmailLinkContent.swift @@ -0,0 +1,73 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The stock content of ``EmailLinkScreen``. +@MainActor +public struct DefaultEmailLinkContent: View { + public init(state: EmailLinkContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + private let state: EmailLinkContentState + + public var body: some View { + VStack(spacing: 24) { + AuthTextField( + text: state.email, + label: authService.string.signInLinkEmailFieldLabel, + prompt: authService.string.emailInputLabel, + keyboardType: .emailAddress, + contentType: .emailAddress, + validations: [ + FormValidators.email, + ], + leading: { + Image(systemName: "at") + } + ) + .accessibilityIdentifier("email-link-email-field") + Button(action: state.sendSignInLink) { + Text(authService.string.sendEmailLinkButtonLabel) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .disabled(!state.isValid) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + } + .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) + .navigationTitle(authService.string.signInWithEmailLinkViewTitle) + .safeAreaPadding() + .alert( + authService.string.signInWithEmailLinkViewTitle, + isPresented: Binding( + get: { state.didSend }, + set: { isPresented in + if !isPresented { + state.dismissAlert() + } + } + ) + ) { + Button(authService.string.okButtonLabel) {} + } message: { + Text(authService.string.signInWithEmailLinkViewMessage) + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEnterPhoneNumberContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEnterPhoneNumberContent.swift new file mode 100644 index 00000000000..1b5745afa8f --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEnterPhoneNumberContent.swift @@ -0,0 +1,74 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The stock content of ``EnterPhoneNumberScreen``. +@MainActor +public struct DefaultEnterPhoneNumberContent: View { + public init(state: PhoneNumberContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + private let state: PhoneNumberContentState + + public var body: some View { + VStack(spacing: 16) { + Text(authService.string.enterPhoneNumberPlaceholder) + .authFont(.subheadline) + .foregroundStyle(.secondary) + .multilineTextAlignment(.center) + .frame(maxWidth: .infinity, alignment: .leading) + .padding(.top) + + AuthTextField( + text: state.phoneNumber, + label: authService.string.phoneFieldLabel, + prompt: authService.string.enterPhoneNumberPlaceholder, + keyboardType: .phonePad, + contentType: .telephoneNumber, + validations: [ + FormValidators.phoneNumber, + ], + onChange: { _ in } + ) { + CountrySelector( + selectedCountry: state.selectedCountry, + enabled: !state.isLoading + ) + } + + Button(action: state.sendCode) { + if state.isLoading { + ProgressView() + .frame(height: 32) + .frame(maxWidth: .infinity) + } else { + Text(authService.string.sendCodeButtonLabel) + .frame(height: 32) + .frame(maxWidth: .infinity) + } + } + .authCTAButtonStyle() + .disabled(state.isLoading || !state.isValid) + .padding(.top, 8) + + Spacer() + } + .navigationTitle(authService.string.phoneSignInTitle) + .padding(.horizontal) + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEnterVerificationCodeContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEnterVerificationCodeContent.swift new file mode 100644 index 00000000000..9b724a838d6 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultEnterVerificationCodeContent.swift @@ -0,0 +1,91 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The stock content of ``EnterVerificationCodeScreen``. +@MainActor +public struct DefaultEnterVerificationCodeContent: View { + public init(state: VerificationCodeContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + private let state: VerificationCodeContentState + + public var body: some View { + VStack(spacing: 32) { + VStack(spacing: 16) { + VStack(spacing: 8) { + Text(authService.string.sentCodeMessage(phoneNumber: state.fullPhoneNumber)) + .authFont(.subheadline) + .foregroundStyle(.secondary) + .multilineTextAlignment(.center) + .frame(maxWidth: .infinity, alignment: .leading) + + Button(action: state.changeNumber) { + Text(authService.string.changeNumberButtonLabel) + .authFont(.caption) + .frame(maxWidth: .infinity, alignment: .leading) + } + .disabled(state.isLoading) + } + .padding(.bottom) + .frame(maxWidth: .infinity, alignment: .leading) + + VerificationCodeInputField( + code: state.verificationCode, + validations: [ + FormValidators.verificationCode, + ], + maintainsValidationMessage: true + ) + + Button(action: state.verify) { + if state.isLoading { + ProgressView() + .frame(height: 32) + .frame(maxWidth: .infinity) + } else { + Text(authService.string.verifyAndSignInButtonLabel) + .frame(height: 32) + .frame(maxWidth: .infinity) + } + } + .authCTAButtonStyle() + .disabled(state.isLoading || !state.isValid) + + Button(action: state.resendCode) { + HStack(spacing: 4) { + Text(authService.string.resendCodeLabel) + if state.resendCountdown > 0 { + Text(Duration.seconds(state.resendCountdown), format: .time(pattern: .minuteSecond)) + .monospacedDigit() + } + } + .authCustomFont(.body) + .frame(maxWidth: .infinity) + } + .disabled(state.isLoading || state.resendCountdown > 0) + .accessibilityIdentifier("resend-code-button") + } + + Spacer() + } + .navigationTitle(authService.string.enterVerificationCodeTitle) + .navigationBarTitleDisplayMode(.large) + .padding(.horizontal) + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAEnrolmentContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAEnrolmentContent.swift new file mode 100644 index 00000000000..dd49fbc4033 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAEnrolmentContent.swift @@ -0,0 +1,473 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The stock content of ``MFAEnrolmentScreen``. +@MainActor +public struct DefaultMFAEnrolmentContent: View { + public init(state: MFAEnrollmentContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + @FocusState private var isPhoneNumberFocused: Bool + private let state: MFAEnrollmentContentState + + public var body: some View { + VStack(spacing: 24) { + // Header (only shown when no session is active) + if state.step == .selectFactor { + VStack(spacing: 8) { + Text("Set Up Two-Factor Authentication") + .authFont(.largeTitle) + .fontWeight(.bold) + .multilineTextAlignment(.center) + + Text("Add an extra layer of security to your account") + .authFont(.subheadline) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + } + + // Factor Type Selection (only if no session started) + if state.step == .selectFactor { + if !state.isMFAEnabled { + VStack(spacing: 12) { + Image(systemName: "lock.slash") + .font(.system(size: 40)) + .foregroundColor(.orange) + + Text("Multi-Factor Authentication Disabled") + .authFont(.title2) + .fontWeight(.semibold) + + Text( + "MFA is not enabled in the current configuration. Please contact your administrator." + ) + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + .accessibilityIdentifier("mfa-disabled-message") + } else if state.allowedFactors.isEmpty { + VStack(spacing: 12) { + Image(systemName: "exclamationmark.triangle") + .font(.system(size: 40)) + .foregroundColor(.orange) + + Text("No Authentication Methods Available") + .authFont(.title2) + .fontWeight(.semibold) + + Text("No MFA methods are configured as allowed. Please contact your administrator.") + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + .accessibilityIdentifier("no-factors-message") + } else { + VStack(alignment: .leading, spacing: 12) { + Text("Choose Authentication Method") + .authFont(.headline) + + Picker("Authentication Method", selection: state.selectedFactorType) { + ForEach(state.allowedFactors, id: \.self) { factorType in + switch factorType { + case .sms: + Image(systemName: "message").tag(SecondFactorType.sms) + case .totp: + Image(systemName: "qrcode").tag(SecondFactorType.totp) + } + } + } + .pickerStyle(.segmented) + .accessibilityIdentifier("factor-type-picker") + } + } + } + + // Content based on current state + switch state.step { + case .selectFactor: + initialContent + case .enterPhoneNumber, .enterVerificationCode: + smsEnrollmentContent + case .setUpTOTP: + totpEnrollmentContent + } + } + .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) + .safeAreaPadding() + .navigationTitle("Two-Factor Authentication") + .onChange(of: state.step) { isPhoneNumberFocused = false } + } + + private var initialContent: some View { + VStack(spacing: 24) { + // Description based on selected type + if state.selectedFactorType.wrappedValue == .sms { + VStack(spacing: 8) { + Image(systemName: "message.circle") + .font(.system(size: 40)) + .foregroundColor(.blue) + + Text("SMS Authentication") + .authFont(.title2) + .fontWeight(.semibold) + + Text("We'll send a verification code to your phone number each time you sign in.") + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + } else { + VStack(spacing: 8) { + Image(systemName: "qrcode") + .font(.system(size: 40)) + .foregroundColor(.green) + + Text("Authenticator App") + .authFont(.title2) + .fontWeight(.semibold) + + Text( + "Use an authenticator app like Google Authenticator or Authy to generate verification codes." + ) + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + } + + Button { + state.startEnrollment() + } label: { + HStack { + if state.isLoading { + ProgressView() + .scaleEffect(0.8) + } + Text("Get Started") + } + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .disabled(!state.isValid || state.isLoading) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("start-enrollment-button") + } + } + + private var smsEnrollmentContent: some View { + VStack(spacing: 24) { + // SMS enrollment steps + if state.step == .enterPhoneNumber { + VStack(spacing: 24) { + VStack(spacing: 8) { + Image(systemName: "phone") + .font(.system(size: 48)) + .foregroundColor(.blue) + + Text("Enter Your Phone Number") + .authFont(.title2) + .fontWeight(.semibold) + + Text("We'll send a verification code to this number") + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + + AuthTextField( + text: state.phoneNumber, + label: authService.string.phoneNumberFieldLabel, + prompt: authService.string.enterPhoneNumberPrompt, + keyboardType: .phonePad, + contentType: .telephoneNumber, + validations: [ + FormValidators.phoneNumber, + ], + maintainsValidationMessage: true, + onChange: { _ in } + ) { + CountrySelector( + selectedCountry: state.selectedCountry, + enabled: !state.isLoading + ) + } + .focused($isPhoneNumberFocused) + .accessibilityIdentifier("phone-number-field") + + AuthTextField( + text: state.displayName, + label: authService.string.displayNameFieldLabel, + prompt: authService.string.enterDisplayNameForDevicePrompt, + validations: [ + FormValidators.notEmpty(label: "Display name"), + ], + maintainsValidationMessage: true, + leading: { + Image(systemName: "person") + } + ) + .accessibilityIdentifier("display-name-field") + + Button { + state.sendCode() + } label: { + HStack { + if state.isLoading { + ProgressView() + .scaleEffect(0.8) + } + Text("Send Code") + } + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .disabled(!state.isValid || state.isLoading) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("send-sms-button") + } + } else if state.step == .enterVerificationCode { + VStack(spacing: 24) { + VStack(spacing: 8) { + Image(systemName: "checkmark.message") + .font(.system(size: 48)) + .foregroundColor(.green) + + Text("Enter Verification Code") + .authFont(.title2) + .fontWeight(.semibold) + + Text("We sent a code to \(state.sentPhoneNumber ?? "your phone")") + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + + VerificationCodeInputField( + code: state.verificationCode, + validations: [ + FormValidators.verificationCode, + ], + maintainsValidationMessage: true + ) + .accessibilityIdentifier("verification-code-field") + + Button { + state.enroll() + } label: { + HStack { + if state.isLoading { + ProgressView() + .scaleEffect(0.8) + } + Text("Complete Setup") + } + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .disabled(!state.isValid || state.isLoading) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("complete-enrollment-button") + + Button { + state.sendCode() + } label: { + Text("Resend Code") + .authCustomFont(.body) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .buttonStyle(.bordered) + .disabled(state.isLoading) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("resend-code-button") + } + } + } + } + + private var totpEnrollmentContent: some View { + VStack(spacing: 16) { + if let totpSecret = state.totpSecret { + VStack(spacing: 16) { + VStack(spacing: 6) { + Image(systemName: "qrcode") + .font(.system(size: 40)) + .foregroundColor(.green) + + Text("Scan QR Code") + .authFont(.title2) + .fontWeight(.semibold) + + Text("Scan with your authenticator app or tap to open directly") + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + .lineLimit(nil) + .padding(.horizontal) + } + + // QR Code generated from the otpauth:// URI + if let qrURL = state.totpQRCodeURL, + let qrImage = generateQRCode(from: qrURL.absoluteString) { + Button(action: { + UIApplication.shared.open(qrURL) + }) { + VStack(spacing: 8) { + Image(uiImage: qrImage) + .interpolation(.none) + .resizable() + .aspectRatio(contentMode: .fit) + .frame(width: 180, height: 180) + .accessibilityIdentifier("qr-code-image") + + HStack(spacing: 6) { + Image(systemName: "arrow.up.forward.app.fill") + .authFont(.caption) + Text("Tap to open in authenticator app") + .authFont(.caption) + .fontWeight(.medium) + } + .foregroundColor(.blue) + } + } + .buttonStyle(.plain) + .accessibilityIdentifier("open-authenticator-button") + } else { + RoundedRectangle(cornerRadius: 8) + .fill(Color.gray.opacity(0.3)) + .frame(width: 180, height: 180) + .overlay( + VStack { + Image(systemName: "exclamationmark.triangle") + .authFont(.title) + .foregroundColor(.orange) + Text("Unable to generate QR Code") + .authFont(.caption) + } + ) + } + + VStack(spacing: 6) { + Text("Manual Entry Key:") + .authFont(.headline) + + Button(action: state.copySecret) { + HStack { + Text(totpSecret) + .font(.system(.body, design: .monospaced)) + .lineLimit(1) + .minimumScaleFactor(0.5) + + Spacer() + + Image(systemName: state.didCopySecret ? "checkmark" : "doc.on.doc") + .foregroundColor(state.didCopySecret ? .green : .blue) + } + .padding() + .background(Color.gray.opacity(0.1)) + .cornerRadius(8) + } + .buttonStyle(.plain) + .accessibilityIdentifier("totp-secret-key") + + if state.didCopySecret { + Text("Copied to clipboard!") + .authFont(.caption) + .foregroundColor(.green) + .transition(.opacity) + } + } + .animation(.easeInOut(duration: 0.2), value: state.didCopySecret) + + AuthTextField( + text: state.displayName, + label: authService.string.displayNameFieldLabel, + prompt: authService.string.enterDisplayNameForAuthenticatorPrompt, + validations: [ + FormValidators.notEmpty(label: "Display name"), + ], + maintainsValidationMessage: true, + leading: { + Image(systemName: "person") + } + ) + .accessibilityIdentifier("display-name-field") + + VerificationCodeInputField( + code: state.totpCode, + validations: [ + FormValidators.verificationCode, + ], + maintainsValidationMessage: true + ) + .accessibilityIdentifier("totp-code-field") + + Button { + state.enroll() + } label: { + HStack { + if state.isLoading { + ProgressView() + .scaleEffect(0.8) + } + Text("Complete Setup") + } + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .disabled(!state.isValid || state.isLoading) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("complete-enrollment-button") + } + } + } + } + + private func generateQRCode(from string: String) -> UIImage? { + let data = Data(string.utf8) + + guard let filter = CIFilter(name: "CIQRCodeGenerator") else { return nil } + filter.setValue(data, forKey: "inputMessage") + filter.setValue("H", forKey: "inputCorrectionLevel") + + guard let ciImage = filter.outputImage else { return nil } + + // Scale up the QR code for better quality + let transform = CGAffineTransform(scaleX: 10, y: 10) + let scaledImage = ciImage.transformed(by: transform) + + let context = CIContext() + guard let cgImage = context.createCGImage(scaledImage, from: scaledImage.extent) else { + return nil + } + + return UIImage(cgImage: cgImage) + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAManagementContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAManagementContent.swift new file mode 100644 index 00000000000..0b749689d49 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAManagementContent.swift @@ -0,0 +1,166 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuth +import SwiftUI + +/// The stock content of ``MFAManagementScreen``. +@MainActor +public struct DefaultMFAManagementContent: View { + public init(state: MFAManagementContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + private let state: MFAManagementContentState + + public var body: some View { + VStack(spacing: 20) { + // Title section + VStack { + Text("Two-Factor Authentication") + .authFont(.largeTitle) + .fontWeight(.bold) + .multilineTextAlignment(.center) + + Text("Manage your authentication methods") + .authFont(.subheadline) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + .padding(.horizontal) + + if state.enrolledFactors.isEmpty { + // No factors enrolled + VStack(spacing: 16) { + Image(systemName: "shield.slash") + .font(.system(size: 48)) + .foregroundColor(.orange) + + Text("No Authentication Methods") + .authFont(.title2) + .fontWeight(.semibold) + + Text( + "Set up two-factor authentication to add an extra layer of security to your account." + ) + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + .padding(.horizontal) + + Button { + state.goToEnrollment() + } label: { + Text("Set Up Two-Factor Authentication") + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("setup-mfa-button") + } + } else { + // Show enrolled factors + VStack(alignment: .leading, spacing: 16) { + Text("Enrolled Methods") + .authFont(.headline) + .padding(.horizontal) + + ForEach(state.enrolledFactors) { factor in + factorRow(factor: factor) + } + + Divider() + .padding(.horizontal) + + Button("Add Another Method") { + state.goToEnrollment() + } + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .authCTAButtonStyle() + .accessibilityIdentifier("add-mfa-method-button") + } + } + + Spacer() + } + .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) + .safeAreaPadding() + } + + @ViewBuilder + private func factorRow(factor: MultiFactorInfo) -> some View { + HStack { + // Factor type icon + Group { + if factor.factorID == PhoneMultiFactorID { + Image(systemName: "message") + .foregroundColor(.blue) + } else { + Image(systemName: "qrcode") + .foregroundColor(.green) + } + } + .authFont(.title2) + + VStack(alignment: .leading, spacing: 4) { + Text(factor.displayName ?? authService.string.unnamedMethodLabel) + .authFont(.headline) + + if factor.factorID == PhoneMultiFactorID { + let phoneInfo = factor as! PhoneMultiFactorInfo + Text("SMS: \(phoneInfo.phoneNumber)") + .authFont(.caption) + .foregroundColor(.secondary) + } else { + Text("Authenticator App") + .authFont(.caption) + .foregroundColor(.secondary) + } + + Text("Enrolled: \(DateFormatter.shortDate.string(from: factor.enrollmentDate))") + .authFont(.caption2) + .foregroundColor(.secondary) + } + + Spacer() + + Button("Remove") { + state.unenroll(factor.uid) + } + .buttonStyle(.bordered) + .foregroundColor(.red) + .disabled(state.isLoading) + .accessibilityIdentifier("remove-factor-\(factor.uid)") + } + .padding() + .background(Color(.systemGray6)) + .cornerRadius(8) + .padding(.horizontal) + } +} + +// MARK: - Date Formatter Extension + +private extension DateFormatter { + static let shortDate: DateFormatter = { + let formatter = DateFormatter() + formatter.dateStyle = .short + formatter.timeStyle = .none + return formatter + }() +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAResolutionContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAResolutionContent.swift new file mode 100644 index 00000000000..8297e047fd1 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultMFAResolutionContent.swift @@ -0,0 +1,284 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The stock content of ``MFAResolutionScreen``. +@MainActor +public struct DefaultMFAResolutionContent: View { + public init(state: MFAResolutionContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + private let state: MFAResolutionContentState + + private var selectedHint: MFAHint? { + guard state.hints.indices.contains(state.selectedHintIndex.wrappedValue) else { + return nil + } + return state.hints[state.selectedHintIndex.wrappedValue] + } + + public var body: some View { + VStack(spacing: 24) { + // Header + VStack(spacing: 12) { + Image(systemName: "lock.shield") + .font(.system(size: 50)) + .foregroundColor(.blue) + + Text("Two-Factor Authentication") + .authFont(.largeTitle) + .fontWeight(.bold) + .accessibilityIdentifier("mfa-resolution-title") + + Text("Complete sign-in with your second factor") + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + } + .padding(.horizontal) + + // MFA Hints Selection (if multiple available) + if state.hints.count > 1 { + mfaHintsSelectionView + } + + // Resolution Content + if let hint = selectedHint { + resolutionContent(for: hint) + } + + // Action buttons + VStack(spacing: 12) { + // Complete Resolution Button + Button(action: state.resolve) { + HStack { + if state.isLoading { + ProgressView() + .scaleEffect(0.8) + } + Text("Complete Sign-In") + } + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .disabled(state.isLoading || !state.isValid) + .accessibilityIdentifier("complete-resolution-button") + + // Cancel Button + Button(action: state.cancel) { + Text("Cancel") + .authCustomFont(.body) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .buttonStyle(.bordered) + .accessibilityIdentifier("cancel-button") + } + .padding(.horizontal) + } + .padding(.vertical, 20) + } + + @ViewBuilder + private func resolutionContent(for hint: MFAHint) -> some View { + switch hint { + case let .phone(displayName, _, phoneNumber): + phoneResolutionContent(displayName: displayName, phoneNumber: phoneNumber) + case let .totp(displayName, _): + totpResolutionContent(displayName: displayName) + } + } + + @ViewBuilder + private func phoneResolutionContent(displayName _: String?, phoneNumber: String?) -> some View { + VStack(spacing: 16) { + VStack(spacing: 8) { + Image(systemName: "message.circle.fill") + .font(.system(size: 40)) + .foregroundColor(.blue) + + Text("SMS Verification") + .authFont(.title2) + .fontWeight(.semibold) + + if let phoneNumber = phoneNumber { + Text("We'll send a code to ••••••\(String(phoneNumber.suffix(4)))") + .authFont(.body) + .foregroundColor(.secondary) + } else { + Text("We'll send a verification code to your phone") + .authFont(.body) + .foregroundColor(.secondary) + } + } + .padding(.horizontal) + + // Send SMS button (if verification ID not yet obtained) + if !state.isCodeSent { + Button(action: state.sendCode) { + HStack { + if state.isLoading { + ProgressView() + .scaleEffect(0.8) + } + Text("Send Code") + } + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .disabled(state.isLoading) + .padding(.horizontal) + .accessibilityIdentifier("send-sms-button") + } else { + // Verification code input + VStack(alignment: .leading, spacing: 8) { + Text("Verification Code") + .authFont(.headline) + + VerificationCodeInputField( + code: state.verificationCode, + validations: [FormValidators.verificationCode], + maintainsValidationMessage: true + ) + .accessibilityIdentifier("sms-verification-code-field") + } + .padding(.horizontal) + } + } + } + + @ViewBuilder + private func totpResolutionContent(displayName: String?) -> some View { + VStack(spacing: 16) { + VStack(spacing: 8) { + Image(systemName: "qrcode") + .font(.system(size: 40)) + .foregroundColor(.green) + + Text("Authenticator App") + .authFont(.title2) + .fontWeight(.semibold) + + Text("Enter the 6-digit code from your authenticator app") + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + + if let displayName = displayName { + Text(authService.string.accountPrefix(displayName: displayName)) + .authFont(.caption) + .foregroundColor(.secondary) + } + } + .padding(.horizontal) + + // TOTP code input + VStack(alignment: .leading, spacing: 8) { + Text("Verification Code") + .authFont(.headline) + + VerificationCodeInputField( + code: state.totpCode, + validations: [FormValidators.verificationCode], + maintainsValidationMessage: true + ) + .accessibilityIdentifier("totp-verification-code-field") + } + .padding(.horizontal) + } + } + + @ViewBuilder + private var mfaHintsSelectionView: some View { + VStack(alignment: .leading, spacing: 12) { + Text("Choose verification method:") + .authFont(.headline) + .padding(.horizontal) + + ForEach(state.hints.indices, id: \.self) { index in + let hint = state.hints[index] + hintSelectionButton(hint: hint, index: index) + } + } + } + + @ViewBuilder + private func hintSelectionButton(hint: MFAHint, index: Int) -> some View { + let isSelected = state.selectedHintIndex.wrappedValue == index + Button(action: { + state.selectedHintIndex.wrappedValue = index + }) { + HStack { + Image(systemName: hint.isPhoneHint ? "message.circle" : "qrcode") + .foregroundColor(.blue) + + VStack(alignment: .leading) { + Text(hintDisplayName(for: hint)) + .authFont(.body) + .foregroundColor(.primary) + + hintSubtitle(for: hint) + } + + Spacer() + + if isSelected { + Image(systemName: "checkmark.circle.fill") + .foregroundColor(.blue) + } + } + .padding() + .background(isSelected ? Color.blue.opacity(0.1) : Color.clear) + .cornerRadius(8) + .overlay( + RoundedRectangle(cornerRadius: 8) + .stroke(isSelected ? Color.blue : Color.gray.opacity(0.3), lineWidth: 1) + ) + } + .buttonStyle(PlainButtonStyle()) + .padding(.horizontal) + .accessibilityIdentifier("hint-\(index)") + } + + private func hintDisplayName(for hint: MFAHint) -> String { + hint.isPhoneHint ? "SMS" : "Authenticator App" + } + + @ViewBuilder + private func hintSubtitle(for hint: MFAHint) -> some View { + if case let .phone(_, _, phoneNumber) = hint, let phone = phoneNumber { + Text("••••••\(String(phone.suffix(4)))") + .authFont(.caption) + .foregroundColor(.secondary) + } + } +} + +// Helper extension for MFAHint +private extension MFAHint { + var isPhoneHint: Bool { + switch self { + case .phone: + return true + case .totp: + return false + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultPasswordRecoveryContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultPasswordRecoveryContent.swift new file mode 100644 index 00000000000..f2fcbdfa844 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultPasswordRecoveryContent.swift @@ -0,0 +1,92 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The stock content of ``PasswordRecoveryScreen``. +@MainActor +public struct DefaultPasswordRecoveryContent: View { + public init(state: PasswordRecoveryContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + private let state: PasswordRecoveryContentState + + public var body: some View { + VStack(spacing: 24) { + AuthTextField( + text: state.email, + label: authService.string.passwordRecoveryEmailFieldLabel, + prompt: authService.string.emailInputLabel, + keyboardType: .emailAddress, + contentType: .emailAddress, + validations: [ + FormValidators.email, + ], + leading: { + Image(systemName: "at") + } + ) + Button(action: state.sendResetLink) { + Text(authService.string.forgotPasswordInputLabel) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .disabled(!state.isValid) + .frame(maxWidth: .infinity) + .authCTAButtonStyle() + } + .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) + .navigationTitle(authService.string.passwordRecoveryTitle) + .safeAreaPadding() + .sheet(isPresented: Binding( + get: { state.didSend }, + set: { isPresented in + if !isPresented { + state.hideSuccess() + } + } + )) { + successSheet + } + } + + @ViewBuilder + @MainActor + private var successSheet: some View { + VStack { + Text(authService.string.passwordRecoveryEmailSentTitle) + .authFont(.largeTitle) + .fontWeight(.bold) + .padding() + Text(authService.string.passwordRecoveryHelperMessage) + .authCustomFont(.body) + .padding() + + Divider() + + Text(String(format: authService.string.passwordRecoveryEmailSentMessage, state.sentEmail)) + .authCustomFont(.body) + .padding() + + Divider() + + Button(authService.string.okButtonLabel, action: state.dismissSuccess) + .padding() + } + .padding() + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultSignedInContent.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultSignedInContent.swift new file mode 100644 index 00000000000..c2ddf3122f2 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/DefaultSignedInContent.swift @@ -0,0 +1,94 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import SwiftUI + +/// The stock signed-in screen, the default content of ``AuthPickerView/signedInContent(_:)``. +/// Wrap it to keep the stock markup. +@MainActor +public struct DefaultSignedInContent: View { + public init(state: SignedInContentState) { + self.state = state + } + + @Environment(AuthService.self) private var authService + private let state: SignedInContentState + + public var body: some View { + VStack { + Text(authService.string.signedInTitle) + .authFont(.largeTitle) + .fontWeight(.bold) + .padding() + .accessibilityIdentifier("signed-in-text") + Text( + "\(state.user?.email ?? state.user?.displayName ?? state.user?.phoneNumber ?? "")" + ) + .authCustomFont(.body) + if !state.isEmailVerified { + Button(action: state.verifyEmail) { + Text(authService.string.sendEmailVerificationButtonLabel) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("verify-email-button") + } + Button(action: state.updatePassword) { + Text(authService.string.updatePasswordButtonLabel) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("update-password-button") + + if state.isMFAEnabled { + Button(action: state.goToMFAManagement) { + Text(authService.string.manageTwoFactorAuthenticationLabel) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("mfa-management-button") + } + + Button(action: state.deleteAccount) { + Text(authService.string.deleteAccountButtonLabel) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("delete-account-button") + + Button(action: state.signOut) { + Text(authService.string.signOutButtonLabel) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .authCTAButtonStyle() + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("sign-out-button") + } + .safeAreaPadding() + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailAuthScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailAuthScreen.swift new file mode 100644 index 00000000000..c14261e320b --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailAuthScreen.swift @@ -0,0 +1,231 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The state and actions of the email and password form, passed to ``EmailAuthScreen``'s +/// content. +public struct EmailAuthContentState { + /// The email address. The screen fills it in from ``AuthService/suggestedEmailAddress``. + public let email: Binding + + /// The password. + public let password: Binding + + /// The repeated password, checked against ``password`` when ``flow`` is + /// ``AuthenticationFlow/signUp``. + public let confirmPassword: Binding + + /// Signs in with ``email`` and ``password``, routing MFA and account conflicts to their + /// handlers. Does nothing unless ``isValid`` is `true` and ``isLoading`` is `false`. + public let signIn: @MainActor () -> Void + + /// Creates an account with ``email`` and ``password``, routing MFA and account conflicts to + /// their handlers. Does nothing unless ``isValid`` is `true` and ``isLoading`` is `false`. + public let signUp: @MainActor () -> Void + + /// Toggles ``flow`` between sign-in and sign-up, with animation. + public let switchFlow: @MainActor () -> Void + + /// Pushes ``AuthView/passwordRecovery``. + public let goToPasswordRecovery: @MainActor () -> Void + + /// Starts email-link sign-in, the same as the stock email-link button. + public let goToEmailLink: @MainActor () -> Void + + /// Whether the form signs in or signs up. Shared with ``AuthService/authenticationFlow``. + public let flow: AuthenticationFlow + + /// Whether the fields are valid for ``flow``: a valid email and a non-empty password to sign + /// in; a valid email, a password of at least 6 characters and a matching ``confirmPassword`` + /// to sign up. + public let isValid: Bool + + /// Whether a sign-in or sign-up is in flight, or the ``AuthService`` is signing in. + public let isLoading: Bool + + /// The localized message of the last failed attempt. It clears when a field or ``flow`` + /// changes or the next attempt starts. The sheet's error alert still shows for the same + /// failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(email: Binding, + password: Binding, + confirmPassword: Binding, + signIn: @escaping @MainActor () -> Void, + signUp: @escaping @MainActor () -> Void, + switchFlow: @escaping @MainActor () -> Void, + goToPasswordRecovery: @escaping @MainActor () -> Void, + goToEmailLink: @escaping @MainActor () -> Void, + flow: AuthenticationFlow, + isValid: Bool, + isLoading: Bool, + errorMessage: String?) { + self.email = email + self.password = password + self.confirmPassword = confirmPassword + self.signIn = signIn + self.signUp = signUp + self.switchFlow = switchFlow + self.goToPasswordRecovery = goToPasswordRecovery + self.goToEmailLink = goToEmailLink + self.flow = flow + self.isValid = isValid + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// The email and password form, with its content drawn by you. +/// +/// The screen signs in and signs up, switches the flow, navigates, and routes MFA, account +/// conflicts and errors. Your content only draws the UI from the ``EmailAuthContentState`` it +/// receives. Wrap ``DefaultEmailAuthContent`` to keep the stock markup. +/// +/// `AuthPickerView`'s `pickerContent { state in ... }` replaces the whole first screen, so add +/// your own provider buttons calling `state.select`, or the stock ones with +/// ``DefaultAuthMethodPicker``. +/// +/// Example: +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerContent { +/// ScrollView { +/// VStack { +/// EmailAuthScreen { state in +/// TextField("Email", text: state.email) +/// SecureField("Password", text: state.password) +/// if let errorMessage = state.errorMessage { +/// Text(errorMessage) +/// } +/// Button("Sign in", action: state.signIn) +/// .disabled(!state.isValid || state.isLoading) +/// } +/// DefaultAuthMethodPicker() +/// } +/// } +/// } +/// ``` +@MainActor +public struct EmailAuthScreen: View { + public init(@ViewBuilder content: @escaping (EmailAuthContentState) -> Content) { + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.accountConflictHandler) private var accountConflictHandler + @Environment(\.mfaHandler) private var mfaHandler + @Environment(\.reportError) private var reportError + @State private var email = "" + @State private var password = "" + @State private var confirmPassword = "" + @State private var isWorking = false + @State private var errorMessage: String? + + private let content: (EmailAuthContentState) -> Content + + public var body: some View { + content(EmailAuthContentState( + email: $email, + password: $password, + confirmPassword: $confirmPassword, + signIn: signIn, + signUp: signUp, + switchFlow: switchFlow, + goToPasswordRecovery: { authService.navigator.push(.passwordRecovery) }, + goToEmailLink: { authService.selectEmailLink() }, + flow: authService.authenticationFlow, + isValid: isValid, + isLoading: isLoading, + errorMessage: errorMessage + )) + .onChange(of: email) { errorMessage = nil } + .onChange(of: password) { errorMessage = nil } + .onChange(of: confirmPassword) { errorMessage = nil } + .onChange(of: authService.authenticationFlow) { errorMessage = nil } + .onAppear { + if let suggestedEmailAddress = authService.suggestedEmailAddress { + email = suggestedEmailAddress + } + } + .onChange(of: authService.suggestedEmailAddress) { _, suggestedEmailAddress in + if let suggestedEmailAddress { + email = suggestedEmailAddress + } + } + } + + private var isValid: Bool { + return if authService.authenticationFlow == .signIn { + FormValidators.email.isValid(input: email) && !password.isEmpty + } else { + FormValidators.email.isValid(input: email) && + FormValidators.atLeast6Characters.isValid(input: password) && + FormValidators.confirmPassword(password: password).isValid(input: confirmPassword) + } + } + + private var isLoading: Bool { + isWorking || authService.authenticationState == .authenticating + } + + private func switchFlow() { + withAnimation { + authService.authenticationFlow = + authService.authenticationFlow == .signIn ? .signUp : .signIn + } + } + + private func signIn() { + submit { [email, password] in + try await authService.signIn(email: email, password: password) + } + } + + private func signUp() { + submit { [email, password] in + try await authService.createUser(email: email, password: password) + } + } + + private func submit(_ attempt: @escaping @MainActor () async throws -> SignInOutcome) { + guard isValid, !isLoading else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + if case let .mfaRequired(mfaInfo) = try await attempt() { + mfaHandler?(mfaInfo) + } + } catch { + if case let AuthServiceError.accountConflict(ctx) = error, + let onConflict = accountConflictHandler { + onConflict(ctx) + return + } + + reportError?(error) + // The legacy sign-in recovery sheet explains this failure, so there is no message. + if case .legacySignInRecoveryPresented = error as? AuthServiceError { + return + } + + errorMessage = authService.string.localizedErrorMessage(for: error) + } + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailAuthView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailAuthView.swift index fc6616a8f8b..96cc6a69610 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailAuthView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailAuthView.swift @@ -18,231 +18,17 @@ // // Created by Russell Wheatley on 20/03/2025. // -import FirebaseAuth -import FirebaseAuthUIComponents import FirebaseCore import SwiftUI -private enum FocusableField: Hashable { - case email - case password - case confirmPassword -} - @MainActor public struct EmailAuthView { - @Environment(AuthService.self) private var authService - @Environment(\.accountConflictHandler) private var accountConflictHandler - @Environment(\.mfaHandler) private var mfaHandler - @Environment(\.reportError) private var reportError - - @State private var email = "" - @State private var password = "" - @State private var confirmPassword = "" - - @FocusState private var focus: FocusableField? - public init() {} - - private var isValid: Bool { - return if authService.authenticationFlow == .signIn { - FormValidators.email.isValid(input: email) && !password.isEmpty - } else { - FormValidators.email.isValid(input: email) && - FormValidators.atLeast6Characters.isValid(input: password) && - FormValidators.confirmPassword(password: password).isValid(input: confirmPassword) - } - } - - private func signInWithEmailPassword() async throws { - do { - let outcome = try await authService.signIn(email: email, password: password) - - // Handle MFA at view level - if case let .mfaRequired(mfaInfo) = outcome, - let onMFA = mfaHandler { - onMFA(mfaInfo) - return - } - } catch { - if case let AuthServiceError.accountConflict(ctx) = error, - let onConflict = accountConflictHandler { - onConflict(ctx) - return - } - - reportError?(error) - if case .legacySignInRecoveryPresented = error as? AuthServiceError { - return - } - - throw error - } - } - - private func createUserWithEmailPassword() async throws { - do { - let outcome = try await authService.createUser(email: email, password: password) - - // Handle MFA at view level - if case let .mfaRequired(mfaInfo) = outcome, - let onMFA = mfaHandler { - onMFA(mfaInfo) - return - } - } catch { - if case let AuthServiceError.accountConflict(ctx) = error, - let onConflict = accountConflictHandler { - onConflict(ctx) - return - } - - reportError?(error) - throw error - } - } } extension EmailAuthView: View { public var body: some View { - VStack(spacing: 16) { - AuthTextField( - text: $email, - label: authService.string.emailFieldLabel, - prompt: authService.string.emailInputLabel, - keyboardType: .emailAddress, - contentType: .emailAddress, - validations: [ - FormValidators.email, - ], - maintainsValidationMessage: authService.authenticationFlow == .signUp, - onSubmit: { _ in - self.focus = .password - }, - leading: { - Image(systemName: "at") - } - ) - .focused($focus, equals: .email) - .accessibilityIdentifier("email-field") - AuthTextField( - text: $password, - label: authService.string.passwordFieldLabel, - prompt: authService.string.passwordInputLabel, - contentType: .password, - isSecureTextField: true, - validations: authService.authenticationFlow == .signUp ? [ - FormValidators.atLeast6Characters - ] : [], - maintainsValidationMessage: authService.authenticationFlow == .signUp, - onSubmit: { _ in - Task { try await signInWithEmailPassword() } - }, - leading: { - Image(systemName: "lock") - } - ) - .submitLabel(.go) - .focused($focus, equals: .password) - .accessibilityIdentifier("password-field") - if authService.authenticationFlow == .signIn { - Button { - authService.navigator.push(.passwordRecovery) - } label: { - Text(authService.string.passwordButtonLabel) - .frame(maxWidth: .infinity, alignment: .trailing) - } - .accessibilityIdentifier("password-recovery-button") - } - - if authService.authenticationFlow == .signUp { - AuthTextField( - text: $confirmPassword, - label: authService.string.confirmPasswordFieldLabel, - prompt: authService.string.confirmPasswordInputLabel, - contentType: .password, - isSecureTextField: true, - validations: [ - FormValidators.confirmPassword(password: password), - ], - maintainsValidationMessage: true, - onSubmit: { _ in - Task { try await createUserWithEmailPassword() } - }, - leading: { - Image(systemName: "lock") - } - ) - .submitLabel(.go) - .focused($focus, equals: .confirmPassword) - .accessibilityIdentifier("confirm-password-field") - } - - Button(action: { - Task { - if authService.authenticationFlow == .signIn { - try await signInWithEmailPassword() - } else { - try await createUserWithEmailPassword() - } - } - }) { - if authService.authenticationState != .authenticating { - Text( - authService.authenticationFlow == .signIn - ? authService.string.signInWithEmailButtonLabel - : authService.string.signUpWithEmailButtonLabel - ) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } else { - ProgressView() - .progressViewStyle(CircularProgressViewStyle(tint: .white)) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - } - .disabled(!isValid) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .buttonStyle(.borderedProminent) - .accessibilityIdentifier("sign-in-button") - } - Button(action: { - withAnimation { - authService.authenticationFlow = - authService - .authenticationFlow == .signIn ? .signUp : .signIn - } - }) { - HStack(spacing: 4) { - Text( - authService - .authenticationFlow == .signIn - ? authService.string.dontHaveAnAccountYetLabel - : authService.string.alreadyHaveAnAccountLabel - ) - .foregroundStyle(Color(.label)) - Text( - authService.authenticationFlow == .signUp - ? authService.string.emailLoginFlowLabel - : authService.string.emailSignUpFlowLabel - ) - .fontWeight(.semibold) - .foregroundColor(.blue) - } - } - .accessibilityIdentifier("switch-auth-flow") - .onAppear { - if let suggestedEmailAddress = authService.suggestedEmailAddress { - email = suggestedEmailAddress - } - } - .onChange(of: authService.suggestedEmailAddress) { _, suggestedEmailAddress in - if let suggestedEmailAddress { - email = suggestedEmailAddress - } - } + EmailAuthScreen { DefaultEmailAuthContent(state: $0) } } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkReauthView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkReauthView.swift index f151cda4311..fc896270f90 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkReauthView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkReauthView.swift @@ -13,6 +13,7 @@ // limitations under the License. import FirebaseAuth +import FirebaseAuthUIComponents import FirebaseCore import SwiftUI @@ -81,20 +82,20 @@ extension EmailLinkReauthView: View { .padding(.top, 32) Text("Check Your Email") - .font(.title) + .authFont(.title) .fontWeight(.bold) Text("We've sent a verification link to:") - .font(.body) + .authFont(.body) .foregroundStyle(.secondary) Text(email) - .font(.body) + .authFont(.body) .fontWeight(.medium) .padding(.horizontal) Text("Tap the link in the email to complete reauthentication.") - .font(.body) + .authFont(.body) .multilineTextAlignment(.center) .foregroundStyle(.secondary) .padding(.horizontal, 32) @@ -110,6 +111,7 @@ extension EmailLinkReauthView: View { .frame(height: 32) } else { Text("Resend Email") + .authCustomFont(.body) .frame(height: 32) } } @@ -123,6 +125,7 @@ extension EmailLinkReauthView: View { ProgressView() .padding(.top, 32) Text("Sending verification email...") + .authCustomFont(.body) .foregroundStyle(.secondary) } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkScreen.swift new file mode 100644 index 00000000000..11577d6902d --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkScreen.swift @@ -0,0 +1,173 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import SwiftUI + +/// The state and actions of the email-link screen, passed to ``EmailLinkScreen``'s content. +public struct EmailLinkContentState { + /// The email address to send the sign-in link to. The screen fills it in from + /// ``AuthService/suggestedEmailAddress``. + public let email: Binding + + /// Sends a sign-in link to ``email``, then sets ``didSend``. Does nothing unless ``isValid`` is + /// `true` and ``isLoading`` is `false`. + public let sendSignInLink: @MainActor () -> Void + + /// Clears ``didSend``. + public let dismissAlert: @MainActor () -> Void + + /// Whether a sign-in link was sent and ``dismissAlert`` hasn't been called since. + public let didSend: Bool + + /// Whether ``email`` is a valid email address. + public let isValid: Bool + + /// Whether a link is being sent or handled, or the ``AuthService`` is signing in. + public let isLoading: Bool + + /// The localized message of the last failed send or link sign-in. It clears when the email + /// changes or the next attempt starts. The sheet's error alert still shows for the same + /// failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(email: Binding, + sendSignInLink: @escaping @MainActor () -> Void, + dismissAlert: @escaping @MainActor () -> Void, + didSend: Bool, + isValid: Bool, + isLoading: Bool, + errorMessage: String?) { + self.email = email + self.sendSignInLink = sendSignInLink + self.dismissAlert = dismissAlert + self.didSend = didSend + self.isValid = isValid + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// The email-link screen, with its content drawn by you. +/// +/// The screen sends the link, signs in when the app opens it, and routes account conflicts and +/// errors. Your content only draws the UI from the ``EmailLinkContentState`` it receives. Wrap +/// ``DefaultEmailLinkContent`` to keep the stock markup. +/// +/// Example: +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerDestination { screen in +/// switch screen { +/// case .emailLink: +/// EmailLinkScreen { state in +/// TextField("Email", text: state.email) +/// Button("Send link", action: state.sendSignInLink) +/// .disabled(!state.isValid || state.isLoading) +/// if state.didSend { +/// Text("Check your inbox") +/// } +/// } +/// default: +/// DefaultAuthPickerDestination(screen: screen) +/// } +/// } +/// ``` +@MainActor +public struct EmailLinkScreen: View { + public init(@ViewBuilder content: @escaping (EmailLinkContentState) -> Content) { + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.accountConflictHandler) private var accountConflictHandler + @Environment(\.reportError) private var reportError + @State private var email = "" + @State private var didSend = false + @State private var isWorking = false + @State private var isHandlingLink = false + @State private var errorMessage: String? + + private let content: (EmailLinkContentState) -> Content + + public var body: some View { + content(EmailLinkContentState( + email: $email, + sendSignInLink: sendSignInLink, + dismissAlert: { didSend = false }, + didSend: didSend, + isValid: isValid, + isLoading: isLoading, + errorMessage: errorMessage + )) + .onChange(of: email) { errorMessage = nil } + .onOpenURL { url in + // Content with several root views gets this handler once per view; the link is one-time, + // so only the first one handles it. + guard !isHandlingLink else { return } + isHandlingLink = true + errorMessage = nil + Task { + defer { isHandlingLink = false } + do { + try await authService.handleSignInLink(url: url) + } catch { + if case let AuthServiceError.accountConflict(ctx) = error, + let onConflict = accountConflictHandler { + onConflict(ctx) + return + } + + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + } + } + .onAppear { + if let suggestedEmailAddress = authService.suggestedEmailAddress { + email = suggestedEmailAddress + } + } + .onChange(of: authService.suggestedEmailAddress) { _, suggestedEmailAddress in + if let suggestedEmailAddress { + email = suggestedEmailAddress + } + } + } + + private var isValid: Bool { + CommonUtils.isValidEmail(email) + } + + private var isLoading: Bool { + isWorking || isHandlingLink || authService.authenticationState == .authenticating + } + + private func sendSignInLink() { + guard isValid, !isLoading else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + try await authService.sendEmailSignInLink(email: email) + didSend = true + authService.emailLink = email + } catch { + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkView.swift index 6bdfe6812ad..c5b8e776aa0 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailLinkView.swift @@ -12,106 +12,17 @@ // See the License for the specific language governing permissions and // limitations under the License. -import FirebaseAuth -import FirebaseAuthUIComponents import FirebaseCore import SwiftUI @MainActor public struct EmailLinkView { - @Environment(AuthService.self) private var authService - @Environment(\.accountConflictHandler) private var accountConflictHandler - @Environment(\.reportError) private var reportError - @State private var email = "" - @State private var showAlert = false - public init() {} - - private func sendEmailLink() async throws { - do { - try await authService.sendEmailSignInLink(email: email) - showAlert = true - } catch { - if let errorHandler = reportError { - errorHandler(error) - } else { - throw error - } - } - } } extension EmailLinkView: View { public var body: some View { - VStack(spacing: 24) { - AuthTextField( - text: $email, - label: authService.string.signInLinkEmailFieldLabel, - prompt: authService.string.emailInputLabel, - keyboardType: .emailAddress, - contentType: .emailAddress, - validations: [ - FormValidators.email, - ], - leading: { - Image(systemName: "at") - } - ) - .accessibilityIdentifier("email-link-email-field") - Button { - Task { - try await sendEmailLink() - authService.emailLink = email - } - } label: { - Text(authService.string.sendEmailLinkButtonLabel) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .disabled(!CommonUtils.isValidEmail(email)) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - } - .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) - .navigationTitle(authService.string.signInWithEmailLinkViewTitle) - .safeAreaPadding() - .alert( - authService.string.signInWithEmailLinkViewTitle, - isPresented: $showAlert - ) { - Button(authService.string.okButtonLabel) { - showAlert = false - } - } message: { - Text(authService.string.signInWithEmailLinkViewMessage) - } - .onOpenURL { url in - Task { - do { - try await authService.handleSignInLink(url: url) - } catch { - if case let AuthServiceError.accountConflict(ctx) = error, - let onConflict = accountConflictHandler { - onConflict(ctx) - return - } - - reportError?(error) - throw error - } - } - } - .onAppear { - if let suggestedEmailAddress = authService.suggestedEmailAddress { - email = suggestedEmailAddress - } - } - .onChange(of: authService.suggestedEmailAddress) { _, suggestedEmailAddress in - if let suggestedEmailAddress { - email = suggestedEmailAddress - } - } + EmailLinkScreen { DefaultEmailLinkContent(state: $0) } } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailReauthView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailReauthView.swift index 8d61630ce47..34a3fb497b1 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailReauthView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EmailReauthView.swift @@ -66,11 +66,11 @@ extension EmailReauthView: View { .foregroundColor(.blue) Text(authService.string.confirmPasswordTitle) - .font(.title) + .authFont(.title) .fontWeight(.bold) Text(authService.string.forSecurityEnterPasswordMessage) - .font(.body) + .authFont(.body) .foregroundColor(.secondary) .multilineTextAlignment(.center) } @@ -78,7 +78,7 @@ extension EmailReauthView: View { VStack(spacing: 20) { Text(authService.string.emailPrefix(email: email)) - .font(.caption) + .authFont(.caption) .frame(maxWidth: .infinity, alignment: .leading) .padding(.bottom, 8) @@ -109,7 +109,7 @@ extension EmailReauthView: View { .frame(maxWidth: .infinity) } } - .buttonStyle(.borderedProminent) + .authCTAButtonStyle() .disabled(password.isEmpty || isLoading) .accessibilityIdentifier("confirm-password-button") diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterPhoneNumberScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterPhoneNumberScreen.swift new file mode 100644 index 00000000000..2b8535d3a55 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterPhoneNumberScreen.swift @@ -0,0 +1,135 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthUIComponents +import SwiftUI + +/// The state and actions of the phone number screen, passed to ``EnterPhoneNumberScreen``'s +/// content. +public struct PhoneNumberContentState { + /// The national phone number, without the dial code. + public let phoneNumber: Binding + + /// The country whose dial code prefixes ``phoneNumber``. + public let selectedCountry: Binding + + /// Sends a verification code to the full phone number, then pushes + /// ``AuthView/enterVerificationCode(verificationID:fullPhoneNumber:)``. Does nothing unless + /// ``isValid`` is `true` and ``isLoading`` is `false`. + public let sendCode: @MainActor () -> Void + + /// Whether ``phoneNumber`` is non-empty. + public let isValid: Bool + + /// Whether a code is being sent, or the ``AuthService`` is signing in. + public let isLoading: Bool + + /// The localized message of the last failed attempt. It clears when the number or country + /// changes or the next attempt starts. The sheet's error alert still shows for the same failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(phoneNumber: Binding, + selectedCountry: Binding, + sendCode: @escaping @MainActor () -> Void, + isValid: Bool, + isLoading: Bool, + errorMessage: String?) { + self.phoneNumber = phoneNumber + self.selectedCountry = selectedCountry + self.sendCode = sendCode + self.isValid = isValid + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// The phone number screen, with its content drawn by you. +/// +/// The screen sends the code, navigates, and reports errors. Your content only draws the UI from +/// the ``PhoneNumberContentState`` it receives. Wrap ``DefaultEnterPhoneNumberContent`` to keep +/// the stock markup. +/// +/// Example: +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerDestination { screen in +/// switch screen { +/// case .enterPhoneNumber: +/// EnterPhoneNumberScreen { state in +/// TextField("Phone number", text: state.phoneNumber) +/// Button("Send code", action: state.sendCode) +/// .disabled(!state.isValid || state.isLoading) +/// } +/// default: +/// DefaultAuthPickerDestination(screen: screen) +/// } +/// } +/// ``` +@MainActor +public struct EnterPhoneNumberScreen: View { + public init(@ViewBuilder content: @escaping (PhoneNumberContentState) -> Content) { + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.reportError) private var reportError + @State private var phoneNumber: String = "" + @State private var selectedCountry: CountryData = .default + @State private var isWorking = false + @State private var errorMessage: String? + + private let content: (PhoneNumberContentState) -> Content + + public var body: some View { + content(PhoneNumberContentState( + phoneNumber: $phoneNumber, + selectedCountry: $selectedCountry, + sendCode: sendCode, + isValid: isValid, + isLoading: isLoading, + errorMessage: errorMessage + )) + .onChange(of: phoneNumber) { errorMessage = nil } + .onChange(of: selectedCountry) { errorMessage = nil } + } + + private var isValid: Bool { + !phoneNumber.isEmpty + } + + private var isLoading: Bool { + isWorking || authService.authenticationState == .authenticating + } + + private func sendCode() { + guard isValid, !isLoading else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + let fullPhoneNumber = selectedCountry.dialCode + phoneNumber + let id = try await authService.verifyPhoneNumber(phoneNumber: fullPhoneNumber) + authService.navigator.push(.enterVerificationCode( + verificationID: id, + fullPhoneNumber: fullPhoneNumber + )) + } catch { + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterPhoneNumberView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterPhoneNumberView.swift index 95152335ca3..bfb76644125 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterPhoneNumberView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterPhoneNumberView.swift @@ -12,79 +12,12 @@ // See the License for the specific language governing permissions and // limitations under the License. -import FirebaseAuth -import FirebaseAuthUIComponents import FirebaseCore import SwiftUI struct EnterPhoneNumberView: View { - @Environment(AuthService.self) private var authService - @Environment(\.reportError) private var reportError - @State private var phoneNumber: String = "" - @State private var selectedCountry: CountryData = .default - var body: some View { - VStack(spacing: 16) { - Text(authService.string.enterPhoneNumberPlaceholder) - .font(.subheadline) - .foregroundStyle(.secondary) - .multilineTextAlignment(.center) - .frame(maxWidth: .infinity, alignment: .leading) - .padding(.top) - - AuthTextField( - text: $phoneNumber, - label: authService.string.phoneFieldLabel, - prompt: authService.string.enterPhoneNumberPlaceholder, - keyboardType: .phonePad, - contentType: .telephoneNumber, - validations: [ - FormValidators.phoneNumber, - ], - onChange: { _ in } - ) { - CountrySelector( - selectedCountry: $selectedCountry, - enabled: !(authService.authenticationState == .authenticating) - ) - } - - Button(action: { - Task { - do { - let fullPhoneNumber = selectedCountry.dialCode + phoneNumber - let id = try await authService.verifyPhoneNumber(phoneNumber: fullPhoneNumber) - authService.navigator.push(.enterVerificationCode( - verificationID: id, - fullPhoneNumber: fullPhoneNumber - )) - } catch { - if let errorHandler = reportError { - errorHandler(error) - } else { - throw error - } - } - } - }) { - if authService.authenticationState == .authenticating { - ProgressView() - .frame(height: 32) - .frame(maxWidth: .infinity) - } else { - Text(authService.string.sendCodeButtonLabel) - .frame(height: 32) - .frame(maxWidth: .infinity) - } - } - .buttonStyle(.borderedProminent) - .disabled(authService.authenticationState == .authenticating || phoneNumber.isEmpty) - .padding(.top, 8) - - Spacer() - } - .navigationTitle(authService.string.phoneSignInTitle) - .padding(.horizontal) + EnterPhoneNumberScreen { DefaultEnterPhoneNumberContent(state: $0) } } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterVerificationCodeScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterVerificationCodeScreen.swift new file mode 100644 index 00000000000..5b681ccc8ed --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterVerificationCodeScreen.swift @@ -0,0 +1,200 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuth +import SwiftUI + +/// Seconds between sending a code and allowing a resend. +private let resendDelay: TimeInterval = 60 + +/// The state and actions of the verification code screen, passed to +/// ``EnterVerificationCodeScreen``'s content. +public struct VerificationCodeContentState { + /// The code the user typed. + public let verificationCode: Binding + + /// Signs in with the code, routing MFA and account conflicts to their handlers. Does nothing + /// unless ``isValid`` is `true` and ``isLoading`` is `false`. + public let verify: @MainActor () -> Void + + /// Sends a new code and clears ``verificationCode``. Does nothing while ``resendCountdown`` is + /// above zero or ``isLoading`` is `true`. + public let resendCode: @MainActor () -> Void + + /// Pops back to the phone number screen. + public let changeNumber: @MainActor () -> Void + + /// The number the code was sent to, including the dial code. + public let fullPhoneNumber: String + + /// Seconds left before ``resendCode`` is available; `0` when it is. + public let resendCountdown: Int + + /// Whether ``verificationCode`` has 6 digits. + public let isValid: Bool + + /// Whether a verify or resend is in flight, or the ``AuthService`` is signing in. + public let isLoading: Bool + + /// The localized message of the last failed verify or resend. It clears when the code changes + /// or the next attempt starts. The sheet's error alert still shows for the same failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(verificationCode: Binding, + verify: @escaping @MainActor () -> Void, + resendCode: @escaping @MainActor () -> Void, + changeNumber: @escaping @MainActor () -> Void, + fullPhoneNumber: String, + resendCountdown: Int, + isValid: Bool, + isLoading: Bool, + errorMessage: String?) { + self.verificationCode = verificationCode + self.verify = verify + self.resendCode = resendCode + self.changeNumber = changeNumber + self.fullPhoneNumber = fullPhoneNumber + self.resendCountdown = resendCountdown + self.isValid = isValid + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// The verification code screen, with its content drawn by you. +/// +/// The screen signs in, resends codes, runs the resend countdown, and routes MFA, account +/// conflicts and errors. It reads `verificationID` once; codes it resends replace it +/// internally. Your content only draws the UI from the ``VerificationCodeContentState`` it +/// receives. Wrap ``DefaultEnterVerificationCodeContent`` to keep the stock markup. +/// +/// Example: +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerDestination { screen in +/// switch screen { +/// case let .enterVerificationCode(verificationID, fullPhoneNumber): +/// EnterVerificationCodeScreen( +/// verificationID: verificationID, +/// fullPhoneNumber: fullPhoneNumber +/// ) { state in +/// TextField("Code", text: state.verificationCode) +/// Button("Verify", action: state.verify) +/// .disabled(!state.isValid || state.isLoading) +/// } +/// default: +/// DefaultAuthPickerDestination(screen: screen) +/// } +/// } +/// ``` +@MainActor +public struct EnterVerificationCodeScreen: View { + public init(verificationID: String, + fullPhoneNumber: String, + @ViewBuilder content: @escaping (VerificationCodeContentState) -> Content) { + _verificationID = State(initialValue: verificationID) + self.fullPhoneNumber = fullPhoneNumber + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.mfaHandler) private var mfaHandler + @Environment(\.accountConflictHandler) private var accountConflictHandler + @Environment(\.reportError) private var reportError + @State private var verificationID: String + @State private var verificationCode: String = "" + @State private var resendAvailableAt = Date().addingTimeInterval(resendDelay) + @State private var resendCountdown = Int(resendDelay) + @State private var isWorking = false + @State private var errorMessage: String? + + private let fullPhoneNumber: String + private let content: (VerificationCodeContentState) -> Content + + public var body: some View { + content(VerificationCodeContentState( + verificationCode: $verificationCode, + verify: verify, + resendCode: resendCode, + changeNumber: { authService.navigator.pop() }, + fullPhoneNumber: fullPhoneNumber, + resendCountdown: resendCountdown, + isValid: isValid, + isLoading: isLoading, + errorMessage: errorMessage + )) + .onChange(of: verificationCode) { errorMessage = nil } + .task(id: resendAvailableAt) { + while !Task.isCancelled { + resendCountdown = max(0, Int(resendAvailableAt.timeIntervalSinceNow.rounded(.up))) + guard resendCountdown > 0 else { return } + try? await Task.sleep(for: .seconds(1)) + } + } + } + + private var isValid: Bool { + verificationCode.count == 6 + } + + private var isLoading: Bool { + isWorking || authService.authenticationState == .authenticating + } + + private func verify() { + guard isValid, !isLoading else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + let credential = PhoneAuthProvider.provider() + .credential(withVerificationID: verificationID, verificationCode: verificationCode) + switch try await authService.signIn(credentials: credential) { + case let .mfaRequired(mfaInfo): + mfaHandler?(mfaInfo) + case .signedIn: + authService.navigator.clear() + } + } catch { + if case let AuthServiceError.accountConflict(ctx) = error, + let onConflict = accountConflictHandler { + onConflict(ctx) + return + } + + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + } + } + + private func resendCode() { + guard resendCountdown == 0, !isLoading else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + verificationID = try await authService.verifyPhoneNumber(phoneNumber: fullPhoneNumber) + verificationCode = "" + resendAvailableAt = Date().addingTimeInterval(resendDelay) + } catch { + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterVerificationCodeView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterVerificationCodeView.swift index 2a1da9d4063..4924946f3c9 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterVerificationCodeView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/EnterVerificationCodeView.swift @@ -12,90 +12,19 @@ // See the License for the specific language governing permissions and // limitations under the License. -import FirebaseAuth -import FirebaseAuthUIComponents import FirebaseCore import SwiftUI @MainActor struct EnterVerificationCodeView: View { - @Environment(AuthService.self) private var authService - @Environment(\.accountConflictHandler) private var accountConflictHandler - @Environment(\.reportError) private var reportError - @State private var verificationCode: String = "" - let verificationID: String let fullPhoneNumber: String var body: some View { - @Bindable var authService = authService - VStack(spacing: 32) { - VStack(spacing: 16) { - VStack(spacing: 8) { - Text(authService.string.sentCodeMessage(phoneNumber: fullPhoneNumber)) - .font(.subheadline) - .foregroundStyle(.secondary) - .multilineTextAlignment(.center) - .frame(maxWidth: .infinity, alignment: .leading) - - Button { - authService.navigator.pop() - } label: { - Text(authService.string.changeNumberButtonLabel) - .font(.caption) - .frame(maxWidth: .infinity, alignment: .leading) - } - } - .padding(.bottom) - .frame(maxWidth: .infinity, alignment: .leading) - - VerificationCodeInputField( - code: $verificationCode, - validations: [ - FormValidators.verificationCode, - ], - maintainsValidationMessage: true - ) - - Button(action: { - Task { - do { - try await authService.signInWithPhoneNumber( - verificationID: verificationID, - verificationCode: verificationCode - ) - authService.navigator.clear() - } catch { - if case let AuthServiceError.accountConflict(ctx) = error, - let onConflict = accountConflictHandler { - onConflict(ctx) - return - } - - reportError?(error) - throw error - } - } - }) { - if authService.authenticationState == .authenticating { - ProgressView() - .frame(height: 32) - .frame(maxWidth: .infinity) - } else { - Text(authService.string.verifyAndSignInButtonLabel) - .frame(height: 32) - .frame(maxWidth: .infinity) - } - } - .buttonStyle(.borderedProminent) - .disabled(authService.authenticationState == .authenticating || verificationCode.count != 6) - } - - Spacer() - } - .navigationTitle(authService.string.enterVerificationCodeTitle) - .navigationBarTitleDisplayMode(.large) - .padding(.horizontal) + EnterVerificationCodeScreen( + verificationID: verificationID, + fullPhoneNumber: fullPhoneNumber + ) { DefaultEnterVerificationCodeContent(state: $0) } } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/LegacySignInRecoveryView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/LegacySignInRecoveryView.swift index 11c1d353675..5ece47a7031 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/LegacySignInRecoveryView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/LegacySignInRecoveryView.swift @@ -12,6 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. +import FirebaseAuthUIComponents import FirebaseCore import SwiftUI @@ -26,8 +27,9 @@ struct LegacySignInRecoveryView: View { VStack(alignment: .leading, spacing: 24) { VStack(alignment: .leading, spacing: 12) { Text(authService.string.legacySignInRecoveryTitle) - .font(.title2.weight(.semibold)) + .authFont(.title2, weight: .semibold) Text(authService.string.legacySignInRecoveryMessage(email: recovery.email)) + .authCustomFont(.body) .foregroundStyle(.secondary) } @@ -35,7 +37,7 @@ struct LegacySignInRecoveryView: View { if !recovery.unavailableProviders.isEmpty { Text(authService.string.legacySignInRecoveryUnavailableMessage) - .font(.footnote) + .authFont(.footnote) .foregroundStyle(.secondary) } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAEnrolmentScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAEnrolmentScreen.swift new file mode 100644 index 00000000000..1b0f364a594 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAEnrolmentScreen.swift @@ -0,0 +1,441 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuth +import FirebaseAuthUIComponents +import SwiftUI + +/// The state and actions of the MFA enrolment screen, passed to ``MFAEnrolmentScreen``'s content. +public struct MFAEnrollmentContentState { + /// A step of the enrolment flow. + /// + /// Later releases may add steps, so give a `switch` over it a `default` case. + public enum Step { + /// Choosing a factor, before ``MFAEnrollmentContentState/startEnrollment`` succeeds or once + /// the enrolment session has expired or finished. + case selectFactor + /// Entering the phone number and display name for an SMS factor. + case enterPhoneNumber + /// Entering the code sent to ``MFAEnrollmentContentState/sentPhoneNumber``. + case enterVerificationCode + /// Adding ``MFAEnrollmentContentState/totpSecret`` to an authenticator app, then entering + /// the display name and the code it generates. + case setUpTOTP + } + + /// The current step. + public let step: Step + + /// The factor ``startEnrollment`` sets up. When the screen appears, it sets it to the first of + /// ``allowedFactors`` if it is not one of them. + public let selectedFactorType: Binding + + /// The national phone number of an SMS factor, without the dial code. + public let phoneNumber: Binding + + /// The country whose dial code prefixes ``phoneNumber``. + public let selectedCountry: Binding + + /// The code sent by SMS. + public let verificationCode: Binding + + /// The code generated by the authenticator app. + public let totpCode: Binding + + /// The name the factor is listed under. + public let displayName: Binding + + /// Starts enrolling ``selectedFactorType``, moving to ``Step/enterPhoneNumber`` or + /// ``Step/setUpTOTP``. Does nothing unless ``step`` is ``Step/selectFactor``, ``isValid`` is + /// `true` and ``isLoading`` is `false`. + public let startEnrollment: @MainActor () -> Void + + /// Sends a code to the full phone number, moving to ``Step/enterVerificationCode``, or sends a + /// new one from that step. Does nothing unless ``step`` is ``Step/enterPhoneNumber`` or + /// ``Step/enterVerificationCode``, ``phoneNumber`` and ``displayName`` are non-empty, and + /// ``isLoading`` is `false`. + public let sendCode: @MainActor () -> Void + + /// Enrols the factor with the SMS or authenticator code, reauthenticating first when Firebase + /// requires it, then clears navigation. Does nothing unless ``step`` is + /// ``Step/enterVerificationCode`` or ``Step/setUpTOTP``, ``isValid`` is `true` and + /// ``isLoading`` is `false`. + public let enroll: @MainActor () -> Void + + /// Copies ``totpSecret`` to the pasteboard and sets ``didCopySecret`` briefly. + public let copySecret: @MainActor () -> Void + + /// Whether MFA is enabled in the ``AuthConfiguration``. + public let isMFAEnabled: Bool + + /// The factors the ``AuthConfiguration`` allows, SMS first. + public let allowedFactors: [SecondFactorType] + + /// The number the code was sent to, including the dial code, from + /// ``Step/enterVerificationCode``. + public let sentPhoneNumber: String? + + /// The shared secret to enter in an authenticator app, from ``Step/setUpTOTP``. + public let totpSecret: String? + + /// The `otpauth://` URL to show as a QR code or open in an authenticator app, from + /// ``Step/setUpTOTP``. + public let totpQRCodeURL: URL? + + /// Whether ``copySecret`` just copied the secret. + public let didCopySecret: Bool + + /// Whether the current step's input is complete: MFA is enabled and ``selectedFactorType`` is + /// one of ``allowedFactors`` in ``Step/selectFactor``, ``phoneNumber`` and ``displayName`` are + /// non-empty in ``Step/enterPhoneNumber``, and ``displayName`` plus the step's code are + /// non-empty in ``Step/enterVerificationCode`` and ``Step/setUpTOTP``. + public let isValid: Bool + + /// Whether an enrolment action is in flight, or the ``AuthService`` is signing in. + public let isLoading: Bool + + /// The localized message of the last failed action. It clears when any input changes or the + /// next attempt starts. The sheet's error alert still shows for the same failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(step: Step, + selectedFactorType: Binding, + phoneNumber: Binding, + selectedCountry: Binding, + verificationCode: Binding, + totpCode: Binding, + displayName: Binding, + startEnrollment: @escaping @MainActor () -> Void, + sendCode: @escaping @MainActor () -> Void, + enroll: @escaping @MainActor () -> Void, + copySecret: @escaping @MainActor () -> Void, + isMFAEnabled: Bool, + allowedFactors: [SecondFactorType], + sentPhoneNumber: String?, + totpSecret: String?, + totpQRCodeURL: URL?, + didCopySecret: Bool, + isValid: Bool, + isLoading: Bool, + errorMessage: String?) { + self.step = step + self.selectedFactorType = selectedFactorType + self.phoneNumber = phoneNumber + self.selectedCountry = selectedCountry + self.verificationCode = verificationCode + self.totpCode = totpCode + self.displayName = displayName + self.startEnrollment = startEnrollment + self.sendCode = sendCode + self.enroll = enroll + self.copySecret = copySecret + self.isMFAEnabled = isMFAEnabled + self.allowedFactors = allowedFactors + self.sentPhoneNumber = sentPhoneNumber + self.totpSecret = totpSecret + self.totpQRCodeURL = totpQRCodeURL + self.didCopySecret = didCopySecret + self.isValid = isValid + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// The MFA enrolment screen, with its content drawn by you. +/// +/// The screen starts the enrolment, sends SMS codes, enrols the factor, presents +/// reauthentication when Firebase requires it, and reports errors. Your content only draws the +/// UI for the ``MFAEnrollmentContentState/step`` it receives. Wrap ``DefaultMFAEnrolmentContent`` +/// to keep the stock markup. The navigation title is part of that markup, so set your own on +/// custom content. +/// +/// Example: +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerDestination { screen in +/// switch screen { +/// case .mfaEnrollment: +/// MFAEnrolmentScreen { state in +/// switch state.step { +/// case .enterPhoneNumber: +/// TextField("Phone number", text: state.phoneNumber) +/// TextField("Device name", text: state.displayName) +/// Button("Send code", action: state.sendCode) +/// .disabled(!state.isValid || state.isLoading) +/// default: +/// DefaultMFAEnrolmentContent(state: state) +/// } +/// } +/// default: +/// DefaultAuthPickerDestination(screen: screen) +/// } +/// } +/// ``` +@MainActor +public struct MFAEnrolmentScreen: View { + public init(@ViewBuilder content: @escaping (MFAEnrollmentContentState) -> Content) { + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.reportError) private var reportError + @State private var selectedFactorType: SecondFactorType = .sms + @State private var phoneNumber = "" + @State private var selectedCountry: CountryData = .default + @State private var verificationCode = "" + @State private var totpCode = "" + @State private var displayName = "" + @State private var currentSession: EnrollmentSession? + @State private var didCopySecret = false + @State private var copyFeedback: Task? + @State private var isWorking = false + @State private var errorMessage: String? + @State private var reauthCoordinator = ReauthenticationCoordinator() + + private let content: (MFAEnrollmentContentState) -> Content + + public var body: some View { + content(MFAEnrollmentContentState( + step: step, + selectedFactorType: $selectedFactorType, + phoneNumber: $phoneNumber, + selectedCountry: $selectedCountry, + verificationCode: $verificationCode, + totpCode: $totpCode, + displayName: $displayName, + startEnrollment: startEnrollment, + sendCode: sendCode, + enroll: enroll, + copySecret: copySecret, + isMFAEnabled: authService.configuration.mfaEnabled, + allowedFactors: allowedFactors, + sentPhoneNumber: currentSession?.phoneNumber, + totpSecret: currentSession?.totpInfo?.sharedSecretKey, + totpQRCodeURL: currentSession?.totpInfo?.qrCodeURL, + didCopySecret: didCopySecret, + isValid: isValid, + isLoading: isLoading, + errorMessage: errorMessage + )) + .withReauthentication(coordinator: reauthCoordinator) + .onAppear { + if !allowedFactors.contains(selectedFactorType), + let firstAllowed = allowedFactors.first { + selectedFactorType = firstAllowed + } + } + .onChange(of: selectedFactorType) { errorMessage = nil } + .onChange(of: phoneNumber) { errorMessage = nil } + .onChange(of: selectedCountry) { errorMessage = nil } + .onChange(of: verificationCode) { errorMessage = nil } + .onChange(of: totpCode) { errorMessage = nil } + .onChange(of: displayName) { errorMessage = nil } + } + + private var allowedFactors: [SecondFactorType] { + MFAEnrollmentContentState.sortedFactors(authService.configuration.allowedSecondFactors) + } + + private var step: MFAEnrollmentContentState.Step { + guard let session = currentSession else { return .selectFactor } + return MFAEnrollmentContentState.Step( + type: session.type, + status: session.status, + isExpired: session.isExpired + ) + } + + private var isValid: Bool { + step.isValid( + isMFAEnabled: authService.configuration.mfaEnabled, + allowedFactors: allowedFactors, + selectedFactorType: selectedFactorType, + phoneNumber: phoneNumber, + verificationCode: verificationCode, + totpCode: totpCode, + displayName: displayName + ) + } + + private var isLoading: Bool { + isWorking || authService.authenticationState == .authenticating + } + + private func startEnrollment() { + guard step.canStartEnrollment(isValid: isValid, isLoading: isLoading) else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + currentSession = try await authService.startMfaEnrollment( + type: selectedFactorType, + accountName: authService.currentUser?.email, + issuer: authService.configuration.mfaIssuer + ) + } catch { + fail(error) + } + } + } + + private func sendCode() { + guard let session = currentSession, + step.canSendCode( + phoneNumber: phoneNumber, + displayName: displayName, + isLoading: isLoading + ) else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + let fullPhoneNumber = selectedCountry.dialCode + phoneNumber + let verificationId = try await authService.sendSmsVerificationForEnrollment( + session: session, + phoneNumber: fullPhoneNumber + ) + currentSession = EnrollmentSession( + id: session.id, + type: session.type, + session: session.session, + totpInfo: session.totpInfo, + phoneNumber: fullPhoneNumber, + verificationId: verificationId, + status: .verificationSent, + createdAt: session.createdAt, + expiresAt: session.expiresAt + ) + } catch { + fail(error) + } + } + } + + private func enroll() { + guard let session = currentSession, + step.canEnroll(isValid: isValid, isLoading: isLoading) else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + let code = session.type == .sms ? verificationCode : totpCode + try await withReauthenticationIfNeeded( + authService: authService, + coordinator: reauthCoordinator + ) { + try await authService.completeEnrollment( + session: session, + verificationId: session.verificationId, + verificationCode: code, + displayName: displayName + ) + } + resetForm() + authService.navigator.clear() + } catch { + fail(error) + } + } + } + + private func copySecret() { + guard let secret = currentSession?.totpInfo?.sharedSecretKey else { return } + UIPasteboard.general.string = secret + didCopySecret = true + copyFeedback?.cancel() + copyFeedback = Task { + try? await Task.sleep(nanoseconds: 500_000_000) + guard !Task.isCancelled else { return } + didCopySecret = false + } + } + + private func fail(_ error: Error) { + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + + private func resetForm() { + currentSession = nil + phoneNumber = "" + selectedCountry = .default + verificationCode = "" + totpCode = "" + displayName = "" + } +} + +extension MFAEnrollmentContentState { + /// The factors in display order, SMS first. + static func sortedFactors(_ factors: Set) -> [SecondFactorType] { + factors.sorted { lhs, rhs in lhs == .sms && rhs == .totp } + } +} + +extension MFAEnrollmentContentState.Step { + /// The step for a started enrolment session. Sessions that have expired or finished go back to + /// ``selectFactor`` so the user can start again. + init(type: SecondFactorType, status: EnrollmentSession.EnrollmentStatus, isExpired: Bool) { + switch (type, status) { + case _ where isExpired, (_, .completed), (_, .failed), (_, .expired): + self = .selectFactor + case (.sms, .initiated): + self = .enterPhoneNumber + case (.sms, .verificationSent), (.sms, .verificationPending): + self = .enterVerificationCode + case (.totp, _): + self = .setUpTOTP + } + } + + /// Whether the input this step needs is complete. + func isValid(isMFAEnabled: Bool, + allowedFactors: [SecondFactorType], + selectedFactorType: SecondFactorType, + phoneNumber: String, + verificationCode: String, + totpCode: String, + displayName: String) -> Bool { + switch self { + case .selectFactor: + isMFAEnabled && allowedFactors.contains(selectedFactorType) + case .enterPhoneNumber: + !phoneNumber.isEmpty && !displayName.isEmpty + case .enterVerificationCode: + !verificationCode.isEmpty && !displayName.isEmpty + case .setUpTOTP: + !totpCode.isEmpty && !displayName.isEmpty + } + } + + /// Whether ``MFAEnrollmentContentState/startEnrollment`` runs from this step. + func canStartEnrollment(isValid: Bool, isLoading: Bool) -> Bool { + self == .selectFactor && isValid && !isLoading + } + + /// Whether ``MFAEnrollmentContentState/sendCode`` runs from this step. + func canSendCode(phoneNumber: String, displayName: String, isLoading: Bool) -> Bool { + (self == .enterPhoneNumber || self == .enterVerificationCode) + && !phoneNumber.isEmpty && !displayName.isEmpty && !isLoading + } + + /// Whether ``MFAEnrollmentContentState/enroll`` runs from this step. + func canEnroll(isValid: Bool, isLoading: Bool) -> Bool { + (self == .enterVerificationCode || self == .setUpTOTP) && isValid && !isLoading + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAEnrolmentView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAEnrolmentView.swift index 75b13b47657..cf61d3885c3 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAEnrolmentView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAEnrolmentView.swift @@ -12,637 +12,17 @@ // See the License for the specific language governing permissions and // limitations under the License. -import FirebaseAuth -import FirebaseAuthUIComponents import FirebaseCore import SwiftUI -private enum FocusableField: Hashable { - case phoneNumber - case verificationCode - case totpCode -} - @MainActor public struct MFAEnrolmentView { - @Environment(AuthService.self) private var authService - @Environment(\.reportError) private var reportError - - @State private var selectedFactorType: SecondFactorType = .sms - @State private var phoneNumber = "" - @State private var selectedCountry: CountryData = .default - @State private var verificationCode = "" - @State private var totpCode = "" - @State private var currentSession: EnrollmentSession? - @State private var isLoading = false - @State private var displayName = "" - @State private var showCopiedFeedback = false - @State private var reauthCoordinator = ReauthenticationCoordinator() - - @FocusState private var focus: FocusableField? - public init() {} - - private var allowedFactorTypes: [SecondFactorType] { - return Array(authService.configuration.allowedSecondFactors).sorted { lhs, rhs in - // Sort SMS first, then TOTP - switch (lhs, rhs) { - case (.sms, .totp): return true - case (.totp, .sms): return false - default: return false - } - } - } - - private var canStartEnrollment: Bool { - !isLoading && currentSession == nil && authService.configuration.mfaEnabled - } - - private var canSendSMSVerification: Bool { - currentSession?.type == .sms && - currentSession?.status == .initiated && - !phoneNumber.isEmpty && - !displayName.isEmpty && - !isLoading - } - - private var canCompleteEnrollment: Bool { - guard let session = currentSession, !isLoading else { return false } - - switch session.type { - case .sms: - return session.status == .verificationSent && !verificationCode.isEmpty && !displayName - .isEmpty - case .totp: - return session.status == .initiated && !totpCode.isEmpty && !displayName.isEmpty - } - } - - private func startEnrollment() { - Task { - isLoading = true - defer { isLoading = false } - - do { - let session = try await authService.startMfaEnrollment( - type: selectedFactorType, - accountName: authService.currentUser?.email, - issuer: authService.configuration.mfaIssuer - ) - currentSession = session - } catch { - reportError?(error) - } - } - } - - private func sendSMSVerification() { - guard let session = currentSession else { return } - - Task { - isLoading = true - defer { isLoading = false } - - do { - let fullPhoneNumber = selectedCountry.dialCode + phoneNumber - let verificationId = try await authService.sendSmsVerificationForEnrollment( - session: session, - phoneNumber: fullPhoneNumber - ) - // Update session status - currentSession = EnrollmentSession( - id: session.id, - type: session.type, - session: session.session, - totpInfo: session.totpInfo, - phoneNumber: fullPhoneNumber, - verificationId: verificationId, - status: .verificationSent, - createdAt: session.createdAt, - expiresAt: session.expiresAt - ) - } catch { - reportError?(error) - } - } - } - - private func completeEnrollment() { - guard let session = currentSession else { return } - - Task { - isLoading = true - defer { isLoading = false } - - do { - let code = session.type == .sms ? verificationCode : totpCode - try await withReauthenticationIfNeeded( - authService: authService, - coordinator: reauthCoordinator - ) { - try await authService.completeEnrollment( - session: session, - verificationId: session.verificationId, - verificationCode: code, - displayName: displayName - ) - } - - // Reset form state on success - resetForm() - - authService.navigator.clear() - } catch { - reportError?(error) - } - } - } - - private func resetForm() { - currentSession = nil - phoneNumber = "" - selectedCountry = .default - verificationCode = "" - totpCode = "" - displayName = "" - focus = nil - } - - private func copyToClipboard(_ text: String) { - UIPasteboard.general.string = text - - // Show feedback - showCopiedFeedback = true - - // Quickly show it has been copied to the clipboard - Task { - try? await Task.sleep(nanoseconds: 500_000_000) - showCopiedFeedback = false - } - } - - private func generateQRCode(from string: String) -> UIImage? { - let data = Data(string.utf8) - - guard let filter = CIFilter(name: "CIQRCodeGenerator") else { return nil } - filter.setValue(data, forKey: "inputMessage") - filter.setValue("H", forKey: "inputCorrectionLevel") - - guard let ciImage = filter.outputImage else { return nil } - - // Scale up the QR code for better quality - let transform = CGAffineTransform(scaleX: 10, y: 10) - let scaledImage = ciImage.transformed(by: transform) - - let context = CIContext() - guard let cgImage = context.createCGImage(scaledImage, from: scaledImage.extent) else { - return nil - } - - return UIImage(cgImage: cgImage) - } } extension MFAEnrolmentView: View { public var body: some View { - VStack(spacing: 24) { - // Header (only shown when no session is active) - if currentSession == nil { - VStack(spacing: 8) { - Text("Set Up Two-Factor Authentication") - .font(.largeTitle) - .fontWeight(.bold) - .multilineTextAlignment(.center) - - Text("Add an extra layer of security to your account") - .font(.subheadline) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - } - - // Factor Type Selection (only if no session started) - if currentSession == nil { - if !authService.configuration.mfaEnabled { - VStack(spacing: 12) { - Image(systemName: "lock.slash") - .font(.system(size: 40)) - .foregroundColor(.orange) - - Text("Multi-Factor Authentication Disabled") - .font(.title2) - .fontWeight(.semibold) - - Text( - "MFA is not enabled in the current configuration. Please contact your administrator." - ) - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - .accessibilityIdentifier("mfa-disabled-message") - } else if allowedFactorTypes.isEmpty { - VStack(spacing: 12) { - Image(systemName: "exclamationmark.triangle") - .font(.system(size: 40)) - .foregroundColor(.orange) - - Text("No Authentication Methods Available") - .font(.title2) - .fontWeight(.semibold) - - Text("No MFA methods are configured as allowed. Please contact your administrator.") - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - .accessibilityIdentifier("no-factors-message") - } else { - VStack(alignment: .leading, spacing: 12) { - Text("Choose Authentication Method") - .font(.headline) - - Picker("Authentication Method", selection: $selectedFactorType) { - ForEach(allowedFactorTypes, id: \.self) { factorType in - switch factorType { - case .sms: - Image(systemName: "message").tag(SecondFactorType.sms) - case .totp: - Image(systemName: "qrcode").tag(SecondFactorType.totp) - } - } - } - .pickerStyle(.segmented) - .accessibilityIdentifier("factor-type-picker") - } - } - } - - // Content based on current state - if let session = currentSession { - enrollmentContent(for: session) - } else { - initialContent - } - } - .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) - .safeAreaPadding() - .withReauthentication(coordinator: reauthCoordinator) - .navigationTitle("Two-Factor Authentication") - .onAppear { - // Initialize selected factor type to first allowed type - if !allowedFactorTypes.contains(selectedFactorType), - let firstAllowed = allowedFactorTypes.first { - selectedFactorType = firstAllowed - } - } - } - - @ViewBuilder - private var initialContent: some View { - VStack(spacing: 24) { - // Description based on selected type - if selectedFactorType == .sms { - VStack(spacing: 8) { - Image(systemName: "message.circle") - .font(.system(size: 40)) - .foregroundColor(.blue) - - Text("SMS Authentication") - .font(.title2) - .fontWeight(.semibold) - - Text("We'll send a verification code to your phone number each time you sign in.") - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - } else { - VStack(spacing: 8) { - Image(systemName: "qrcode") - .font(.system(size: 40)) - .foregroundColor(.green) - - Text("Authenticator App") - .font(.title2) - .fontWeight(.semibold) - - Text( - "Use an authenticator app like Google Authenticator or Authy to generate verification codes." - ) - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - } - - Button { - startEnrollment() - } label: { - HStack { - if isLoading { - ProgressView() - .scaleEffect(0.8) - } - Text("Get Started") - } - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .disabled(!canStartEnrollment) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("start-enrollment-button") - } - } - - @ViewBuilder - private func enrollmentContent(for session: EnrollmentSession) -> some View { - switch session.type { - case .sms: - smsEnrollmentContent(session: session) - case .totp: - totpEnrollmentContent(session: session) - } - } - - @ViewBuilder - private func smsEnrollmentContent(session: EnrollmentSession) -> some View { - VStack(spacing: 24) { - // SMS enrollment steps - if session.status == .initiated { - VStack(spacing: 24) { - VStack(spacing: 8) { - Image(systemName: "phone") - .font(.system(size: 48)) - .foregroundColor(.blue) - - Text("Enter Your Phone Number") - .font(.title2) - .fontWeight(.semibold) - - Text("We'll send a verification code to this number") - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - - AuthTextField( - text: $phoneNumber, - label: authService.string.phoneNumberFieldLabel, - prompt: authService.string.enterPhoneNumberPrompt, - keyboardType: .phonePad, - contentType: .telephoneNumber, - validations: [ - FormValidators.phoneNumber, - ], - maintainsValidationMessage: true, - onChange: { _ in } - ) { - CountrySelector( - selectedCountry: $selectedCountry, - enabled: !isLoading - ) - } - .focused($focus, equals: .phoneNumber) - .accessibilityIdentifier("phone-number-field") - - AuthTextField( - text: $displayName, - label: authService.string.displayNameFieldLabel, - prompt: authService.string.enterDisplayNameForDevicePrompt, - validations: [ - FormValidators.notEmpty(label: "Display name"), - ], - maintainsValidationMessage: true, - leading: { - Image(systemName: "person") - } - ) - .accessibilityIdentifier("display-name-field") - - Button { - sendSMSVerification() - } label: { - HStack { - if isLoading { - ProgressView() - .scaleEffect(0.8) - } - Text("Send Code") - } - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .disabled(!canSendSMSVerification) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("send-sms-button") - } - } else if session.status == .verificationSent { - VStack(spacing: 24) { - VStack(spacing: 8) { - Image(systemName: "checkmark.message") - .font(.system(size: 48)) - .foregroundColor(.green) - - Text("Enter Verification Code") - .font(.title2) - .fontWeight(.semibold) - - Text("We sent a code to \(session.phoneNumber ?? "your phone")") - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - - VerificationCodeInputField( - code: $verificationCode, - validations: [ - FormValidators.verificationCode, - ], - maintainsValidationMessage: true - ) - .accessibilityIdentifier("verification-code-field") - - Button { - completeEnrollment() - } label: { - HStack { - if isLoading { - ProgressView() - .scaleEffect(0.8) - } - Text("Complete Setup") - } - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .disabled(!canCompleteEnrollment) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("complete-enrollment-button") - - Button { - sendSMSVerification() - } label: { - Text("Resend Code") - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.bordered) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("resend-code-button") - } - } - } - } - - @ViewBuilder - private func totpEnrollmentContent(session: EnrollmentSession) -> some View { - VStack(spacing: 16) { - if let totpInfo = session.totpInfo { - VStack(spacing: 16) { - VStack(spacing: 6) { - Image(systemName: "qrcode") - .font(.system(size: 40)) - .foregroundColor(.green) - - Text("Scan QR Code") - .font(.title2) - .fontWeight(.semibold) - - Text("Scan with your authenticator app or tap to open directly") - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - .lineLimit(nil) - .padding(.horizontal) - } - - // QR Code generated from the otpauth:// URI - if let qrURL = totpInfo.qrCodeURL, - let qrImage = generateQRCode(from: qrURL.absoluteString) { - Button(action: { - UIApplication.shared.open(qrURL) - }) { - VStack(spacing: 8) { - Image(uiImage: qrImage) - .interpolation(.none) - .resizable() - .aspectRatio(contentMode: .fit) - .frame(width: 180, height: 180) - .accessibilityIdentifier("qr-code-image") - - HStack(spacing: 6) { - Image(systemName: "arrow.up.forward.app.fill") - .font(.caption) - Text("Tap to open in authenticator app") - .font(.caption) - .fontWeight(.medium) - } - .foregroundColor(.blue) - } - } - .buttonStyle(.plain) - .accessibilityIdentifier("open-authenticator-button") - } else { - RoundedRectangle(cornerRadius: 8) - .fill(Color.gray.opacity(0.3)) - .frame(width: 180, height: 180) - .overlay( - VStack { - Image(systemName: "exclamationmark.triangle") - .font(.title) - .foregroundColor(.orange) - Text("Unable to generate QR Code") - .font(.caption) - } - ) - } - - VStack(spacing: 6) { - Text("Manual Entry Key:") - .font(.headline) - - Button(action: { - copyToClipboard(totpInfo.sharedSecretKey) - }) { - HStack { - Text(totpInfo.sharedSecretKey) - .font(.system(.body, design: .monospaced)) - .lineLimit(1) - .minimumScaleFactor(0.5) - - Spacer() - - Image(systemName: showCopiedFeedback ? "checkmark" : "doc.on.doc") - .foregroundColor(showCopiedFeedback ? .green : .blue) - } - .padding() - .background(Color.gray.opacity(0.1)) - .cornerRadius(8) - } - .buttonStyle(.plain) - .accessibilityIdentifier("totp-secret-key") - - if showCopiedFeedback { - Text("Copied to clipboard!") - .font(.caption) - .foregroundColor(.green) - .transition(.opacity) - } - } - .animation(.easeInOut(duration: 0.2), value: showCopiedFeedback) - - AuthTextField( - text: $displayName, - label: authService.string.displayNameFieldLabel, - prompt: authService.string.enterDisplayNameForAuthenticatorPrompt, - validations: [ - FormValidators.notEmpty(label: "Display name"), - ], - maintainsValidationMessage: true, - leading: { - Image(systemName: "person") - } - ) - .accessibilityIdentifier("display-name-field") - - VerificationCodeInputField( - code: $totpCode, - validations: [ - FormValidators.verificationCode, - ], - maintainsValidationMessage: true - ) - .accessibilityIdentifier("totp-code-field") - - Button { - completeEnrollment() - } label: { - HStack { - if isLoading { - ProgressView() - .scaleEffect(0.8) - } - Text("Complete Setup") - } - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .disabled(!canCompleteEnrollment) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("complete-enrollment-button") - } - } - } + MFAEnrolmentScreen { DefaultMFAEnrolmentContent(state: $0) } } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAManagementScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAManagementScreen.swift new file mode 100644 index 00000000000..520d76f9ebf --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAManagementScreen.swift @@ -0,0 +1,152 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuth +import SwiftUI + +/// The state and actions of the MFA management screen, passed to ``MFAManagementScreen``'s +/// content. +public struct MFAManagementContentState { + /// Removes the enrolled factor with this `uid`, then updates ``enrolledFactors``. Asks the user + /// to reauthenticate first when Firebase requires it. Does nothing while ``isLoading`` is + /// `true`. + public let unenroll: @MainActor (_ factorUid: String) -> Void + + /// Pushes ``AuthView/mfaEnrollment``. + public let goToEnrollment: @MainActor () -> Void + + /// Re-reads ``enrolledFactors`` from the signed-in user and clears ``errorMessage``. + public let refresh: @MainActor () -> Void + + /// The current user's enrolled second factors. + public let enrolledFactors: [MultiFactorInfo] + + /// Whether an unenroll, including its reauthentication, is in flight, or the ``AuthService`` + /// is signing in. + public let isLoading: Bool + + /// The localized message of the last failed unenroll; cancelling reauthentication sets none. It + /// clears on ``refresh`` or when the next attempt starts. The sheet's error alert still shows + /// for the same failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(unenroll: @escaping @MainActor (_ factorUid: String) -> Void, + goToEnrollment: @escaping @MainActor () -> Void, + refresh: @escaping @MainActor () -> Void, + enrolledFactors: [MultiFactorInfo], + isLoading: Bool, + errorMessage: String?) { + self.unenroll = unenroll + self.goToEnrollment = goToEnrollment + self.refresh = refresh + self.enrolledFactors = enrolledFactors + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// The MFA management screen, with its content drawn by you. +/// +/// The screen loads the enrolled factors, unenrolls them, presents reauthentication when +/// Firebase requires it, navigates, and reports errors. Your content only draws the UI from the +/// ``MFAManagementContentState`` it receives. Wrap ``DefaultMFAManagementContent`` to keep the +/// stock markup. +/// +/// Example: +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerDestination { screen in +/// switch screen { +/// case .mfaManagement: +/// MFAManagementScreen { state in +/// ForEach(state.enrolledFactors) { factor in +/// Button("Remove \(factor.displayName ?? factor.uid)") { +/// state.unenroll(factor.uid) +/// } +/// .disabled(state.isLoading) +/// } +/// Button("Add method", action: state.goToEnrollment) +/// } +/// default: +/// DefaultAuthPickerDestination(screen: screen) +/// } +/// } +/// ``` +@MainActor +public struct MFAManagementScreen: View { + public init(@ViewBuilder content: @escaping (MFAManagementContentState) -> Content) { + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.reportError) private var reportError + @State private var enrolledFactors: [MultiFactorInfo] = [] + @State private var isWorking = false + @State private var errorMessage: String? + @State private var reauthCoordinator = ReauthenticationCoordinator() + + private let content: (MFAManagementContentState) -> Content + + public var body: some View { + // A single container, so the reauthentication sheets attach once even when the content + // returns several views, or none. + VStack(spacing: 0) { + content(MFAManagementContentState( + unenroll: unenroll, + goToEnrollment: { authService.navigator.push(.mfaEnrollment) }, + refresh: refresh, + enrolledFactors: enrolledFactors, + isLoading: isLoading, + errorMessage: errorMessage + )) + } + .withReauthentication(coordinator: reauthCoordinator) + .onAppear(perform: refresh) + } + + private var isLoading: Bool { + isWorking || authService.authenticationState == .authenticating + } + + private func refresh() { + errorMessage = nil + guard let user = authService.currentUser else { return } + enrolledFactors = user.multiFactor.enrolledFactors + } + + private func unenroll(_ factorUid: String) { + guard !isLoading else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + try await withReauthenticationIfNeeded( + authService: authService, + coordinator: reauthCoordinator + ) { + enrolledFactors = try await authService.unenrollMFA(factorUid) + } + } catch { + if case AuthServiceError.signInCancelled = error { + // The user backed out of reauthentication; nothing failed. + } else { + errorMessage = authService.string.localizedErrorMessage(for: error) + } + reportError?(error) + } + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAManagementView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAManagementView.swift index eeeddb45b08..03d18936994 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAManagementView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAManagementView.swift @@ -22,190 +22,15 @@ extension MultiFactorInfo: Identifiable { @MainActor public struct MFAManagementView { - @Environment(AuthService.self) private var authService - @Environment(\.reportError) private var reportError - - @State private var enrolledFactors: [MultiFactorInfo] = [] - @State private var isLoading = false - @State private var reauthCoordinator = ReauthenticationCoordinator() - public init() {} - - private func loadEnrolledFactors() { - guard let user = authService.currentUser else { return } - enrolledFactors = user.multiFactor.enrolledFactors - } - - private func unenrollFactor(_ factorUid: String) { - Task { - isLoading = true - - do { - try await withReauthenticationIfNeeded( - authService: authService, - coordinator: reauthCoordinator - ) { - let freshFactors = try await authService.unenrollMFA(factorUid) - enrolledFactors = freshFactors - } - isLoading = false - } catch { - reportError?(error) - isLoading = false - } - } - } - - private func navigateToEnrollment() { - authService.navigator.push(.mfaEnrollment) - } } extension MFAManagementView: View { public var body: some View { - VStack(spacing: 20) { - // Title section - VStack { - Text("Two-Factor Authentication") - .font(.largeTitle) - .fontWeight(.bold) - .multilineTextAlignment(.center) - - Text("Manage your authentication methods") - .font(.subheadline) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - .padding(.horizontal) - - if enrolledFactors.isEmpty { - // No factors enrolled - VStack(spacing: 16) { - Image(systemName: "shield.slash") - .font(.system(size: 48)) - .foregroundColor(.orange) - - Text("No Authentication Methods") - .font(.title2) - .fontWeight(.semibold) - - Text( - "Set up two-factor authentication to add an extra layer of security to your account." - ) - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - .padding(.horizontal) - - Button { - navigateToEnrollment() - } label: { - Text("Set Up Two-Factor Authentication") - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("setup-mfa-button") - } - } else { - // Show enrolled factors - VStack(alignment: .leading, spacing: 16) { - Text("Enrolled Methods") - .font(.headline) - .padding(.horizontal) - - ForEach(enrolledFactors) { factor in - factorRow(factor: factor) - } - - Divider() - .padding(.horizontal) - - Button("Add Another Method") { - navigateToEnrollment() - } - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .buttonStyle(.borderedProminent) - .accessibilityIdentifier("add-mfa-method-button") - } - } - - Spacer() - } - .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) - .safeAreaPadding() - .withReauthentication(coordinator: reauthCoordinator) - .onAppear { - loadEnrolledFactors() - } - } - - @ViewBuilder - private func factorRow(factor: MultiFactorInfo) -> some View { - HStack { - // Factor type icon - Group { - if factor.factorID == PhoneMultiFactorID { - Image(systemName: "message") - .foregroundColor(.blue) - } else { - Image(systemName: "qrcode") - .foregroundColor(.green) - } - } - .font(.title2) - - VStack(alignment: .leading, spacing: 4) { - Text(factor.displayName ?? authService.string.unnamedMethodLabel) - .font(.headline) - - if factor.factorID == PhoneMultiFactorID { - let phoneInfo = factor as! PhoneMultiFactorInfo - Text("SMS: \(phoneInfo.phoneNumber)") - .font(.caption) - .foregroundColor(.secondary) - } else { - Text("Authenticator App") - .font(.caption) - .foregroundColor(.secondary) - } - - Text("Enrolled: \(DateFormatter.shortDate.string(from: factor.enrollmentDate))") - .font(.caption2) - .foregroundColor(.secondary) - } - - Spacer() - - Button("Remove") { - unenrollFactor(factor.uid) - } - .buttonStyle(.bordered) - .foregroundColor(.red) - .disabled(isLoading) - .accessibilityIdentifier("remove-factor-\(factor.uid)") - } - .padding() - .background(Color(.systemGray6)) - .cornerRadius(8) - .padding(.horizontal) + MFAManagementScreen { DefaultMFAManagementContent(state: $0) } } } -// MARK: - Date Formatter Extension - -private extension DateFormatter { - static let shortDate: DateFormatter = { - let formatter = DateFormatter() - formatter.dateStyle = .short - formatter.timeStyle = .none - return formatter - }() -} - #Preview { FirebaseOptions.dummyConfigurationForPreview() return NavigationStack { diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAResolutionScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAResolutionScreen.swift new file mode 100644 index 00000000000..a764de6f45f --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAResolutionScreen.swift @@ -0,0 +1,221 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import SwiftUI + +/// The state and actions of the MFA resolution screen, passed to ``MFAResolutionScreen``'s +/// content. +public struct MFAResolutionContentState { + /// The index in ``hints`` of the factor the user resolves with. Setting it, even to the + /// current index, clears ``verificationCode``, ``totpCode`` and ``isCodeSent``. + public let selectedHintIndex: Binding + + /// The SMS code the user typed, for a phone hint. + public let verificationCode: Binding + + /// The authenticator app code the user typed, for a TOTP hint. + public let totpCode: Binding + + /// Sends an SMS code to the selected phone hint and sets ``isCodeSent``. Does nothing unless + /// the selected hint is a phone hint and ``isLoading`` is `false`. + public let sendCode: @MainActor () -> Void + + /// Completes sign-in with the code for the selected hint, then clears navigation. Does nothing + /// unless ``isValid`` is `true` and ``isLoading`` is `false`. + public let resolve: @MainActor () -> Void + + /// Abandons sign-in and clears navigation. + public let cancel: @MainActor () -> Void + + /// The second factors the user can resolve with. + public let hints: [MFAHint] + + /// Whether an SMS code was sent for the selected phone hint. + public let isCodeSent: Bool + + /// Whether the code for the selected hint is non-empty. + public let isValid: Bool + + /// Whether a send or resolve is in flight, or the ``AuthService`` is signing in. + public let isLoading: Bool + + /// The localized message of the last failed send or resolve. It clears when a code or the + /// selected hint changes or the next attempt starts. The sheet's error alert still shows for + /// the same failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(selectedHintIndex: Binding, + verificationCode: Binding, + totpCode: Binding, + sendCode: @escaping @MainActor () -> Void, + resolve: @escaping @MainActor () -> Void, + cancel: @escaping @MainActor () -> Void, + hints: [MFAHint], + isCodeSent: Bool, + isValid: Bool, + isLoading: Bool, + errorMessage: String?) { + self.selectedHintIndex = selectedHintIndex + self.verificationCode = verificationCode + self.totpCode = totpCode + self.sendCode = sendCode + self.resolve = resolve + self.cancel = cancel + self.hints = hints + self.isCodeSent = isCodeSent + self.isValid = isValid + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// The MFA resolution screen, with its content drawn by you. +/// +/// The screen sends SMS codes, completes sign-in with the second factor, navigates, and reports +/// errors. Your content only draws the UI from the ``MFAResolutionContentState`` it receives. +/// Wrap ``DefaultMFAResolutionContent`` to keep the stock markup. +/// +/// Example: +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerDestination { screen in +/// switch screen { +/// case let .mfaResolution(mfaRequired): +/// MFAResolutionScreen(mfaRequired: mfaRequired) { state in +/// TextField("Code", text: state.totpCode) +/// Button("Verify", action: state.resolve) +/// .disabled(!state.isValid || state.isLoading) +/// } +/// default: +/// DefaultAuthPickerDestination(screen: screen) +/// } +/// } +/// ``` +@MainActor +public struct MFAResolutionScreen: View { + public init(mfaRequired: MFARequired, + @ViewBuilder content: @escaping (MFAResolutionContentState) -> Content) { + self.mfaRequired = mfaRequired + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.reportError) private var reportError + @State private var selectedHintIndex = 0 + @State private var verificationCode = "" + @State private var totpCode = "" + @State private var verificationId: String? + @State private var isWorking = false + @State private var errorMessage: String? + + private let mfaRequired: MFARequired + private let content: (MFAResolutionContentState) -> Content + + public var body: some View { + // A single container, so the modifiers attach once even when the content returns several + // views. + VStack(spacing: 0) { + content(MFAResolutionContentState( + selectedHintIndex: Binding(get: { selectedHintIndex }, set: selectHint), + verificationCode: $verificationCode, + totpCode: $totpCode, + sendCode: sendCode, + resolve: resolve, + cancel: { authService.navigator.clear() }, + hints: mfaRequired.hints, + isCodeSent: verificationId != nil, + isValid: isValid, + isLoading: isLoading, + errorMessage: errorMessage + )) + } + .onChange(of: verificationCode) { errorMessage = nil } + .onChange(of: totpCode) { errorMessage = nil } + } + + private func selectHint(_ index: Int) { + selectedHintIndex = index + verificationCode = "" + totpCode = "" + verificationId = nil + errorMessage = nil + } + + private var selectedHint: MFAHint? { + guard mfaRequired.hints.indices.contains(selectedHintIndex) else { return nil } + return mfaRequired.hints[selectedHintIndex] + } + + private var isValid: Bool { + switch selectedHint { + case .phone: + return !verificationCode.isEmpty + case .totp: + return !totpCode.isEmpty + case .none: + return false + } + } + + private var isLoading: Bool { + isWorking || authService.authenticationState == .authenticating + } + + private func sendCode() { + guard case .phone = selectedHint, !isLoading else { return } + isWorking = true + errorMessage = nil + let hintIndex = selectedHintIndex + Task { + defer { isWorking = false } + do { + let id = try await authService.resolveSmsChallenge(hintIndex: hintIndex) + // Drop a code sent for a hint the user has since switched away from. + guard selectedHintIndex == hintIndex else { return } + verificationId = id + } catch { + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + } + } + + private func resolve() { + guard let selectedHint, isValid, !isLoading else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + let code: String + switch selectedHint { + case .phone: + code = verificationCode + case .totp: + code = totpCode + } + try await authService.resolveSignIn( + code: code, + hintIndex: selectedHintIndex, + verificationId: verificationId + ) + authService.navigator.clear() + } catch { + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + } + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAResolutionView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAResolutionView.swift index f6e88f94ea0..b53e34d81d8 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAResolutionView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/MFAResolutionView.swift @@ -12,354 +12,21 @@ // See the License for the specific language governing permissions and // limitations under the License. -import FirebaseAuth import FirebaseCore import SwiftUI -private enum FocusableField: Hashable { - case verificationCode - case totpCode -} - @MainActor public struct MFAResolutionView { let mfaRequired: MFARequired - @Environment(AuthService.self) private var authService - @Environment(\.reportError) private var reportError - - @State private var verificationCode = "" - @State private var totpCode = "" - @State private var isLoading = false - @State private var selectedHintIndex = 0 - @State private var verificationId: String? - - @FocusState private var focus: FocusableField? - public init(mfaRequired: MFARequired) { self.mfaRequired = mfaRequired } - - private var selectedHint: MFAHint? { - guard selectedHintIndex < mfaRequired.hints.count else { - return nil - } - return mfaRequired.hints[selectedHintIndex] - } - - private var canCompleteResolution: Bool { - guard !isLoading else { return false } - - switch selectedHint { - case .phone: - return !verificationCode.isEmpty - case .totp: - return !totpCode.isEmpty - case .none: - return false - } - } - - private func startSMSChallenge() { - guard selectedHintIndex < mfaRequired.hints.count else { return } - - Task { - isLoading = true - - do { - let verificationId = try await authService.resolveSmsChallenge(hintIndex: selectedHintIndex) - self.verificationId = verificationId - isLoading = false - } catch { - reportError?(error) - isLoading = false - } - } - } - - private func completeResolution() { - Task { - isLoading = true - - do { - let code = selectedHint?.isPhoneHint == true ? verificationCode : totpCode - try await authService.resolveSignIn( - code: code, - hintIndex: selectedHintIndex, - verificationId: verificationId - ) - // On success, the AuthService will update the authentication state - // and we should navigate back to the main app - authService.navigator.clear() - isLoading = false - } catch { - reportError?(error) - isLoading = false - } - } - } - - private func cancelResolution() { - authService.navigator.clear() - } } extension MFAResolutionView: View { public var body: some View { - VStack(spacing: 24) { - // Header - VStack(spacing: 12) { - Image(systemName: "lock.shield") - .font(.system(size: 50)) - .foregroundColor(.blue) - - Text("Two-Factor Authentication") - .font(.largeTitle) - .fontWeight(.bold) - .accessibilityIdentifier("mfa-resolution-title") - - Text("Complete sign-in with your second factor") - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - } - .padding(.horizontal) - - // MFA Hints Selection (if multiple available) - if mfaRequired.hints.count > 1 { - mfaHintsSelectionView(mfaRequired: mfaRequired) - } - - // Resolution Content - if let hint = selectedHint { - resolutionContent(for: hint) - } - - // Action buttons - VStack(spacing: 12) { - // Complete Resolution Button - Button(action: completeResolution) { - HStack { - if isLoading { - ProgressView() - .scaleEffect(0.8) - } - Text("Complete Sign-In") - } - .frame(maxWidth: .infinity) - .padding() - .background(canCompleteResolution ? Color.blue : Color.gray) - .foregroundColor(.white) - .cornerRadius(8) - } - .disabled(!canCompleteResolution) - .accessibilityIdentifier("complete-resolution-button") - - // Cancel Button - Button(action: cancelResolution) { - Text("Cancel") - .frame(maxWidth: .infinity) - .padding() - .background(Color.gray.opacity(0.2)) - .foregroundColor(.primary) - .cornerRadius(8) - } - .accessibilityIdentifier("cancel-button") - } - .padding(.horizontal) - } - .padding(.vertical, 20) - } - - @ViewBuilder - private func resolutionContent(for hint: MFAHint) -> some View { - switch hint { - case let .phone(displayName, _, phoneNumber): - phoneResolutionContent(displayName: displayName, phoneNumber: phoneNumber) - case let .totp(displayName, _): - totpResolutionContent(displayName: displayName) - } - } - - @ViewBuilder - private func phoneResolutionContent(displayName _: String?, phoneNumber: String?) -> some View { - VStack(spacing: 16) { - VStack(spacing: 8) { - Image(systemName: "message.circle.fill") - .font(.system(size: 40)) - .foregroundColor(.blue) - - Text("SMS Verification") - .font(.title2) - .fontWeight(.semibold) - - if let phoneNumber = phoneNumber { - Text("We'll send a code to ••••••\(String(phoneNumber.suffix(4)))") - .font(.body) - .foregroundColor(.secondary) - } else { - Text("We'll send a verification code to your phone") - .font(.body) - .foregroundColor(.secondary) - } - } - .padding(.horizontal) - - // Send SMS button (if verification ID not yet obtained) - if verificationId == nil { - Button(action: startSMSChallenge) { - HStack { - if isLoading { - ProgressView() - .scaleEffect(0.8) - } - Text("Send Code") - } - .frame(maxWidth: .infinity) - .padding() - .background(isLoading ? Color.gray : Color.blue) - .foregroundColor(.white) - .cornerRadius(8) - } - .disabled(isLoading) - .padding(.horizontal) - .accessibilityIdentifier("send-sms-button") - } else { - // Verification code input - VStack(alignment: .leading, spacing: 8) { - Text("Verification Code") - .font(.headline) - - TextField("Enter 6-digit code", text: $verificationCode) - .textFieldStyle(RoundedBorderTextFieldStyle()) - .keyboardType(.numberPad) - .focused($focus, equals: .verificationCode) - .accessibilityIdentifier("sms-verification-code-field") - } - .padding(.horizontal) - } - } - } - - @ViewBuilder - private func totpResolutionContent(displayName: String?) -> some View { - VStack(spacing: 16) { - VStack(spacing: 8) { - Image(systemName: "qrcode") - .font(.system(size: 40)) - .foregroundColor(.green) - - Text("Authenticator App") - .font(.title2) - .fontWeight(.semibold) - - Text("Enter the 6-digit code from your authenticator app") - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - - if let displayName = displayName { - Text(authService.string.accountPrefix(displayName: displayName)) - .font(.caption) - .foregroundColor(.secondary) - } - } - .padding(.horizontal) - - // TOTP code input - VStack(alignment: .leading, spacing: 8) { - Text("Verification Code") - .font(.headline) - - TextField("Enter 6-digit code", text: $totpCode) - .textFieldStyle(RoundedBorderTextFieldStyle()) - .keyboardType(.numberPad) - .focused($focus, equals: .totpCode) - .accessibilityIdentifier("totp-verification-code-field") - } - .padding(.horizontal) - } - } - - @ViewBuilder - private func mfaHintsSelectionView(mfaRequired: MFARequired) -> some View { - VStack(alignment: .leading, spacing: 12) { - Text("Choose verification method:") - .font(.headline) - .padding(.horizontal) - - // More idiomatic approach using indices - ForEach(mfaRequired.hints.indices, id: \.self) { index in - let hint = mfaRequired.hints[index] - hintSelectionButton(hint: hint, index: index) - } - } - } - - @ViewBuilder - private func hintSelectionButton(hint: MFAHint, index: Int) -> some View { - Button(action: { - selectedHintIndex = index - // Clear previous input when switching methods - verificationCode = "" - totpCode = "" - verificationId = nil - }) { - HStack { - Image(systemName: hint.isPhoneHint ? "message.circle" : "qrcode") - .foregroundColor(.blue) - - VStack(alignment: .leading) { - Text(hintDisplayName(for: hint)) - .font(.body) - .foregroundColor(.primary) - - hintSubtitle(for: hint) - } - - Spacer() - - if selectedHintIndex == index { - Image(systemName: "checkmark.circle.fill") - .foregroundColor(.blue) - } - } - .padding() - .background(selectedHintIndex == index ? Color.blue.opacity(0.1) : Color.clear) - .cornerRadius(8) - .overlay( - RoundedRectangle(cornerRadius: 8) - .stroke(selectedHintIndex == index ? Color.blue : Color.gray.opacity(0.3), lineWidth: 1) - ) - } - .buttonStyle(PlainButtonStyle()) - .padding(.horizontal) - .accessibilityIdentifier("hint-\(index)") - } - - private func hintDisplayName(for hint: MFAHint) -> String { - hint.isPhoneHint ? "SMS" : "Authenticator App" - } - - @ViewBuilder - private func hintSubtitle(for hint: MFAHint) -> some View { - if case let .phone(_, _, phoneNumber) = hint, let phone = phoneNumber { - Text("••••••\(String(phone.suffix(4)))") - .font(.caption) - .foregroundColor(.secondary) - } - } -} - -// Helper extension for MFAHint -private extension MFAHint { - var isPhoneHint: Bool { - switch self { - case .phone: - return true - case .totp: - return false - } + MFAResolutionScreen(mfaRequired: mfaRequired) { DefaultMFAResolutionContent(state: $0) } } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PasswordRecoveryScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PasswordRecoveryScreen.swift new file mode 100644 index 00000000000..23f1f95abcd --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PasswordRecoveryScreen.swift @@ -0,0 +1,161 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import SwiftUI + +/// The state and actions of the password recovery screen, passed to +/// ``PasswordRecoveryScreen``'s content. +public struct PasswordRecoveryContentState { + /// The email address to send the reset link to. + public let email: Binding + + /// Sends a password reset link to ``email``, then sets ``didSend``. Does nothing unless + /// ``isValid`` is `true` and ``isLoading`` is `false`. + public let sendResetLink: @MainActor () -> Void + + /// Clears ``didSend`` and ``email`` and returns to the first screen of the sheet. + public let dismissSuccess: @MainActor () -> Void + + /// Clears ``didSend``, keeping ``email`` and staying on this screen, for example when the + /// user swipes a success sheet away. + public let hideSuccess: @MainActor () -> Void + + /// Whether a reset link was sent and neither ``dismissSuccess`` nor ``hideSuccess`` has been + /// called since. + public let didSend: Bool + + /// The address the last reset link was sent to; empty until one is sent. + public let sentEmail: String + + /// Whether ``email`` is a valid email address. + public let isValid: Bool + + /// Whether a reset link is being sent, or the ``AuthService`` is signing in. + public let isLoading: Bool + + /// The localized message of the last failed attempt. It clears when the email changes or the + /// next attempt starts. The sheet's error alert still shows for the same failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(email: Binding, + sendResetLink: @escaping @MainActor () -> Void, + dismissSuccess: @escaping @MainActor () -> Void, + hideSuccess: @escaping @MainActor () -> Void, + didSend: Bool, + sentEmail: String, + isValid: Bool, + isLoading: Bool, + errorMessage: String?) { + self.email = email + self.sendResetLink = sendResetLink + self.dismissSuccess = dismissSuccess + self.hideSuccess = hideSuccess + self.didSend = didSend + self.sentEmail = sentEmail + self.isValid = isValid + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// The password recovery screen, with its content drawn by you. +/// +/// The screen sends the reset link, navigates, and reports errors. Your content only draws the +/// UI from the ``PasswordRecoveryContentState`` it receives. Wrap +/// ``DefaultPasswordRecoveryContent`` to keep the stock markup. +/// +/// Example: +/// ```swift +/// AuthPickerView { authenticatedApp } +/// .pickerDestination { screen in +/// switch screen { +/// case .passwordRecovery: +/// PasswordRecoveryScreen { state in +/// if state.didSend { +/// Text("Check \(state.sentEmail)") +/// Button("OK", action: state.dismissSuccess) +/// } else { +/// TextField("Email", text: state.email) +/// Button("Send reset link", action: state.sendResetLink) +/// .disabled(!state.isValid || state.isLoading) +/// } +/// } +/// default: +/// DefaultAuthPickerDestination(screen: screen) +/// } +/// } +/// ``` +@MainActor +public struct PasswordRecoveryScreen: View { + public init(@ViewBuilder content: @escaping (PasswordRecoveryContentState) -> Content) { + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.reportError) private var reportError + @State private var email = "" + @State private var didSend = false + @State private var sentEmail = "" + @State private var isWorking = false + @State private var errorMessage: String? + + private let content: (PasswordRecoveryContentState) -> Content + + public var body: some View { + content(PasswordRecoveryContentState( + email: $email, + sendResetLink: sendResetLink, + dismissSuccess: dismissSuccess, + hideSuccess: { didSend = false }, + didSend: didSend, + sentEmail: sentEmail, + isValid: isValid, + isLoading: isLoading, + errorMessage: errorMessage + )) + .onChange(of: email) { errorMessage = nil } + } + + private var isValid: Bool { + CommonUtils.isValidEmail(email) + } + + private var isLoading: Bool { + isWorking || authService.authenticationState == .authenticating + } + + private func sendResetLink() { + guard isValid, !isLoading else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + try await authService.sendPasswordRecoveryEmail(email: email) + sentEmail = email + didSend = true + } catch { + errorMessage = authService.string.localizedErrorMessage(for: error) + reportError?(error) + } + } + } + + private func dismissSuccess() { + didSend = false + email = "" + authService.navigator.clear() + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PasswordRecoveryView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PasswordRecoveryView.swift index af14a1c1676..93a9a4f5af1 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PasswordRecoveryView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PasswordRecoveryView.swift @@ -12,93 +12,17 @@ // See the License for the specific language governing permissions and // limitations under the License. -import FirebaseAuthUIComponents import FirebaseCore import SwiftUI @MainActor public struct PasswordRecoveryView { - @Environment(AuthService.self) private var authService - @State private var email = "" - @State private var showSuccessSheet = false - @State private var sentEmail = "" - public init() {} - - private func sendPasswordRecoveryEmail() async { - do { - try await authService.sendPasswordRecoveryEmail(email: email) - sentEmail = email - showSuccessSheet = true - } catch { - // Error already displayed via modal by AuthService - } - } } extension PasswordRecoveryView: View { public var body: some View { - VStack(spacing: 24) { - AuthTextField( - text: $email, - label: authService.string.passwordRecoveryEmailFieldLabel, - prompt: authService.string.emailInputLabel, - keyboardType: .emailAddress, - contentType: .emailAddress, - validations: [ - FormValidators.email, - ], - leading: { - Image(systemName: "at") - } - ) - Button(action: { - Task { - await sendPasswordRecoveryEmail() - } - }) { - Text(authService.string.forgotPasswordInputLabel) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .disabled(!CommonUtils.isValidEmail(email)) - .frame(maxWidth: .infinity) - .buttonStyle(.borderedProminent) - } - .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) - .navigationTitle(authService.string.passwordRecoveryTitle) - .safeAreaPadding() - .sheet(isPresented: $showSuccessSheet) { - successSheet - } - } - - @ViewBuilder - @MainActor - private var successSheet: some View { - VStack { - Text(authService.string.passwordRecoveryEmailSentTitle) - .font(.largeTitle) - .fontWeight(.bold) - .padding() - Text(authService.string.passwordRecoveryHelperMessage) - .padding() - - Divider() - - Text(String(format: authService.string.passwordRecoveryEmailSentMessage, sentEmail)) - .padding() - - Divider() - - Button(authService.string.okButtonLabel) { - showSuccessSheet = false - email = "" - authService.navigator.clear() - } - .padding() - } - .padding() + PasswordRecoveryScreen { DefaultPasswordRecoveryContent(state: $0) } } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PhoneReauthView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PhoneReauthView.swift index 10821e9b7c9..deed8e5799d 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PhoneReauthView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PhoneReauthView.swift @@ -91,11 +91,11 @@ extension PhoneReauthView: View { .foregroundColor(.blue) Text(authService.string.verifyPhoneNumberTitle) - .font(.title) + .authFont(.title) .fontWeight(.bold) Text(authService.string.forSecurityVerifyPhoneMessage) - .font(.body) + .authFont(.body) .foregroundColor(.secondary) .multilineTextAlignment(.center) } @@ -105,12 +105,12 @@ extension PhoneReauthView: View { // Initial state - sending SMS VStack(spacing: 20) { Text(authService.string.sendVerificationCodeToPhonePrefix) - .font(.subheadline) + .authFont(.subheadline) .foregroundStyle(.secondary) .frame(maxWidth: .infinity, alignment: .leading) Text(phoneNumber) - .font(.headline) + .authFont(.headline) .frame(maxWidth: .infinity, alignment: .leading) .padding(.bottom, 8) @@ -127,7 +127,7 @@ extension PhoneReauthView: View { .frame(maxWidth: .infinity) } } - .buttonStyle(.borderedProminent) + .authCTAButtonStyle() .disabled(isLoading) .accessibilityIdentifier("send-verification-code-button") Button(authService.string.cancelButtonLabel) { @@ -139,12 +139,12 @@ extension PhoneReauthView: View { // Enter verification code VStack(spacing: 20) { Text(authService.string.enterSixDigitCodeSentToPrefix) - .font(.subheadline) + .authFont(.subheadline) .foregroundStyle(.secondary) .frame(maxWidth: .infinity, alignment: .leading) Text(phoneNumber) - .font(.caption) + .authFont(.caption) .frame(maxWidth: .infinity, alignment: .leading) .padding(.bottom, 8) @@ -170,7 +170,7 @@ extension PhoneReauthView: View { .frame(maxWidth: .infinity) } } - .buttonStyle(.borderedProminent) + .authCTAButtonStyle() .disabled(verificationCode.count != 6 || isLoading) .accessibilityIdentifier("verify-button") diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PrivacyTOCsView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PrivacyTOCsView.swift index f5e6bfb6381..629532a8233 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PrivacyTOCsView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/PrivacyTOCsView.swift @@ -18,6 +18,7 @@ // // Created by Russell Wheatley on 12/05/2025. // +import FirebaseAuthUIComponents import FirebaseCore import SwiftUI @@ -66,6 +67,7 @@ extension PrivacyTOCsView: View { if let tosURL = authService.configuration.tosUrl, let privacyURL = authService.configuration.privacyPolicyUrl { Text(attributedMessage(tosURL: tosURL, privacyURL: privacyURL)) + .authCustomFont(.body) .multilineTextAlignment(displayMode == .full ? .center : .trailing) .padding() } else { diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/ReauthenticationModifier.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/ReauthenticationModifier.swift index b20b23a59f0..3cb7bd8a1a7 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/ReauthenticationModifier.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/ReauthenticationModifier.swift @@ -55,7 +55,7 @@ struct ReauthenticationModifier: ViewModifier { } } // Sheet for phone reauthentication - .sheet(isPresented: $coordinator.showingPhoneReauth) { + .sheet(isPresented: $coordinator.showingPhoneReauth, onDismiss: cancelIfPending) { if case let .phone(context) = coordinator.reauthContext { PhoneReauthView( phoneNumber: context.phoneNumber, @@ -64,7 +64,7 @@ struct ReauthenticationModifier: ViewModifier { } } // Sheet for email reauthentication - .sheet(isPresented: $coordinator.showingEmailPasswordPrompt) { + .sheet(isPresented: $coordinator.showingEmailPasswordPrompt, onDismiss: cancelIfPending) { if case let .email(context) = coordinator.reauthContext { EmailReauthView( email: context.email, @@ -89,7 +89,7 @@ struct ReauthenticationModifier: ViewModifier { } } // Sheet for email link reauthentication - .sheet(isPresented: $coordinator.showingEmailLinkReauth) { + .sheet(isPresented: $coordinator.showingEmailLinkReauth, onDismiss: cancelIfPending) { if case let .emailLink(context) = coordinator.reauthContext { EmailLinkReauthView( email: context.email, @@ -99,6 +99,13 @@ struct ReauthenticationModifier: ViewModifier { } } + /// Treats a sheet swiped away mid-flow as a cancel, so the waiting operation finishes. + private func cancelIfPending() { + if coordinator.reauthContext != nil { + coordinator.reauthCancelled() + } + } + private func performReauth() { Task { do { diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/SignedInScreen.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/SignedInScreen.swift new file mode 100644 index 00000000000..831ec64adc6 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/SignedInScreen.swift @@ -0,0 +1,247 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuth +import SwiftUI + +/// The state and actions of the signed-in screen, passed to the content of +/// ``AuthPickerView/signedInContent(_:)``. +public struct SignedInContentState { + /// Signs the user out. Does nothing while ``isLoading`` is `true`. + public let signOut: @MainActor () -> Void + + /// Asks the user to confirm, then deletes the account, reauthenticating first when Firebase + /// requires it. Does nothing while ``isLoading`` is `true`. + public let deleteAccount: @MainActor () -> Void + + /// Pushes ``AuthView/updatePassword``. + public let updatePassword: @MainActor () -> Void + + /// Sends a verification email to the user, then shows an alert telling them to tap the link. + /// Does nothing while ``isLoading`` is `true`. + public let verifyEmail: @MainActor () -> Void + + /// Pushes ``AuthView/mfaManagement``. Offer it only when ``isMFAEnabled`` is `true`. + public let goToMFAManagement: @MainActor () -> Void + + /// The signed-in user. + public let user: User? + + /// Whether the user's email is verified; `true` when there is no user. + public let isEmailVerified: Bool + + /// Whether ``AuthConfiguration/mfaEnabled`` is set. Offer ``goToMFAManagement`` only when it is + /// `true`. + public let isMFAEnabled: Bool + + /// Whether a sign out, account deletion or verification email is in flight. + public let isLoading: Bool + + /// The localized message of the last failed sign out, account deletion or verification email. + /// It clears when the next of those starts, and stays `nil` when the user cancels + /// reauthentication. The sheet's error alert still shows for the same failure. + public let errorMessage: String? + + /// Creates a state, for example to preview custom content with stub actions. + public init(signOut: @escaping @MainActor () -> Void, + deleteAccount: @escaping @MainActor () -> Void, + updatePassword: @escaping @MainActor () -> Void, + verifyEmail: @escaping @MainActor () -> Void, + goToMFAManagement: @escaping @MainActor () -> Void, + user: User?, + isEmailVerified: Bool, + isMFAEnabled: Bool, + isLoading: Bool, + errorMessage: String?) { + self.signOut = signOut + self.deleteAccount = deleteAccount + self.updatePassword = updatePassword + self.verifyEmail = verifyEmail + self.goToMFAManagement = goToMFAManagement + self.user = user + self.isEmailVerified = isEmailVerified + self.isMFAEnabled = isMFAEnabled + self.isLoading = isLoading + self.errorMessage = errorMessage + } +} + +/// Runs the signed-in screen's actions, delete confirmation, reauthentication and alerts, and +/// draws its content from the ``SignedInContentState`` it builds. +@MainActor +struct SignedInScreen: View { + init(@ViewBuilder content: @escaping (SignedInContentState) -> Content) { + self.content = content + } + + @Environment(AuthService.self) private var authService + @Environment(\.reportError) private var reportError + @State private var showDeleteConfirmation = false + @State private var showEmailVerificationSent = false + @State private var reauthCoordinator = ReauthenticationCoordinator() + @State private var isWorking = false + @State private var errorMessage: String? + + private let content: (SignedInContentState) -> Content + + var body: some View { + // A single container, so the sheet and alerts below attach once even when the content is + // several views. + VStack { + content(state) + } + .withReauthentication(coordinator: reauthCoordinator) + .sheet(isPresented: $showDeleteConfirmation) { + DeleteAccountConfirmationSheet( + onConfirm: { + showDeleteConfirmation = false + deleteAccount() + }, + onCancel: { + showDeleteConfirmation = false + } + ) + .presentationDetents([.medium]) + } + .alert( + authService.string.verifyEmailSheetMessage, + isPresented: $showEmailVerificationSent + ) { + Button(authService.string.okButtonLabel) { + showEmailVerificationSent = false + } + } message: { + Text(authService.string.emailVerificationTapLinkMessage) + } + } + + private var state: SignedInContentState { + SignedInContentState( + signOut: signOut, + deleteAccount: { + if !isWorking { + showDeleteConfirmation = true + } + }, + updatePassword: { authService.navigator.push(.updatePassword) }, + verifyEmail: verifyEmail, + goToMFAManagement: { authService.navigator.push(.mfaManagement) }, + user: authService.currentUser, + isEmailVerified: authService.currentUser?.isEmailVerified != false, + isMFAEnabled: authService.configuration.mfaEnabled, + isLoading: isWorking, + errorMessage: errorMessage + ) + } + + private func signOut() { + perform { try await authService.signOut() } + } + + private func verifyEmail() { + perform { + try await authService.sendEmailVerification() + showEmailVerificationSent = true + } + } + + private func deleteAccount() { + perform { + try await withReauthenticationIfNeeded( + authService: authService, + coordinator: reauthCoordinator + ) { + try await authService.deleteUser() + } + } + } + + private func perform(_ action: @escaping @MainActor () async throws -> Void) { + guard !isWorking else { return } + isWorking = true + errorMessage = nil + Task { + defer { isWorking = false } + do { + try await action() + } catch { + if case AuthServiceError.signInCancelled = error { + // The user dismissed reauthentication; the sheet still reports it, as before. + } else { + errorMessage = authService.string.localizedErrorMessage(for: error) + } + reportError?(error) + } + } + } +} + +private struct DeleteAccountConfirmationSheet: View { + @Environment(AuthService.self) private var authService + let onConfirm: () -> Void + let onCancel: () -> Void + + var body: some View { + VStack(spacing: 24) { + VStack(spacing: 12) { + Image(systemName: "exclamationmark.triangle.fill") + .font(.system(size: 60)) + .foregroundColor(.red) + + Text("Delete Account?") + .authFont(.title) + .fontWeight(.bold) + + Text( + "This action cannot be undone. All your data will be permanently deleted. You may need to reauthenticate to complete this action." + ) + .authFont(.body) + .foregroundColor(.secondary) + .multilineTextAlignment(.center) + .padding(.horizontal) + } + + VStack(spacing: 12) { + Button { + onConfirm() + } label: { + Text("Delete Account") + .authCustomFont(.body) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .buttonStyle(.borderedProminent) + .tint(.red) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("confirm-delete-button") + + Button { + onCancel() + } label: { + Text("Cancel") + .authCustomFont(.body) + .padding(.vertical, 8) + .frame(maxWidth: .infinity) + } + .buttonStyle(.bordered) + .padding([.top, .bottom], 8) + .frame(maxWidth: .infinity) + .accessibilityIdentifier("cancel-delete-button") + } + } + .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) + .safeAreaPadding() + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/SignedInView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/SignedInView.swift index e996ccc5b36..43198057981 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/SignedInView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/SignedInView.swift @@ -15,210 +15,17 @@ import FirebaseCore import SwiftUI +/// The stock signed-in screen: ``DefaultSignedInContent`` with the library's account actions. The +/// authentication sheet shows it to signed-in users unless you replace it with +/// ``AuthPickerView/signedInContent(_:)``. @MainActor public struct SignedInView { - @Environment(AuthService.self) private var authService - @Environment(\.reportError) private var reportError - @State private var showDeleteConfirmation = false - @State private var showEmailVerificationSent = false - @State private var reauthCoordinator = ReauthenticationCoordinator() - - private func sendEmailVerification() async throws { - do { - try await authService.sendEmailVerification() - showEmailVerificationSent = true - } catch { - if let errorHandler = reportError { - errorHandler(error) - } else { - throw error - } - } - } + public init() {} } extension SignedInView: View { public var body: some View { - VStack { - Text(authService.string.signedInTitle) - .font(.largeTitle) - .fontWeight(.bold) - .padding() - .accessibilityIdentifier("signed-in-text") - Text( - "\(authService.currentUser?.email ?? authService.currentUser?.displayName ?? authService.currentUser?.phoneNumber ?? "")" - ) - if authService.currentUser?.isEmailVerified == false { - Button { - Task { - try await sendEmailVerification() - } - } label: { - Text(authService.string.sendEmailVerificationButtonLabel) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("verify-email-button") - } - Button { - authService.navigator.push(.updatePassword) - } label: { - Text(authService.string.updatePasswordButtonLabel) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("update-password-button") - - if authService.configuration.mfaEnabled { - Button { - authService.navigator.push(.mfaManagement) - } label: { - Text(authService.string.manageTwoFactorAuthenticationLabel) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("mfa-management-button") - } - - Button { - showDeleteConfirmation = true - } label: { - Text(authService.string.deleteAccountButtonLabel) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("delete-account-button") - - Button { - Task { - do { - try await authService.signOut() - } catch { - if let errorHandler = reportError { - errorHandler(error) - } else { - throw error - } - } - } - } label: { - Text(authService.string.signOutButtonLabel) - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("sign-out-button") - } - .safeAreaPadding() - .withReauthentication(coordinator: reauthCoordinator) - .sheet(isPresented: $showDeleteConfirmation) { - DeleteAccountConfirmationSheet( - onConfirm: { - showDeleteConfirmation = false - Task { - do { - try await withReauthenticationIfNeeded( - authService: authService, - coordinator: reauthCoordinator - ) { - try await authService.deleteUser() - } - } catch { - if let errorHandler = reportError { - errorHandler(error) - } else { - throw error - } - } - } - }, - onCancel: { - showDeleteConfirmation = false - } - ) - .presentationDetents([.medium]) - } - .alert( - authService.string.verifyEmailSheetMessage, - isPresented: $showEmailVerificationSent - ) { - Button(authService.string.okButtonLabel) { - showEmailVerificationSent = false - } - } message: { - Text(authService.string.emailVerificationTapLinkMessage) - } - } -} - -private struct DeleteAccountConfirmationSheet: View { - @Environment(AuthService.self) private var authService - let onConfirm: () -> Void - let onCancel: () -> Void - - var body: some View { - VStack(spacing: 24) { - VStack(spacing: 12) { - Image(systemName: "exclamationmark.triangle.fill") - .font(.system(size: 60)) - .foregroundColor(.red) - - Text("Delete Account?") - .font(.title) - .fontWeight(.bold) - - Text( - "This action cannot be undone. All your data will be permanently deleted. You may need to reauthenticate to complete this action." - ) - .font(.body) - .foregroundColor(.secondary) - .multilineTextAlignment(.center) - .padding(.horizontal) - } - - VStack(spacing: 12) { - Button { - onConfirm() - } label: { - Text("Delete Account") - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.borderedProminent) - .tint(.red) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("confirm-delete-button") - - Button { - onCancel() - } label: { - Text("Cancel") - .padding(.vertical, 8) - .frame(maxWidth: .infinity) - } - .buttonStyle(.bordered) - .padding([.top, .bottom], 8) - .frame(maxWidth: .infinity) - .accessibilityIdentifier("cancel-delete-button") - } - } - .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) - .safeAreaPadding() + SignedInScreen { DefaultSignedInContent(state: $0) } } } diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/UpdatePasswordView.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/UpdatePasswordView.swift index 8480beb818b..9e6e3912c1b 100644 --- a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/UpdatePasswordView.swift +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Sources/Views/UpdatePasswordView.swift @@ -104,7 +104,7 @@ extension UpdatePasswordView: View { .disabled(!isValid) .padding([.top, .bottom], 8) .frame(maxWidth: .infinity) - .buttonStyle(.borderedProminent) + .authCTAButtonStyle() } .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top) .safeAreaPadding() diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Tests/FirebaseAuthSwiftUITests/AuthMethodPickerStateTests.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Tests/FirebaseAuthSwiftUITests/AuthMethodPickerStateTests.swift new file mode 100644 index 00000000000..c88876b984c --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Tests/FirebaseAuthSwiftUITests/AuthMethodPickerStateTests.swift @@ -0,0 +1,100 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuth +@testable import FirebaseAuthSwiftUI +import Foundation +import Testing + +/// Records which handler `AuthMethodPickerState.route` called. +@MainActor +private final class RouteRecorder { + var mfa: MFARequired? + var conflict: AccountConflictContext? + var error: Error? + + func route(_ result: Result, handlesConflicts: Bool = true) { + AuthMethodPickerState.route( + result, + mfaHandler: { self.mfa = $0 }, + accountConflictHandler: handlesConflicts ? { self.conflict = $0 } : nil, + reportError: { self.error = $0 } + ) + } +} + +private struct TestError: Error {} + +private func conflictContext() -> AccountConflictContext { + AccountConflictContext( + conflictType: .accountExistsWithDifferentCredential, + credential: EmailAuthProvider.credential(withEmail: "test@example.com", password: "123456"), + underlyingError: TestError(), + message: "conflict", + email: "test@example.com" + ) +} + +@Suite("AuthMethodPickerState routing") +@MainActor +struct AuthMethodPickerStateRoutingTests { + @Test("MFA required goes to the MFA handler") + func mfaRequired() { + let recorder = RouteRecorder() + let mfa = MFARequired(hints: [.totp(displayName: nil, uid: "uid")]) + recorder.route(.success(.mfaRequired(mfa))) + #expect(recorder.mfa == mfa) + #expect(recorder.conflict == nil) + #expect(recorder.error == nil) + } + + @Test("A completed sign-in calls no handler") + func signedIn() { + let recorder = RouteRecorder() + recorder.route(.success(.signedIn(nil))) + recorder.route(.success(nil)) + #expect(recorder.mfa == nil) + #expect(recorder.conflict == nil) + #expect(recorder.error == nil) + } + + @Test("An account conflict goes to the conflict handler") + func accountConflict() { + let recorder = RouteRecorder() + let context = conflictContext() + recorder.route(.failure(AuthServiceError.accountConflict(context))) + #expect(recorder.conflict == context) + #expect(recorder.error == nil) + } + + @Test("An account conflict is reported when there is no conflict handler") + func accountConflictWithoutHandler() { + let recorder = RouteRecorder() + recorder.route( + .failure(AuthServiceError.accountConflict(conflictContext())), + handlesConflicts: false + ) + #expect(recorder.conflict == nil) + #expect(recorder.error != nil) + } + + @Test("Other errors are reported") + func otherError() { + let recorder = RouteRecorder() + recorder.route(.failure(TestError())) + #expect(recorder.error is TestError) + #expect(recorder.mfa == nil) + #expect(recorder.conflict == nil) + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthSwiftUI/Tests/FirebaseAuthSwiftUITests/MFAEnrolmentScreenTests.swift b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Tests/FirebaseAuthSwiftUITests/MFAEnrolmentScreenTests.swift new file mode 100644 index 00000000000..89c667e6b1c --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthSwiftUI/Tests/FirebaseAuthSwiftUITests/MFAEnrolmentScreenTests.swift @@ -0,0 +1,138 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +@testable import FirebaseAuthSwiftUI +import Testing + +private typealias Step = MFAEnrollmentContentState.Step + +@Suite("MFAEnrolmentScreen Tests") +struct MFAEnrolmentScreenTests { + @Test("Allowed factors list SMS first") + func sortedFactorsListSMSFirst() { + #expect(MFAEnrollmentContentState.sortedFactors([.totp, .sms]) == [.sms, .totp]) + #expect(MFAEnrollmentContentState.sortedFactors([.totp]) == [.totp]) + #expect(MFAEnrollmentContentState.sortedFactors([]).isEmpty) + } + + @Test("SMS sessions map to the phone number and code steps") + func smsSessionSteps() { + #expect(Step(type: .sms, status: .initiated, isExpired: false) == .enterPhoneNumber) + #expect(Step(type: .sms, status: .verificationSent, isExpired: false) + == .enterVerificationCode) + #expect(Step(type: .sms, status: .verificationPending, isExpired: false) + == .enterVerificationCode) + } + + @Test("TOTP sessions map to the authenticator step") + func totpSessionSteps() { + #expect(Step(type: .totp, status: .initiated, isExpired: false) == .setUpTOTP) + #expect(Step(type: .totp, status: .verificationPending, isExpired: false) == .setUpTOTP) + } + + @Test("Finished sessions go back to factor selection") + func finishedSessionsSelectFactor() { + let statuses: [EnrollmentSession.EnrollmentStatus] = [.completed, .failed, .expired] + for status in statuses { + #expect(Step(type: .sms, status: status, isExpired: false) == .selectFactor) + #expect(Step(type: .totp, status: status, isExpired: false) == .selectFactor) + } + } + + @Test("Expired sessions go back to factor selection") + func expiredSessionsSelectFactor() { + #expect(Step(type: .sms, status: .initiated, isExpired: true) == .selectFactor) + #expect(Step(type: .sms, status: .verificationSent, isExpired: true) == .selectFactor) + #expect(Step(type: .totp, status: .initiated, isExpired: true) == .selectFactor) + } + + @Test("Factor selection needs MFA enabled and an allowed factor") + func selectFactorValidity() { + #expect(isValid(.selectFactor)) + #expect(!isValid(.selectFactor, isMFAEnabled: false)) + #expect(!isValid(.selectFactor, allowedFactors: [])) + #expect(!isValid(.selectFactor, allowedFactors: [.sms], selectedFactorType: .totp)) + } + + @Test("Phone number step needs a number and a display name") + func enterPhoneNumberValidity() { + #expect(isValid(.enterPhoneNumber, phoneNumber: "5551234567", displayName: "Phone")) + #expect(!isValid(.enterPhoneNumber, phoneNumber: "", displayName: "Phone")) + #expect(!isValid(.enterPhoneNumber, phoneNumber: "5551234567", displayName: "")) + } + + @Test("Code steps need their own code and a display name") + func codeStepValidity() { + #expect(isValid(.enterVerificationCode, verificationCode: "123456", displayName: "Phone")) + #expect(!isValid(.enterVerificationCode, totpCode: "123456", displayName: "Phone")) + #expect(!isValid(.enterVerificationCode, verificationCode: "123456", displayName: "")) + #expect(isValid(.setUpTOTP, totpCode: "123456", displayName: "App")) + #expect(!isValid(.setUpTOTP, verificationCode: "123456", displayName: "App")) + #expect(!isValid(.setUpTOTP, totpCode: "123456", displayName: "")) + } + + @Test("Get Started runs only from factor selection") + func startEnrollmentGuard() { + #expect(Step.selectFactor.canStartEnrollment(isValid: true, isLoading: false)) + #expect(!Step.selectFactor.canStartEnrollment(isValid: false, isLoading: false)) + #expect(!Step.selectFactor.canStartEnrollment(isValid: true, isLoading: true)) + for step in [Step.enterPhoneNumber, .enterVerificationCode, .setUpTOTP] { + #expect(!step.canStartEnrollment(isValid: true, isLoading: false)) + } + } + + @Test("Codes are sent only from the SMS steps") + func sendCodeGuard() { + for step in [Step.enterPhoneNumber, .enterVerificationCode] { + #expect(step.canSendCode(phoneNumber: "5551234567", displayName: "Phone", isLoading: false)) + #expect(!step.canSendCode(phoneNumber: "", displayName: "Phone", isLoading: false)) + #expect(!step.canSendCode(phoneNumber: "5551234567", displayName: "", isLoading: false)) + #expect(!step.canSendCode(phoneNumber: "5551234567", displayName: "Phone", isLoading: true)) + } + for step in [Step.selectFactor, .setUpTOTP] { + #expect(!step.canSendCode(phoneNumber: "5551234567", displayName: "Phone", isLoading: false)) + } + } + + @Test("Enrolment runs only from the code steps") + func enrollGuard() { + for step in [Step.enterVerificationCode, .setUpTOTP] { + #expect(step.canEnroll(isValid: true, isLoading: false)) + #expect(!step.canEnroll(isValid: false, isLoading: false)) + #expect(!step.canEnroll(isValid: true, isLoading: true)) + } + for step in [Step.selectFactor, .enterPhoneNumber] { + #expect(!step.canEnroll(isValid: true, isLoading: false)) + } + } + + private func isValid(_ step: Step, + isMFAEnabled: Bool = true, + allowedFactors: [SecondFactorType] = [.sms, .totp], + selectedFactorType: SecondFactorType = .sms, + phoneNumber: String = "", + verificationCode: String = "", + totpCode: String = "", + displayName: String = "") -> Bool { + step.isValid( + isMFAEnabled: isMFAEnabled, + allowedFactors: allowedFactors, + selectedFactorType: selectedFactorType, + phoneNumber: phoneNumber, + verificationCode: verificationCode, + totpCode: totpCode, + displayName: displayName + ) + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/AuthTextField.swift b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/AuthTextField.swift index 8e967113990..61cdb6b57ab 100644 --- a/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/AuthTextField.swift +++ b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/AuthTextField.swift @@ -15,6 +15,8 @@ import SwiftUI public struct AuthTextField: View { + @Environment(\.authTextFieldStyle) private var style + @Environment(\.authTypography) private var typography @FocusState private var isFocused: Bool @State var obscured: Bool = true @State var hasInteracted: Bool = false @@ -61,6 +63,12 @@ public struct AuthTextField: View { self.leading = leading } + /// The placeholder uses the custom font only when one is set, so it otherwise inherits the + /// field's font as before theming. + private var promptText: Text { + typography.fontName == nil ? Text(prompt) : Text(prompt).font(typography.resolvedFont(for: .body)) + } + var allRequirementsMet: Bool { validations.allSatisfy { $0.isValid(input: text) } } @@ -68,16 +76,17 @@ public struct AuthTextField: View { public var body: some View { VStack(alignment: .leading) { Text(LocalizedStringResource(stringLiteral: label)) + .authCustomFont(.body) HStack(spacing: 8) { leading() Group { if isSecureTextField { ZStack(alignment: .trailing) { - SecureField(label, text: $text, prompt: Text(prompt)) + SecureField(label, text: $text, prompt: promptText) .opacity(obscured ? 1 : 0) .focused($isFocused) .frame(height: 24) - TextField(label, text: $text, prompt: Text(prompt)) + TextField(label, text: $text, prompt: promptText) .opacity(obscured ? 0 : 1) .focused($isFocused) .frame(height: 24) @@ -100,11 +109,12 @@ public struct AuthTextField: View { TextField( label, text: $text, - prompt: Text(prompt) + prompt: promptText ) .frame(height: 24) } } + .authCustomFont(.body) } .frame(maxWidth: .infinity) .keyboardType(keyboardType) @@ -131,10 +141,14 @@ public struct AuthTextField: View { .padding(.vertical, 12) .padding(.horizontal, 12) .background { - RoundedRectangle(cornerRadius: 8) - .fill(Color.accentColor.opacity(0.05)) + RoundedRectangle(cornerRadius: style.cornerRadius ?? 8) + .fill((style.tint ?? Color.accentColor).opacity(0.05)) .strokeBorder(lineWidth: isFocused ? 3 : 1) - .foregroundStyle(isFocused ? Color.accentColor : Color(.systemFill)) + .foregroundStyle( + isFocused + ? (style.tint ?? Color.accentColor) + : (style.containerColor ?? Color(.systemFill)) + ) } .contentShape(Rectangle()) .onTapGesture { @@ -148,9 +162,9 @@ public struct AuthTextField: View { ForEach(validations) { validator in let isValid = validator.isValid(input: text) 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) } } diff --git a/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/CountrySelector.swift b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/CountrySelector.swift index 050d3c37cea..049588b6c9c 100644 --- a/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/CountrySelector.swift +++ b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/CountrySelector.swift @@ -87,18 +87,19 @@ public struct CountrySelector: View { selectedCountry = country } label: { Text("\(country.flag) \(country.name) (\(country.dialCode))") + .authCustomFont(.body) } .accessibilityIdentifier("country-option-\(country.code)") } } label: { HStack(spacing: 4) { Text(selectedCountry.flag) - .font(.title3) + .authFont(.title3) Text(selectedCountry.dialCode) - .font(.body) + .authFont(.body) .foregroundStyle(.primary) Image(systemName: "chevron.down") - .font(.caption2) + .authFont(.caption2) .foregroundStyle(.secondary) } } diff --git a/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/VerificationCodeInputField.swift b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/VerificationCodeInputField.swift index cc226a33c32..b9971494a0d 100644 --- a/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/VerificationCodeInputField.swift +++ b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Components/VerificationCodeInputField.swift @@ -35,6 +35,7 @@ public struct VerificationCodeInputField: View { _digitFields = State(initialValue: Array(repeating: "", count: codeLength)) } + @Environment(\.authTextFieldStyle) private var style @Binding var code: String let codeLength: Int let isError: Bool @@ -91,8 +92,8 @@ public struct VerificationCodeInputField: View { if isError, let errorMessage = errorMessage { Text(errorMessage) - .font(.caption) - .foregroundColor(.red) + .authFont(.caption) + .foregroundStyle(style.errorColor ?? .red) .frame(maxWidth: .infinity, alignment: .leading) } @@ -102,9 +103,9 @@ public struct VerificationCodeInputField: View { ForEach(validations) { validator in let isValid = validator.isValid(input: code) 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) } } @@ -293,6 +294,8 @@ public struct VerificationCodeInputField: View { } private struct SingleDigitField: View { + @Environment(\.authTypography) private var typography + @Environment(\.authTextFieldStyle) private var style @Binding var digit: String let isError: Bool let isFocused: Bool @@ -310,9 +313,9 @@ private struct SingleDigitField: View { } private var borderColor: Color { - if isError { return .red } - if isFocused || !digit.isEmpty { return .accentColor } - return Color(.systemFill) + if isError { return style.errorColor ?? .red } + if isFocused || !digit.isEmpty { return style.tint ?? .accentColor } + return style.containerColor ?? Color(.systemFill) } var body: some View { @@ -330,8 +333,9 @@ private struct SingleDigitField: View { onFocusChanged(isFocused) }, maxCharacters: maxDigits, + font: typography.fontName.flatMap { UIFont(name: $0, size: 24) } + ?? .systemFont(ofSize: 24, weight: .medium), configuration: { textField in - textField.font = .systemFont(ofSize: 24, weight: .medium) textField.textAlignment = .center textField.keyboardType = .numberPad textField.textContentType = .oneTimeCode @@ -344,10 +348,10 @@ private struct SingleDigitField: View { ) .frame(width: 48, height: 48) .background( - RoundedRectangle(cornerRadius: 8) - .fill(Color.accentColor.opacity(0.05)) + RoundedRectangle(cornerRadius: style.cornerRadius ?? 8) + .fill((style.tint ?? Color.accentColor).opacity(0.05)) .overlay( - RoundedRectangle(cornerRadius: 8) + RoundedRectangle(cornerRadius: style.cornerRadius ?? 8) .stroke(borderColor, lineWidth: borderWidth) ) ) @@ -367,6 +371,7 @@ private struct BackspaceAwareTextField: UIViewRepresentable { let onDeleteBackwardWhenEmpty: () -> Void let onFocusChanged: (Bool) -> Void let maxCharacters: Int + let font: UIFont let configuration: (UITextField) -> Void let onTextChange: (String) -> Void @@ -380,6 +385,7 @@ private struct BackspaceAwareTextField: UIViewRepresentable { for: .editingChanged ) configuration(textField) + textField.font = font textField.onDeleteBackward = { [weak textField] in guard let textField else { return } if (textField.text ?? "").isEmpty { @@ -394,6 +400,9 @@ private struct BackspaceAwareTextField: UIViewRepresentable { if uiView.text != text { uiView.text = text } + if uiView.font != font { + uiView.font = font + } uiView.onDeleteBackward = { [weak uiView] in guard let uiView else { return } @@ -505,7 +514,7 @@ private final class BackspaceUITextField: UITextField { return VStack(spacing: 32) { Text("Enter Verification Code") - .font(.title2) + .authFont(.title2) .fontWeight(.semibold) VerificationCodeInputField( @@ -519,7 +528,7 @@ private final class BackspaceUITextField: UITextField { ) Text("Current code: \(code)") - .font(.caption) + .authFont(.caption) .foregroundColor(.secondary) } .padding() @@ -530,7 +539,7 @@ private final class BackspaceUITextField: UITextField { return VStack(spacing: 32) { Text("Enter Verification Code") - .font(.title2) + .authFont(.title2) .fontWeight(.semibold) VerificationCodeInputField( @@ -546,7 +555,7 @@ private final class BackspaceUITextField: UITextField { ) Text("Current code: \(code)") - .font(.caption) + .authFont(.caption) .foregroundColor(.secondary) } .padding() @@ -557,7 +566,7 @@ private final class BackspaceUITextField: UITextField { return VStack(spacing: 32) { Text("Enter 4-Digit Code") - .font(.title2) + .authFont(.title2) .fontWeight(.semibold) VerificationCodeInputField( @@ -572,7 +581,7 @@ private final class BackspaceUITextField: UITextField { ) Text("Current code: \(code)") - .font(.caption) + .authFont(.caption) .foregroundColor(.secondary) } .padding() diff --git a/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Theme/AuthTextFieldStyle.swift b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Theme/AuthTextFieldStyle.swift new file mode 100644 index 00000000000..6fc0dc405c5 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Theme/AuthTextFieldStyle.swift @@ -0,0 +1,69 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import SwiftUI + +/// Styling configuration for ``AuthTextField``. All fields default to `nil`, in which case +/// `AuthTextField` falls back to its existing hardcoded appearance. +public struct AuthTextFieldStyle: Sendable { + public var tint: Color? + public var containerColor: Color? + public var secondaryColor: Color? + public var errorColor: Color? + public var cornerRadius: CGFloat? + + public init(tint: Color? = nil, + containerColor: Color? = nil, + secondaryColor: Color? = nil, + errorColor: Color? = nil, + cornerRadius: CGFloat? = nil) { + self.tint = tint + self.containerColor = containerColor + self.secondaryColor = secondaryColor + self.errorColor = errorColor + self.cornerRadius = cornerRadius + } + + public static let `default` = AuthTextFieldStyle() +} + +private struct AuthTextFieldStyleKey: EnvironmentKey { + static let defaultValue: AuthTextFieldStyle = .default +} + +public extension EnvironmentValues { + var authTextFieldStyle: AuthTextFieldStyle { + get { self[AuthTextFieldStyleKey.self] } + set { self[AuthTextFieldStyleKey.self] = newValue } + } +} + +public extension View { + /// Applies a custom appearance to every ``AuthTextField`` in this view's subtree. + /// + /// ```swift + /// AuthPickerView { ... } + /// .authTextFieldStyle( + /// AuthTextFieldStyle( + /// tint: theme.colors.tint, + /// containerColor: theme.colors.container, + /// secondaryColor: theme.colors.secondary, + /// errorColor: theme.colors.error + /// ) + /// ) + /// ``` + func authTextFieldStyle(_ style: AuthTextFieldStyle) -> some View { + environment(\.authTextFieldStyle, style) + } +} diff --git a/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Theme/AuthTypography.swift b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Theme/AuthTypography.swift new file mode 100644 index 00000000000..113ae587e76 --- /dev/null +++ b/FirebaseSwiftUI/FirebaseAuthUIComponents/Sources/Theme/AuthTypography.swift @@ -0,0 +1,139 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import SwiftUI + +/// Typography configuration for the auth flow. `fontName` defaults to `nil`, in which case +/// text keeps using the system font at each semantic text style, exactly as it does today. +public struct AuthTypography: Sendable { + /// The PostScript name of a custom font registered with the app (e.g. via Info.plist). + public var fontName: String? + + public init(fontName: String? = nil) { + self.fontName = fontName + } + + public static let `default` = AuthTypography() + + /// Resolves a semantic text style against this typography's `fontName`, preserving Dynamic + /// Type scaling relative to `style`. Falls back to the system font when `fontName` is unset. + public func resolvedFont(for style: Font.TextStyle, weight: Font.Weight? = nil) -> Font { + // Use the style's size at the default content size category; `relativeTo:` applies the + // user's Dynamic Type scaling, so an already-scaled size would be scaled twice. + let base: Font = if let fontName { + .custom( + fontName, + size: UIFont.preferredFont( + forTextStyle: style.uiKit, + compatibleWith: UITraitCollection(preferredContentSizeCategory: .large) + ).pointSize, + relativeTo: style + ) + } else { + .system(style) + } + return weight.map { base.weight($0) } ?? base + } +} + +private struct AuthTypographyKey: EnvironmentKey { + static let defaultValue: AuthTypography = .default +} + +public extension EnvironmentValues { + var authTypography: AuthTypography { + get { self[AuthTypographyKey.self] } + set { self[AuthTypographyKey.self] = newValue } + } +} + +public extension View { + /// Sets the custom font used by every semantic text style (`.headline`, `.body`, + /// `.caption`, etc.) throughout the auth flow, while preserving Dynamic Type scaling relative + /// to each style. + /// + /// ```swift + /// AuthPickerView { ... } + /// .authTypography(AuthTypography(fontName: "Poppins-Regular")) + /// ``` + func authTypography(_ typography: AuthTypography) -> some View { + environment(\.authTypography, typography) + } +} + +struct AuthFontModifier: ViewModifier { + @Environment(\.authTypography) private var typography + let style: Font.TextStyle + var weight: Font.Weight? + + func body(content: Content) -> some View { + content.font(typography.resolvedFont(for: style, weight: weight)) + } +} + +public extension View { + /// Applies a semantic text style resolved against the environment's ``AuthTypography``, so + /// your own views inside the auth flow use the same font as the stock screens. + /// + /// Example: + /// ```swift + /// Text("Welcome back") + /// .authFont(.title2, weight: .semibold) + /// ``` + func authFont(_ style: Font.TextStyle, weight: Font.Weight? = nil) -> some View { + modifier(AuthFontModifier(style: style, weight: weight)) + } +} + +extension View { + /// Like `.authFont(_:weight:)`, but only when ``AuthTypography/fontName`` is set. Otherwise + /// the inherited font is left alone (only `weight` is applied), for text that had no explicit + /// font before theming, so an app-level `.font(...)` still reaches it. + package func authCustomFont(_ style: Font.TextStyle, weight: Font.Weight? = nil) -> some View { + modifier(AuthCustomFontModifier(style: style, weight: weight)) + } +} + +struct AuthCustomFontModifier: ViewModifier { + @Environment(\.authTypography) private var typography + let style: Font.TextStyle + var weight: Font.Weight? + + func body(content: Content) -> some View { + if typography.fontName != nil { + content.font(typography.resolvedFont(for: style, weight: weight)) + } else { + content.fontWeight(weight) + } + } +} + +private extension Font.TextStyle { + var uiKit: UIFont.TextStyle { + switch self { + case .largeTitle: .largeTitle + case .title: .title1 + case .title2: .title2 + case .title3: .title3 + case .headline: .headline + case .subheadline: .subheadline + case .body: .body + case .callout: .callout + case .footnote: .footnote + case .caption: .caption1 + case .caption2: .caption2 + @unknown default: .body + } + } +} diff --git a/FirebaseSwiftUI/FirebasePhoneAuthSwiftUI/Sources/Services/PhoneAuthProviderAuthUI.swift b/FirebaseSwiftUI/FirebasePhoneAuthSwiftUI/Sources/Services/PhoneAuthProviderAuthUI.swift index 5d835b959d0..a816970098b 100644 --- a/FirebaseSwiftUI/FirebasePhoneAuthSwiftUI/Sources/Services/PhoneAuthProviderAuthUI.swift +++ b/FirebaseSwiftUI/FirebasePhoneAuthSwiftUI/Sources/Services/PhoneAuthProviderAuthUI.swift @@ -41,3 +41,9 @@ public class PhoneAuthProviderAuthUI: AuthProviderUI { return AnyView(PhoneAuthButtonView(onTap: mainActorClosure)) } } + +extension PhoneAuthProviderAuthUI: AuthProviderAction { + @MainActor public func triggerAction() async throws { + onTap() + } +} diff --git a/e2eTest/FirebaseSwiftUIExample/FirebaseSwiftUIExampleTests/TriggerSignInTests.swift b/e2eTest/FirebaseSwiftUIExample/FirebaseSwiftUIExampleTests/TriggerSignInTests.swift new file mode 100644 index 00000000000..00ae7d88c4b --- /dev/null +++ b/e2eTest/FirebaseSwiftUIExample/FirebaseSwiftUIExampleTests/TriggerSignInTests.swift @@ -0,0 +1,225 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuth +@testable import FirebaseAuthSwiftUI +import FirebaseCore +import FirebasePhoneAuthSwiftUI +import SwiftUI +import Testing + +private struct TestCredentialError: Error {} + +private final class FailingCredentialProvider: CredentialAuthProviderSwift { + func createAuthCredential() async throws -> AuthCredential { + throw TestCredentialError() + } +} + +private final class PlainProvider: AuthProviderSwift {} + +private class TestProviderUI: AuthProviderUI { + let id: String + let displayName: String + let provider: AuthProviderSwift + + init(id: String, provider: AuthProviderSwift) { + self.id = id + displayName = id + self.provider = provider + } + + @MainActor func authButton() -> AnyView { + AnyView(EmptyView()) + } +} + +private class TestActionProviderUI: TestProviderUI, AuthProviderAction { + var actionCount = 0 + + @MainActor func triggerAction() async throws { + actionCount += 1 + } +} + +@MainActor +struct TriggerSignInTests { + private func makeService() -> AuthService { + configureFirebaseIfNeeded() + return AuthService() + } + + @Test + func registeredProvidersKeepRegistrationOrder() { + let service = makeService() + service.registerProvider(providerWithButton: TestProviderUI(id: "a", provider: PlainProvider())) + service.registerProvider(providerWithButton: TestProviderUI(id: "b", provider: PlainProvider())) + + #expect(service.registeredProviders.map(\.id) == ["a", "b"]) + } + + @Test + func credentialProviderSignsInThroughItsCredential() async { + let service = makeService() + let provider = TestProviderUI(id: "credential", provider: FailingCredentialProvider()) + + await #expect(throws: TestCredentialError.self) { + try await service.triggerSignIn(for: provider) + } + } + + @Test + func actionTakesPrecedenceOverCredential() async throws { + let service = makeService() + let provider = TestActionProviderUI(id: "both", provider: FailingCredentialProvider()) + + let outcome = try await service.triggerSignIn(for: provider) + + #expect(outcome == nil) + #expect(provider.actionCount == 1) + } + + @Test + func actionProviderRunsItsAction() async throws { + let service = makeService() + let provider = TestActionProviderUI(id: "action", provider: PlainProvider()) + + let outcome = try await service.triggerSignIn(for: provider) + + #expect(outcome == nil) + #expect(provider.actionCount == 1) + } + + @Test + func unsupportedProviderThrows() async { + let service = makeService() + let provider = TestProviderUI(id: "custom", provider: PlainProvider()) + + await #expect { + try await service.triggerSignIn(for: provider) + } throws: { error in + guard case AuthServiceError.providerAuthenticationFailed = error else { return false } + return true + } + } + + @Test + func phoneProviderRunsItsTapAction() async throws { + let service = makeService() + var tapCount = 0 + let provider = PhoneAuthProviderAuthUI { tapCount += 1 } + + let outcome = try await service.triggerSignIn(for: provider) + + #expect(outcome == nil) + #expect(tapCount == 1) + } + + @Test + func selectEmailLinkRunsCustomCallback() { + let service = makeService() + var callbackCount = 0 + _ = service.withEmailLinkSignIn { callbackCount += 1 } + + service.selectEmailLink() + + #expect(callbackCount == 1) + #expect(service.authView == nil) + } + + @Test + func selectEmailLinkPushesEmailLinkScreenByDefault() { + let service = makeService() + _ = service.withEmailLinkSignIn() + + service.selectEmailLink() + + #expect(service.authView == .emailLink) + } +} + +@MainActor +struct AuthMethodPickerStateRouteTests { + private final class Calls { + var mfa: [MFARequired] = [] + var conflicts: [AccountConflictContext] = [] + var errors: [Error] = [] + } + + private func route(_ result: Result, + withConflictHandler: Bool = true) -> Calls { + let calls = Calls() + AuthMethodPickerState.route( + result, + mfaHandler: { calls.mfa.append($0) }, + accountConflictHandler: withConflictHandler ? { calls.conflicts.append($0) } : nil, + reportError: { calls.errors.append($0) } + ) + return calls + } + + private func conflictError() -> AuthServiceError { + .accountConflict(AccountConflictContext( + conflictType: .accountExistsWithDifferentCredential, + credential: EmailAuthProvider.credential(withEmail: "a@b.com", password: "123456"), + underlyingError: TestCredentialError(), + message: "conflict", + email: "a@b.com" + )) + } + + @Test + func mfaRequiredGoesToMFAHandler() { + let calls = route(.success(.mfaRequired(MFARequired(hints: [])))) + + #expect(calls.mfa.count == 1) + #expect(calls.conflicts.isEmpty) + #expect(calls.errors.isEmpty) + } + + @Test + func successAndNoOutcomeCallNothing() { + for result: Result in [.success(nil), .success(.signedIn(nil))] { + let calls = route(result) + + #expect(calls.mfa.isEmpty) + #expect(calls.conflicts.isEmpty) + #expect(calls.errors.isEmpty) + } + } + + @Test + func accountConflictGoesToConflictHandler() { + let calls = route(.failure(conflictError())) + + #expect(calls.conflicts.count == 1) + #expect(calls.errors.isEmpty) + } + + @Test + func accountConflictWithoutHandlerIsReported() { + let calls = route(.failure(conflictError()), withConflictHandler: false) + + #expect(calls.errors.count == 1) + } + + @Test + func otherErrorsAreReported() { + let calls = route(.failure(TestCredentialError())) + + #expect(calls.errors.first is TestCredentialError) + #expect(calls.mfa.isEmpty) + #expect(calls.conflicts.isEmpty) + } +} diff --git a/e2eTest/FirebaseSwiftUIExample/FirebaseSwiftUIExampleUITests/MFAResolutionUITests.swift b/e2eTest/FirebaseSwiftUIExample/FirebaseSwiftUIExampleUITests/MFAResolutionUITests.swift index 9024a19f83d..4f117bceb58 100644 --- a/e2eTest/FirebaseSwiftUIExample/FirebaseSwiftUIExampleUITests/MFAResolutionUITests.swift +++ b/e2eTest/FirebaseSwiftUIExample/FirebaseSwiftUIExampleUITests/MFAResolutionUITests.swift @@ -93,10 +93,16 @@ final class MFAResolutionUITests: XCTestCase { return } - let codeField = app.textFields["sms-verification-code-field"] - XCTAssertTrue(codeField.waitForExistence(timeout: 10), "Code field should exist") - codeField.tap() - codeField.typeText(verificationCode) + let firstDigitField = app.otherElements["Digit 1 of 6"].textFields.firstMatch + XCTAssertTrue(firstDigitField.waitForExistence(timeout: 10), "Code field should exist") + // Paste each digit into its own box, matching MFAEnrolmentUITests. + for (index, digit) in verificationCode.enumerated() { + let field = app.otherElements["Digit \(index + 1) of 6"].textFields.firstMatch + UIPasteboard.general.string = String(digit) + field.tap() + field.press(forDuration: 1.2) + app.menuItems["Paste"].tap() + } let completeButton = app.buttons["complete-resolution-button"] XCTAssertTrue(completeButton.exists, "Complete button should exist") diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Application/ContentView.swift b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Application/ContentView.swift index 722c4b46cc6..979e145395b 100644 --- a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Application/ContentView.swift +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Application/ContentView.swift @@ -143,6 +143,31 @@ struct ContentView: View { } } .tint(Color(.label)) + NavigationLink { + FullCustomizationExample() + .navigationTitle("Full customization") + .navigationBarTitleDisplayMode(.inline) + } label: { + VStack(alignment: .leading, spacing: 16) { + Text("Full customization example") + .font(.headline) + .fontWeight(.bold) + Text("How to draw every auth screen yourself with AuthPickerView") + Text( + "• Custom first screen, pushed screens and signed-in screen\n• Three switchable themes\n• Library still drives auth, MFA and navigation" + ) + .font(.caption) + .foregroundColor(.secondary) + } + .multilineTextAlignment(.leading) + .padding() + .frame(maxWidth: .infinity, alignment: .leading) + .background { + RoundedRectangle(cornerRadius: 16) + .fill(Color(UIColor.secondarySystemBackground)) + } + } + .tint(Color(.label)) } .padding() .navigationTitle("FirebaseUI Demo") diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/Contents.json b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/Contents.json new file mode 100644 index 00000000000..6e965652df6 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/Contents.json @@ -0,0 +1,9 @@ +{ + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "provides-namespace" : true + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-mascot.imageset/Contents.json b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-mascot.imageset/Contents.json new file mode 100644 index 00000000000..2826852cb4d --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-mascot.imageset/Contents.json @@ -0,0 +1,15 @@ +{ + "images" : [ + { + "filename" : "doggo-mascot.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "preserves-vector-representation" : true + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-mascot.imageset/doggo-mascot.svg b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-mascot.imageset/doggo-mascot.svg new file mode 100644 index 00000000000..03bcbddf78a --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-mascot.imageset/doggo-mascot.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-pattern.imageset/Contents.json b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-pattern.imageset/Contents.json new file mode 100644 index 00000000000..c568876d357 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-pattern.imageset/Contents.json @@ -0,0 +1,15 @@ +{ + "images" : [ + { + "filename" : "doggo-pattern.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "preserves-vector-representation" : true + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-pattern.imageset/doggo-pattern.svg b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-pattern.imageset/doggo-pattern.svg new file mode 100644 index 00000000000..6270097dbd9 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/doggo-pattern.imageset/doggo-pattern.svg @@ -0,0 +1,600 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/google-g.imageset/Contents.json b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/google-g.imageset/Contents.json new file mode 100644 index 00000000000..28bd88c8b1f --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/google-g.imageset/Contents.json @@ -0,0 +1,15 @@ +{ + "images" : [ + { + "filename" : "google-g.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "preserves-vector-representation" : true + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/google-g.imageset/google-g.svg b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/google-g.imageset/google-g.svg new file mode 100644 index 00000000000..821bc87e79d --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/google-g.imageset/google-g.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/grid-pattern.imageset/Contents.json b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/grid-pattern.imageset/Contents.json new file mode 100644 index 00000000000..a9869d91ac6 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/grid-pattern.imageset/Contents.json @@ -0,0 +1,15 @@ +{ + "images" : [ + { + "filename" : "grid-pattern.svg", + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + }, + "properties" : { + "preserves-vector-representation" : true + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/grid-pattern.imageset/grid-pattern.svg b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/grid-pattern.imageset/grid-pattern.svg new file mode 100644 index 00000000000..a92ee1512a3 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/grid-pattern.imageset/grid-pattern.svg @@ -0,0 +1,90 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/spark-blob.imageset/Contents.json b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/spark-blob.imageset/Contents.json new file mode 100644 index 00000000000..d987d9c76c6 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/spark-blob.imageset/Contents.json @@ -0,0 +1,21 @@ +{ + "images" : [ + { + "idiom" : "universal", + "scale" : "1x" + }, + { + "idiom" : "universal", + "scale" : "2x", + "filename" : "spark-blob@2x.png" + }, + { + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/spark-blob.imageset/spark-blob@2x.png b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/spark-blob.imageset/spark-blob@2x.png new file mode 100644 index 00000000000..bc2b898406f Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Assets.xcassets/FullCustomization/spark-blob.imageset/spark-blob@2x.png differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoAccountScreens.swift b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoAccountScreens.swift new file mode 100644 index 00000000000..bda8fd27dc2 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoAccountScreens.swift @@ -0,0 +1,420 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import CoreImage.CIFilterBuiltins +import FirebaseAuth +import FirebaseAuthSwiftUI +import SwiftUI + +// The Figma file has no frames for these screens; their copy and structure follow the +// FirebaseUI-Android full customization demo, restyled with the theme's Landing values. + +struct DemoSignedIn: View { + let state: SignedInContentState + + var body: some View { + DemoPage(title: "You're in") { + DemoBodyText("Signed in as \(state.user?.email ?? state.user?.phoneNumber ?? "you").") + // Email verification and password changes only apply to an account with an email. + let hasEmail = state.user?.email != nil + if hasEmail, !state.isEmailVerified { + DemoBodyText("Check your inbox to verify your email address.") + DemoButton( + title: "Verify email", + kind: .secondary, + identifier: "verify-email-button", + action: state.verifyEmail + ) + } + DemoErrorText(message: state.errorMessage) + if hasEmail { + DemoButton( + title: "Change password", + identifier: "update-password-button", + action: state.updatePassword + ) + } + if state.isMFAEnabled { + DemoButton( + title: "Manage two-factor", + kind: .secondary, + identifier: "mfa-management-button", + action: state.goToMFAManagement + ) + } + DemoLink( + title: "Sign out", + alignment: .leading, + identifier: "sign-out-button", + action: state.signOut + ) + DemoLink( + title: "Delete account", + alignment: .leading, + identifier: "delete-account-button", + action: state.deleteAccount + ) + } + .disabled(state.isLoading) + } +} + +struct DemoMFAManagement: View { + var body: some View { + MFAManagementScreen { state in + DemoPage(title: "Two-factor") { + if state.enrolledFactors.isEmpty { + DemoBodyText("Add a second step to sign-in, so a password on its own isn't enough.") + } else { + DemoBodyText("Already on this account") + ForEach(state.enrolledFactors, id: \.uid) { factor in + DemoFactorRow(factor: factor) { + state.unenroll(factor.uid) + } + .disabled(state.isLoading) + } + } + DemoErrorText(message: state.errorMessage) + DemoButton( + title: state.enrolledFactors.isEmpty ? "Set up two-factor" : "Add another method", + isLoading: state.isLoading, + identifier: "add-factor-button", + action: state.goToEnrollment + ) + } + } + } +} + +private struct DemoFactorRow: View { + let factor: MultiFactorInfo + let remove: () -> Void + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + @Environment(\.isEnabled) private var isEnabled + + var body: some View { + let theme = themeID.theme + let shape = RoundedRectangle(cornerRadius: theme.fieldCornerRadius) + HStack(spacing: 16) { + VStack(alignment: .leading, spacing: 2) { + Text(factor.displayName ?? "Second step") + .demoText(theme.fieldText) + Text(factor.factorID == PhoneMultiFactorID + ? (factor as? PhoneMultiFactorInfo)?.phoneNumber ?? "Text message" + : "Authenticator app") + .font(theme.fieldText.font(relativeTo: .footnote)) + .foregroundStyle(theme.fieldPlaceholder) + } + Spacer() + Button("Remove", action: remove) + .font(theme.link.font()) + .foregroundStyle(theme.link.color) + .buttonStyle(.plain) + .opacity(isEnabled ? 1 : 0.5) + .accessibilityIdentifier("remove-factor-button") + } + .padding(.horizontal, 16) + .frame(minHeight: 56) + .background(theme.fieldFill, in: shape) + .overlay { shape.strokeBorder(theme.fieldStroke.color, lineWidth: theme.fieldStroke.width) } + } +} + +struct DemoMFAEnrolment: View { + var body: some View { + MFAEnrolmentScreen { DemoMFAEnrolmentContent(state: $0) } + } +} + +/// The enrolment steps, apart from `MFAEnrolmentScreen` so they can be previewed with a stub +/// state: the Auth emulator can't enrol TOTP. +struct DemoMFAEnrolmentContent: View { + let state: MFAEnrollmentContentState + + var body: some View { + switch state.step { + case .selectFactor: + DemoPage(title: "Secure your account") { + DemoBodyText("Add a second step to sign-in, so a password on its own isn't enough.") + ForEach(state.allowedFactors, id: \.self) { factor in + DemoChoiceRow( + title: factor == .sms ? "Text message" : "Authenticator app", + isSelected: state.selectedFactorType.wrappedValue == factor, + identifier: factor == .sms ? "sms-factor-button" : "totp-factor-button" + ) { + state.selectedFactorType.wrappedValue = factor + } + } + DemoErrorText(message: state.isMFAEnabled + ? state.errorMessage + : "Two-factor sign-in isn't enabled for this app.") + DemoButton( + title: "Continue", + isLoading: state.isLoading, + identifier: "start-enrollment-button", + action: state.startEnrollment + ) + .disabled(!state.isValid) + } + case .enterPhoneNumber: + DemoPage(title: "Add your number") { + DemoBodyText("We'll text a code to this number whenever you sign in.") + displayNameField(state) + DemoPhoneNumberField(phoneNumber: state.phoneNumber, country: state.selectedCountry) + DemoErrorText(message: state.errorMessage) + DemoButton( + title: "Send code", + isLoading: state.isLoading, + identifier: "send-code-button", + action: state.sendCode + ) + .disabled(!state.isValid) + } + case .enterVerificationCode: + DemoPage(title: "Confirm the code") { + DemoBodyText("We sent a code to \(state.sentPhoneNumber ?? "your phone").") + DemoCodeField(code: state.verificationCode, identifier: "verification-code-field") + DemoErrorText(message: state.errorMessage) + DemoButton( + title: "Verify", + isLoading: state.isLoading, + identifier: "enroll-button", + action: state.enroll + ) + .disabled(!state.isValid) + DemoLink( + title: "Resend code", + alignment: .leading, + identifier: "resend-code-button", + action: state.sendCode + ) + } + case .setUpTOTP: + DemoPage(title: "Scan to set up") { + DemoBodyText("Scan this with your authenticator app, or type the key in by hand.") + if let url = state.totpQRCodeURL { + DemoQRCode(url: url) + } + if let secret = state.totpSecret { + DemoLink( + title: state.didCopySecret ? "Copied" : secret, + alignment: .center, + identifier: "totp-secret", + action: state.copySecret + ) + } + displayNameField(state) + DemoCodeField(code: state.totpCode, identifier: "totp-code-field") + DemoErrorText(message: state.errorMessage) + DemoButton( + title: "Verify", + isLoading: state.isLoading, + identifier: "enroll-button", + action: state.enroll + ) + .disabled(!state.isValid) + } + } + } + + private func displayNameField(_ state: MFAEnrollmentContentState) -> some View { + DemoTextField( + icon: "person", + placeholder: "Name this method", + text: state.displayName, + identifier: "display-name-field" + ) + } +} + +#if DEBUG + extension MFAEnrollmentContentState { + /// The TOTP setup step with stub values and no-op actions. + static var totpSetUpPreview: MFAEnrollmentContentState { + MFAEnrollmentContentState( + step: .setUpTOTP, + selectedFactorType: .constant(.totp), + phoneNumber: .constant(""), + selectedCountry: .constant(.default), + verificationCode: .constant(""), + totpCode: .constant(""), + displayName: .constant(""), + startEnrollment: {}, + sendCode: {}, + enroll: {}, + copySecret: {}, + isMFAEnabled: true, + allowedFactors: [.sms, .totp], + sentPhoneNumber: nil, + totpSecret: "JBSWY3DPEHPK3PXP", + totpQRCodeURL: URL( + string: "otpauth://totp/FirebaseUI:rover@example.com?secret=JBSWY3DPEHPK3PXP&issuer=FirebaseUI" + ), + didCopySecret: false, + isValid: false, + isLoading: false, + errorMessage: nil + ) + } + } + + #Preview("TOTP setup") { + NavigationStack { + DemoMFAEnrolmentContent(state: .totpSetUpPreview) + } + } +#endif + +struct DemoMFAResolution: View { + let mfaRequired: MFARequired + + var body: some View { + MFAResolutionScreen(mfaRequired: mfaRequired) { state in + DemoPage(title: "One more step") { + if state.hints.count > 1 { + ForEach(Array(state.hints.enumerated()), id: \.offset) { index, hint in + DemoChoiceRow( + title: label(for: hint), + isSelected: state.selectedHintIndex.wrappedValue == index, + identifier: "hint-\(index)-button" + ) { + state.selectedHintIndex.wrappedValue = index + } + } + } + if let hint = selectedHint(state) { + switch hint { + case let .phone(_, _, phoneNumber): + if state.isCodeSent { + DemoBodyText("We sent a code to \(phoneNumber ?? "your phone").") + DemoCodeField(code: state.verificationCode, identifier: "verification-code-field") + } else { + DemoBodyText("We'll text a code to \(phoneNumber ?? "your phone").") + } + case .totp: + DemoBodyText("Enter the 6-digit code your authenticator app is showing right now.") + DemoCodeField(code: state.totpCode, identifier: "totp-code-field") + } + } + DemoErrorText(message: state.errorMessage) + if case .phone = selectedHint(state), !state.isCodeSent { + DemoButton( + title: "Send code", + isLoading: state.isLoading, + identifier: "send-code-button", + action: state.sendCode + ) + } else { + DemoButton( + title: "Verify", + isLoading: state.isLoading, + identifier: "resolve-button", + action: state.resolve + ) + .disabled(!state.isValid) + } + DemoLink( + title: "Cancel", + alignment: .leading, + identifier: "cancel-button", + action: state.cancel + ) + } + } + } + + private func selectedHint(_ state: MFAResolutionContentState) -> MFAHint? { + let index = state.selectedHintIndex.wrappedValue + return state.hints.indices.contains(index) ? state.hints[index] : nil + } + + private func label(for hint: MFAHint) -> String { + switch hint { + case let .phone(displayName, _, _): displayName ?? "Text message" + case let .totp(displayName, _): displayName ?? "Authenticator app" + } + } +} + +/// A choice between second factors, drawn in the text field's style. +private struct DemoChoiceRow: View { + let title: String + let isSelected: Bool + var identifier: String + let action: () -> Void + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + var body: some View { + let theme = themeID.theme + let shape = RoundedRectangle(cornerRadius: theme.fieldCornerRadius) + Button(action: action) { + HStack { + Text(title) + .demoText(theme.fieldText) + Spacer() + Image(systemName: isSelected ? "checkmark.circle.fill" : "circle") + .foregroundStyle(theme.fieldIcon) + } + .padding(.horizontal, 16) + .frame(minHeight: 56) + .background(theme.fieldFill, in: shape) + .overlay { + shape.strokeBorder(theme.fieldStroke.color, lineWidth: theme.fieldStroke.width) + } + } + .buttonStyle(.plain) + .accessibilityAddTraits(isSelected ? .isSelected : []) + .accessibilityIdentifier(identifier) + } +} + +/// A QR code for the TOTP setup URL, drawn with Core Image once per URL. +private struct DemoQRCode: View { + let url: URL + + @State private var image: UIImage? + + var body: some View { + Group { + if let image { + Image(uiImage: image) + .interpolation(.none) + .resizable() + } else { + Color.clear + } + } + .frame(width: 176, height: 176) + .padding(12) + .background(.white, in: RoundedRectangle(cornerRadius: 24)) + .frame(maxWidth: .infinity) + .accessibilityLabel("QR code for your authenticator app") + .accessibilityIdentifier("totp-qr-code") + .task(id: url) { + image = Self.makeImage(for: url) + } + } + + private static func makeImage(for url: URL) -> UIImage? { + let filter = CIFilter.qrCodeGenerator() + filter.message = Data(url.absoluteString.utf8) + guard let output = filter.outputImage?.transformed(by: CGAffineTransform(scaleX: 8, y: 8)), + let cgImage = CIContext().createCGImage(output, from: output.extent) else { + return nil + } + return UIImage(cgImage: cgImage) + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoComponents.swift b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoComponents.swift new file mode 100644 index 00000000000..e5b4aa3fd5f --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoComponents.swift @@ -0,0 +1,363 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthSwiftUI +import SwiftUI + +/// The layout every demo screen shares, from the Figma "sign up" frame: a title, a form card and +/// an optional footer, over the theme's background art. Accessibility identifiers use the Figma +/// layer names. +struct DemoPage: View { + init(title: String?, + @ViewBuilder card: @escaping () -> Card, + @ViewBuilder footer: @escaping () -> Footer = { EmptyView() }) { + self.title = title + self.card = card + self.footer = footer + } + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + private let title: String? + private let card: () -> Card + private let footer: () -> Footer + + var body: some View { + let theme = themeID.theme + // The background is its own layer, so it fills the sheet whatever size the scroll view takes. + ZStack { + DemoThemeBackground(theme: theme) + ScrollView { + VStack(spacing: 0) { + if theme.id == .spark { + SparkHeadline() + // "headline" ends at y 135 and "inputs" starts at y 200. + .padding(.bottom, title == nil ? 65 : 24) + } + VStack(alignment: .leading, spacing: theme.titleSpacing) { + if let title { + Text(title) + .font(theme.title.font(relativeTo: .title)) + .foregroundStyle(theme.title.color) + // Long titles wrap before the 83-point mascot and its 8.6-point inset. + .padding(.trailing, theme.id == .doggo ? 92 : 0) + .frame(maxWidth: .infinity, alignment: .leading) + .accessibilityAddTraits(.isHeader) + .accessibilityIdentifier("title") + } + DemoCard(theme: theme, content: card) + } + .overlay(alignment: .topTrailing) { + if theme.id == .doggo, title != nil { + // "doggo" ends 8.6 points inside the form's trailing edge (x 372.4 against 381) and + // starts 10.7 points above the title (y 163.3 against 174). + Image("FullCustomization/doggo-mascot") + .offset(x: -8.6, y: -10.7) + .accessibilityHidden(true) + .accessibilityIdentifier("doggo") + } + } + .demoContentWidth() + footer() + // With the switch row's 12-point inset, its text sits 24 points below the form. + .padding(.top, 12) + } + // Full width, so the whole sheet scrolls while the form stays centred. + .frame(maxWidth: .infinity) + .padding(.top, 16) + .padding(.bottom, 24) + } + .scrollBounceBehavior(.basedOnSize) + } + .navigationTitle("") + .navigationBarTitleDisplayMode(.inline) + .toolbar { + ToolbarItem(placement: .topBarLeading) { + DemoThemeMenu() + } + } + } +} + +/// Figma "headline" (20:5927), Coffee Spark only. +private struct SparkHeadline: View { + var body: some View { + HStack(spacing: 10) { + // Material Symbols "coffee". + Image(systemName: "cup.and.saucer") + .font(.system(size: 20, weight: .medium)) + Text("Coffee Spark") + .font(.custom("JetBrainsMono-Medium", size: 20, relativeTo: .title3)) + } + .foregroundStyle(Color(demoHex: 0x1C1B1B)) + .padding(.horizontal, 16) + .frame(height: 48) + .background(.white, in: RoundedRectangle(cornerRadius: 24)) + .accessibilityElement(children: .combine) + .accessibilityIdentifier("headline") + } +} + +/// Figma "inputs": a 16-point stack, drawn as a card with a hard offset shadow in Doggo. +private struct DemoCard: View { + let theme: DemoTheme + let content: () -> Content + + var body: some View { + let shape = RoundedRectangle(cornerRadius: theme.cardCornerRadius) + VStack(alignment: .leading, spacing: 16, content: content) + .padding(theme.cardPadding) + .frame(maxWidth: .infinity, alignment: .leading) + .background { + if let fill = theme.cardFill { + shape.fill(fill) + } + } + .hardShadow(theme.cardShadow, shape: shape) + .accessibilityElement(children: .contain) + .accessibilityIdentifier("inputs") + } +} + +extension View { + /// The width every demo screen's content takes: inset 32 points from the sheet's edges, and + /// no wider than 480 points so it doesn't stretch on iPad. Narrower than the Figma frames' + /// 49-point inset, which left too little room on phones. + func demoContentWidth() -> some View { + frame(maxWidth: 480) + .padding(.horizontal, 32) + } + + /// A Figma drop shadow with zero blur: an offset copy of the shape drawn behind the view. + @ViewBuilder + func hardShadow(_ shadow: DemoTheme.Shadow?, shape: some Shape) -> some View { + if let shadow { + background { + shape.fill(shadow.color).offset(x: shadow.x, y: shadow.y) + } + } else { + self + } + } + + func demoText(_ token: DemoTheme.TextToken, + relativeTo style: Font.TextStyle = .body) -> some View { + font(token.font(relativeTo: style)) + .foregroundStyle(token.color) + .underline(token.underline) + } +} + +/// Figma "text-field": 56 points tall with a 48-point leading icon slot. `icon` is an SF Symbol +/// standing in for the Material Symbols glyph named in Figma. +struct DemoTextField: View { + var icon: String? + let placeholder: String + @Binding var text: String + var isSecure = false + var keyboard: UIKeyboardType = .default + var contentType: UITextContentType? + var identifier: String + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + @State private var isRevealed = false + + var body: some View { + let theme = themeID.theme + let shape = RoundedRectangle(cornerRadius: theme.fieldCornerRadius) + HStack(spacing: 0) { + if let icon { + Image(systemName: icon) + .font(.system(size: 20, weight: theme.fieldIconWeight)) + .foregroundStyle(theme.fieldIcon) + .frame(width: 48, height: 48) + } + Group { + if isSecure, !isRevealed { + SecureField(text: $text) { placeholderText(theme) } + } else { + TextField(text: $text) { placeholderText(theme) } + } + } + .font(theme.fieldText.font()) + .foregroundStyle(theme.fieldText.color) + .tint(theme.fieldText.color) + .keyboardType(keyboard) + .textContentType(contentType) + .textInputAutocapitalization(.never) + .autocorrectionDisabled() + .padding(.leading, icon == nil ? 16 : 0) + .accessibilityIdentifier(identifier) + if isSecure { + Button { + isRevealed.toggle() + } label: { + Image(systemName: isRevealed ? "eye" : "eye.slash") + .foregroundStyle(theme.fieldTrailingIcon) + .frame(width: 48, height: 48) + } + .accessibilityLabel(isRevealed ? "Hide password" : "Show password") + .accessibilityIdentifier("trailing-icon") + } + } + .padding(.vertical, 4) + .padding(.trailing, isSecure ? 0 : 16) + .frame(minHeight: 56) + .background(theme.fieldFill, in: shape) + .overlay { + shape.strokeBorder(theme.fieldStroke.color, lineWidth: theme.fieldStroke.width) + } + } + + private func placeholderText(_ theme: DemoTheme) -> Text { + Text(placeholder).foregroundStyle(theme.fieldPlaceholder) + } +} + +/// Figma "button": 64 points tall and as wide as the form. +struct DemoButton: View { + enum Kind { + case primary + case secondary + } + + let title: String + var kind: Kind = .primary + var isLoading = false + var identifier: String + let action: () -> Void + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + @Environment(\.isEnabled) private var isEnabled + + var body: some View { + let theme = themeID.theme + let colors = kind == .primary ? theme.primaryButton : theme.secondaryButton + let shape = RoundedRectangle(cornerRadius: theme.buttonCornerRadius) + Button(action: action) { + ZStack { + Text(title) + .font(theme.buttonFont.font(relativeTo: .title3)) + .opacity(isLoading ? 0 : 1) + if isLoading { + ProgressView().tint(colors.label) + } + } + .foregroundStyle(colors.label) + .padding(.horizontal, 24) + .frame(maxWidth: .infinity, minHeight: 64) + .background(colors.fill, in: shape) + .overlay { + if let stroke = theme.buttonStroke { + shape.strokeBorder(stroke.color, lineWidth: stroke.width) + } + } + .hardShadow(theme.buttonShadow, shape: shape) + // Composited first, so the shadow doesn't show through the faded fill. + .compositingGroup() + .opacity(isEnabled ? 1 : 0.5) + } + .buttonStyle(.plain) + .accessibilityIdentifier(identifier) + } +} + +/// Figma "Forgot password?": a text link in the theme's link style. +struct DemoLink: View { + let title: String + var alignment: Alignment = .trailing + var identifier: String + let action: () -> Void + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + @Environment(\.isEnabled) private var isEnabled + + private var textAlignment: TextAlignment { + switch alignment { + case .center: .center + case .trailing: .trailing + default: .leading + } + } + + var body: some View { + Button(action: action) { + Text(title) + .demoText(themeID.theme.link) + .multilineTextAlignment(textAlignment) + .opacity(isEnabled ? 1 : 0.5) + // A taller tap area than the text, without changing the layout. + .padding(.vertical, 8) + .contentShape(Rectangle()) + .padding(.vertical, -8) + } + .buttonStyle(.plain) + .frame(maxWidth: .infinity, alignment: alignment) + .accessibilityIdentifier(identifier) + } +} + +/// Supporting copy on the screens Figma doesn't cover, in the "Other sign in methods" style. +struct DemoBodyText: View { + let text: String + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + init(_ text: String) { + self.text = text + } + + var body: some View { + Text(text) + .demoText(themeID.theme.body) + .fixedSize(horizontal: false, vertical: true) + } +} + +/// A slot's `errorMessage`, set in the library's typography with `.authFont(_:weight:)`. +struct DemoErrorText: View { + let message: String? + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + var body: some View { + if let message { + Text(message) + .authFont(.footnote) + .foregroundStyle(themeID.theme.errorColor) + .fixedSize(horizontal: false, vertical: true) + .accessibilityIdentifier("error-message") + } + } +} + +/// Switches the demo's theme live from any screen, like the web demo's switcher. +struct DemoThemeMenu: View { + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + var body: some View { + Menu { + Picker("Theme", selection: $themeID) { + ForEach(DemoThemeID.allCases) { theme in + Text(theme.label).tag(theme) + } + } + } label: { + Image(systemName: "paintpalette") + .foregroundStyle(Color(UIColor.label)) + } + .accessibilityLabel("Theme") + .accessibilityIdentifier("theme-switcher") + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoEmailAndPhoneScreens.swift b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoEmailAndPhoneScreens.swift new file mode 100644 index 00000000000..cde1bfaed9a --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoEmailAndPhoneScreens.swift @@ -0,0 +1,207 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthSwiftUI +import SwiftUI + +// The Figma file has no frames for these screens; their copy and structure follow the +// FirebaseUI-Android full customization demo, restyled with the theme's Landing values. + +struct DemoPasswordRecovery: View { + var body: some View { + PasswordRecoveryScreen { state in + if state.didSend { + DemoPage(title: "Check your inbox") { + DemoBodyText("Reset link sent! Follow the link we sent to \(state.sentEmail).") + DemoButton( + title: "Back to login", + identifier: "back-to-login-button", + action: state.dismissSuccess + ) + } + } else { + DemoPage(title: "Reset password") { + DemoBodyText("Enter your email address and we'll send you a link to reset it.") + DemoTextField( + icon: "at", + placeholder: "Email address", + text: state.email, + keyboard: .emailAddress, + contentType: .emailAddress, + identifier: "email-field" + ) + DemoErrorText(message: state.errorMessage) + DemoButton( + title: "Send reset link", + isLoading: state.isLoading, + identifier: "send-reset-link-button", + action: state.sendResetLink + ) + .disabled(!state.isValid) + } + } + } + } +} + +struct DemoEmailLink: View { + var body: some View { + EmailLinkScreen { state in + if state.didSend { + DemoPage(title: "Check your inbox") { + DemoBodyText( + "Login link sent! Open it on this device to sign in as \(state.email.wrappedValue)." + ) + DemoErrorText(message: state.errorMessage) + DemoButton( + title: "Use a different email", + kind: .secondary, + isLoading: state.isLoading, + identifier: "different-email-button", + action: state.dismissAlert + ) + } + } else { + DemoPage(title: "Email link sign-in") { + DemoBodyText("We'll email you a link that signs you in, no password needed.") + DemoTextField( + icon: "at", + placeholder: "Email address", + text: state.email, + keyboard: .emailAddress, + contentType: .emailAddress, + identifier: "email-field" + ) + DemoErrorText(message: state.errorMessage) + DemoButton( + title: "Send login link", + isLoading: state.isLoading, + identifier: "send-login-link-button", + action: state.sendSignInLink + ) + .disabled(!state.isValid) + } + } + } + } +} + +struct DemoEnterPhoneNumber: View { + var body: some View { + EnterPhoneNumberScreen { state in + DemoPage(title: "Login by phone number") { + DemoPhoneNumberField(phoneNumber: state.phoneNumber, country: state.selectedCountry) + DemoBodyText( + "By signing in with phone number, an SMS may be sent. Message & data rates may apply." + ) + DemoErrorText(message: state.errorMessage) + DemoButton( + title: "Send code", + isLoading: state.isLoading, + identifier: "send-code-button", + action: state.sendCode + ) + .disabled(!state.isValid) + } + } + } +} + +struct DemoEnterVerificationCode: View { + let verificationID: String + let fullPhoneNumber: String + + var body: some View { + EnterVerificationCodeScreen( + verificationID: verificationID, + fullPhoneNumber: fullPhoneNumber + ) { state in + DemoPage(title: "Enter your code") { + DemoBodyText("We sent a code to \(state.fullPhoneNumber).") + DemoCodeField(code: state.verificationCode, identifier: "verification-code-field") + DemoErrorText(message: state.errorMessage) + DemoButton( + title: "Verify", + isLoading: state.isLoading, + identifier: "verify-button", + action: state.verify + ) + .disabled(!state.isValid) + DemoLink( + title: state.resendCountdown > 0 + ? "Resend code in \(state.resendCountdown)s" + : "Resend code", + alignment: .leading, + identifier: "resend-code-button", + action: state.resendCode + ) + .disabled(state.resendCountdown > 0 || state.isLoading) + DemoLink( + title: "Use a different number", + alignment: .leading, + identifier: "change-number-button", + action: state.changeNumber + ) + } + } + } +} + +/// The library's `CountrySelector` inside a demo text field's frame, tinted with the field text. +struct DemoPhoneNumberField: View { + let phoneNumber: Binding + let country: Binding + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + var body: some View { + let theme = themeID.theme + let shape = RoundedRectangle(cornerRadius: theme.fieldCornerRadius) + HStack(spacing: 8) { + CountrySelector(selectedCountry: country) + .tint(theme.fieldText.color) + .font(theme.fieldText.font()) + .accessibilityIdentifier("country-selector") + TextField(text: phoneNumber) { + Text("Phone number").foregroundStyle(theme.fieldPlaceholder) + } + .font(theme.fieldText.font()) + .foregroundStyle(theme.fieldText.color) + .keyboardType(.phonePad) + .textContentType(.telephoneNumber) + .accessibilityIdentifier("phone-number-field") + } + .padding(.horizontal, 16) + .frame(minHeight: 56) + .background(theme.fieldFill, in: shape) + .overlay { shape.strokeBorder(theme.fieldStroke.color, lineWidth: theme.fieldStroke.width) } + } +} + +/// A one-time code in a demo text field. +struct DemoCodeField: View { + let code: Binding + var identifier: String + + var body: some View { + DemoTextField( + icon: "number", + placeholder: "6-digit code", + text: code, + keyboard: .numberPad, + contentType: .oneTimeCode, + identifier: identifier + ) + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoLanding.swift b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoLanding.swift new file mode 100644 index 00000000000..e7bdffa0c4f --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoLanding.swift @@ -0,0 +1,342 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthSwiftUI +import FirebaseOAuthSwiftUI +import SwiftUI + +/// The whole signed-out first screen, from the Figma Landing frames. `EmailAuthScreen` drives the +/// email form, and the provider buttons start sign-in through `AuthMethodPickerState`, so MFA, +/// account conflicts and errors are routed the same as with the stock screen. +struct DemoLanding: View { + let pickerState: AuthMethodPickerState + + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + var body: some View { + EmailAuthScreen { state in + DemoPage(title: title(for: state.flow)) { + emailForm(state) + } footer: { + DemoOtherSignInMethods( + pickerState: pickerState, + flow: state.flow, + switchFlow: state.switchFlow + ) + } + } + } + + private func title(for flow: AuthenticationFlow) -> String? { + guard themeID.theme.showsTitle else { return nil } + return flow == .signIn ? "Login" : "Sign up" + } + + @ViewBuilder + private func emailForm(_ state: EmailAuthContentState) -> some View { + DemoTextField( + icon: "at", + placeholder: "Email address", + text: state.email, + keyboard: .emailAddress, + contentType: .emailAddress, + identifier: "email-field" + ) + DemoTextField( + icon: "ellipsis.rectangle", + placeholder: "Password", + text: state.password, + isSecure: true, + contentType: state.flow == .signIn ? .password : .newPassword, + identifier: "password-field" + ) + if state.flow == .signUp { + DemoTextField( + icon: "ellipsis.rectangle", + placeholder: "Confirm password", + text: state.confirmPassword, + isSecure: true, + contentType: .newPassword, + identifier: "confirm-password-field" + ) + } + DemoErrorText(message: state.errorMessage) + if state.flow == .signIn { + DemoLink( + title: "Forgot password?", + identifier: "forgot-password", + action: state.goToPasswordRecovery + ) + } + DemoButton( + title: state.flow == .signIn ? "Login" : "Create account", + isLoading: state.isLoading, + identifier: "sign-in-button", + action: state.flow == .signIn ? state.signIn : state.signUp + ) + .disabled(!state.isValid) + if pickerState.isEmailLinkEnabled { + DemoButton( + title: "Email link sign-in", + kind: .secondary, + identifier: "email-link-button", + action: state.goToEmailLink + ) + } + } +} + +/// Figma "Content": the other sign-in methods, the flow switch and the terms. Google and phone +/// get the buttons drawn in Figma; any other registered provider is listed in a sheet. +private struct DemoOtherSignInMethods: View { + let pickerState: AuthMethodPickerState + let flow: AuthenticationFlow + let switchFlow: () -> Void + + @Environment(AuthService.self) private var authService + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + @State private var isShowingOtherProviders = false + @State private var pendingProvider: AuthProviderUI? + + private var google: AuthProviderUI? { + pickerState.providers.first { $0.id == "google.com" } + } + + private var phone: AuthProviderUI? { + pickerState.providers.first { $0.id == "phone" } + } + + private var otherProviders: [AuthProviderUI] { + pickerState.providers.filter { $0.id != "google.com" && $0.id != "phone" } + } + + var body: some View { + let theme = themeID.theme + VStack(spacing: 0) { + // Not where Figma has it: the sign-in / sign-up switch belongs to the email form, so it + // sits right below the form, above the other sign-in methods. + Button(action: switchFlow) { + flowSwitchText(theme) + .frame(minHeight: 44) + .contentShape(Rectangle()) + } + .buttonStyle(.plain) + .accessibilityIdentifier("login") + + VStack(spacing: 12) { + // Like the Figma text layer, the label spans the frame's padding so it doesn't wrap. + Text("Other sign in methods") + .demoText(theme.otherLabel) + .lineLimit(1) + .padding(.horizontal, -theme.otherPadding.leading) + .accessibilityIdentifier("other-sign-in-methods") + if let google { + DemoProviderButton( + title: "Continue with Google", + fill: .white, + label: theme.googleLabel, + stroke: .black, + cornerRadius: 80, + identifier: "google-button" + ) { + Image("FullCustomization/google-g") + } action: { + pickerState.select(google) + } + } + if let phone { + DemoProviderButton( + title: "Sign in with phone", + fill: theme.phoneProvider.fill, + label: theme.phoneProvider.label, + cornerRadius: theme.phoneProvider.cornerRadius, + identifier: "phone-button" + ) { + // Material Symbols "phone". + Image(systemName: "phone") + .font(.system(size: 18, weight: .medium)) + } action: { + pickerState.select(phone) + } + } + if !otherProviders.isEmpty { + // Not in Figma: the remaining providers, behind a pill styled like Google's. + DemoProviderButton( + title: "More sign-in options", + fill: .white, + label: theme.googleLabel, + stroke: .black, + cornerRadius: 80, + identifier: "other-providers-button" + ) { + Image(systemName: "ellipsis.circle") + .font(.system(size: 18, weight: .medium)) + } action: { + isShowingOtherProviders = true + } + } + } + .padding(theme.otherPadding) + .overlay(alignment: .top) { + // A 4-point top stroke centred on the frame edge, so the inner 2 points show. + Rectangle() + .fill(theme.dividerColor) + .frame(height: 2) + } + .accessibilityElement(children: .contain) + .accessibilityIdentifier("other") + // With the switch row's 12-point inset, the divider sits 24 points below the switch text, + // the same as the gap above it. + .padding(.top, 12) + + termsText(theme) + .padding(.top, 24) + } + .demoContentWidth() + // Sign-in starts once the sheet is gone, so a provider that presents its own screen + // (such as an OAuth web view) isn't presented from a sheet that is animating away. + .sheet(isPresented: $isShowingOtherProviders, onDismiss: { + if let provider = pendingProvider { + pendingProvider = nil + pickerState.select(provider) + } + }) { + DemoOtherProvidersSheet(providers: otherProviders) { provider in + pendingProvider = provider + isShowingOtherProviders = false + } + .presentationDetents([.medium, .large]) + } + } + + private func flowSwitchText(_ theme: DemoTheme) -> Text { + let prompt = flow == .signIn ? "Don't have an account? " : "Already have an account? " + let action = flow == .signIn ? "Sign up" : "Login" + return Text(prompt) + .font(theme.footerText.font()) + .foregroundColor(theme.footerText.color) + + Text(action) + .font(theme.footerAccent.font()) + .foregroundColor(theme.footerAccent.color) + .underline(theme.footerAccent.underline) + } + + /// The library's `PrivacyTOCsView` is internal, so a whole custom first screen draws its own + /// terms copy from the configured URLs. + @ViewBuilder + private func termsText(_ theme: DemoTheme) -> some View { + let configuration = authService.configuration + if let tosUrl = configuration.tosUrl, let privacyPolicyUrl = configuration.privacyPolicyUrl, + let terms = try? AttributedString(markdown: """ + By continuing, you agree to the [Terms of Service](\(tosUrl.absoluteString)) \ + and [Privacy Policy](\(privacyPolicyUrl.absoluteString)). + """) { + Text(terms) + .font(theme.footerText.font(relativeTo: .footnote)) + .foregroundStyle(theme.footerText.color) + .tint(theme.footerAccent.color) + .multilineTextAlignment(.center) + .accessibilityIdentifier("terms") + } + } +} + +/// Figma "android_light_rd_SI": a 52-point pill with a 20-point icon and a label. +private struct DemoProviderButton: View { + let title: String + let fill: Color + let label: DemoTheme.TextToken + var stroke: Color? + let cornerRadius: CGFloat + var identifier: String + @ViewBuilder let icon: () -> Icon + let action: () -> Void + + var body: some View { + let shape = RoundedRectangle(cornerRadius: cornerRadius) + Button(action: action) { + HStack(spacing: 12) { + icon() + .frame(width: 20, height: 20) + Text(title) + .font(label.font(relativeTo: .subheadline)) + .tracking(0.1) + .lineLimit(1) + .minimumScaleFactor(0.8) + } + .foregroundStyle(label.color) + .padding(16) + .frame(maxWidth: .infinity, minHeight: 52, alignment: .leading) + .background(fill, in: shape) + .overlay { + if let stroke { + shape.strokeBorder(stroke, lineWidth: 1) + } + } + } + .buttonStyle(.plain) + .accessibilityIdentifier(identifier) + } +} + +/// The registered providers the Figma frames don't draw, as the library's own brand buttons. +/// `AuthProviderButton` takes the demo's action, so sign-in still goes through +/// `AuthMethodPickerState.select` once the sheet has closed. +private struct DemoOtherProvidersSheet: View { + let providers: [AuthProviderUI] + let select: (AuthProviderUI) -> Void + + @Environment(AuthService.self) private var authService + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + var body: some View { + let theme = themeID.theme + ScrollView { + VStack(spacing: 16) { + Text("Other sign in methods") + .demoText(theme.otherLabel) + .padding(.bottom, 4) + ForEach(providers, id: \.id) { provider in + let button = stockButton(for: provider) + AuthProviderButton( + label: button.label, + style: button.style, + accessibilityId: "\(provider.id)-button" + ) { + select(provider) + } + } + } + .demoContentWidth() + .padding(.vertical, 32) + .frame(maxWidth: .infinity) + } + .background { DemoThemeBackground(theme: theme) } + } + + /// The label and style the provider's stock button uses. + private func stockButton(for provider: AuthProviderUI) -> (label: String, style: ProviderStyle) { + if let oauth = provider.provider as? OAuthProviderSwift { + return (oauth.buttonLabel, ProviderStyle( + icon: oauth.buttonIcon, + backgroundColor: oauth.buttonBackgroundColor, + contentColor: oauth.buttonForegroundColor + )) + } + if provider.id == "apple.com" { + return (authService.string.appleLoginButtonLabel, .apple) + } + return ("Sign in with \(provider.displayName)", .empty) + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoTheme.swift b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoTheme.swift new file mode 100644 index 00000000000..08df1407b3c --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/DemoTheme.swift @@ -0,0 +1,380 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAuthSwiftUI +import SwiftUI + +/// The three looks of the full customization demo, one per iOS Landing frame in the +/// "Firebase auth flows" Figma file: Doggo (17:12933), Grid (20:5467) and Coffee Spark (20:5769). +/// Every value below is read from those frames; screens the frames don't cover reuse them. +enum DemoThemeID: String, CaseIterable, Identifiable { + case doggo + case grid + case spark + + static let storageKey = "fullCustomization.theme" + + var id: String { rawValue } + + var label: String { + switch self { + case .doggo: "Doggo" + case .grid: "Grid" + case .spark: "Coffee Spark" + } + } + + var theme: DemoTheme { + switch self { + case .doggo: .doggo + case .grid: .grid + case .spark: .spark + } + } +} + +struct DemoTheme { + struct TextToken { + var fontName: String + var size: CGFloat + var color: Color + var underline = false + + func font(relativeTo style: Font.TextStyle = .body) -> Font { + .custom(fontName, size: size, relativeTo: style) + } + } + + struct ButtonColors { + var fill: Color + var label: Color + } + + struct Shadow { + var color: Color + var x: CGFloat + var y: CGFloat + } + + struct Stroke { + var color: Color + var width: CGFloat + } + + struct Provider { + var fill: Color + var label: DemoTheme.TextToken + var cornerRadius: CGFloat + } + + let id: DemoThemeID + /// The family handed to `AuthTypography`, so library screens the demo doesn't replace (update + /// password, reauthentication, delete confirmation) use the theme's font too. + let libraryFontFamily: String + let pageBackground: Color + + /// The "title" text above the form. Coffee Spark hides it in Figma and shows ``headline``. + let title: TextToken + let showsTitle: Bool + /// Space between the title and the form: the "sign up" frame's title-to-inputs offset. + let titleSpacing: CGFloat + + /// The "inputs" frame: Doggo draws it as a card; Grid and Coffee Spark leave it bare. + let cardFill: Color? + let cardCornerRadius: CGFloat + let cardPadding: CGFloat + let cardShadow: Shadow? + + /// The "text-field" instance. + let fieldFill: Color + let fieldStroke: Stroke + let fieldCornerRadius: CGFloat + let fieldText: TextToken + let fieldPlaceholder: Color + let fieldIcon: Color + let fieldIconWeight: Font.Weight + let fieldTrailingIcon: Color + + let link: TextToken + + /// The "button" instances: primary is "Login", secondary is "Email link sign-in". + let buttonFont: TextToken + let buttonCornerRadius: CGFloat + let buttonStroke: Stroke? + let buttonShadow: Shadow? + let primaryButton: ButtonColors + let secondaryButton: ButtonColors + + /// The "Content" frame below the form. + let dividerColor: Color + let otherLabel: TextToken + let otherPadding: EdgeInsets + let googleLabel: TextToken + let phoneProvider: Provider + let footerText: TextToken + let footerAccent: TextToken + + let errorColor = Color(demoHex: 0xBA1A1A) + + var body: TextToken { otherLabel } +} + +extension DemoTheme { + /// Figma 17:12933 "Landing". + static let doggo = DemoTheme( + id: .doggo, + libraryFontFamily: "Onest", + pageBackground: Color(demoHex: 0xFFF8F8), + title: TextToken(fontName: "BagelFatOne-Regular", size: 28, color: Color(demoHex: 0x864B6F)), + showsTitle: true, + titleSpacing: 12, + cardFill: Color(demoHex: 0xFFF8F8), + cardCornerRadius: 24, + cardPadding: 16, + cardShadow: Shadow(color: Color(demoHex: 0xFFD8EB), x: 3, y: 6), + fieldFill: .white, + fieldStroke: Stroke(color: Color(demoHex: 0xD3C2C9), width: 1), + fieldCornerRadius: 24, + fieldText: TextToken(fontName: "Onest-Medium", size: 16, color: Color(demoHex: 0x211A1D)), + fieldPlaceholder: Color(demoHex: 0xA08B95), + fieldIcon: Color(demoHex: 0xA08B95), + fieldIconWeight: .bold, + fieldTrailingIcon: Color(demoHex: 0x49454F), + link: TextToken( + fontName: "Onest-Medium", + size: 16, + color: Color(demoHex: 0x864B6F), + underline: true + ), + buttonFont: TextToken(fontName: "Onest-Bold", size: 20, color: .white), + buttonCornerRadius: 36, + buttonStroke: nil, + buttonShadow: Shadow(color: Color(demoHex: 0x5D0B47), x: 2, y: 4), + primaryButton: ButtonColors(fill: Color(demoHex: 0x864B6F), label: .white), + secondaryButton: ButtonColors(fill: Color(demoHex: 0xFFD8EB), label: Color(demoHex: 0x7B3B73)), + dividerColor: Color(demoHex: 0x864B6F), + otherLabel: TextToken(fontName: "Onest-Medium", size: 16, color: Color(demoHex: 0xA08B95)), + otherPadding: EdgeInsets(top: 16, leading: 40, bottom: 0, trailing: 40), + googleLabel: TextToken(fontName: "Roboto-SemiBold", size: 14, color: .black), + phoneProvider: Provider( + fill: Color(demoHex: 0x894680), + label: TextToken(fontName: "Roboto-Medium", size: 14, color: .white), + cornerRadius: 80 + ), + footerText: TextToken(fontName: "Onest-Medium", size: 14, color: Color(demoHex: 0x202124)), + footerAccent: TextToken(fontName: "Onest-Bold", size: 14, color: Color(demoHex: 0x894680)) + ) + + /// Figma 20:5467 "iOS Landing" with the grid background. + static let grid = DemoTheme( + id: .grid, + libraryFontFamily: "Chivo Mono", + pageBackground: Color(demoHex: 0xF3FBFB), + title: TextToken(fontName: "Rowdies-Regular", size: 28, color: Color(demoHex: 0x2C1067)), + showsTitle: true, + titleSpacing: 12, + cardFill: nil, + cardCornerRadius: 24, + cardPadding: 0, + cardShadow: nil, + fieldFill: .white, + fieldStroke: Stroke(color: Color(demoHex: 0x00DCE2), width: 2), + fieldCornerRadius: 16, + fieldText: TextToken(fontName: "ChivoMono-Medium", size: 16, color: Color(demoHex: 0x2C1067)), + fieldPlaceholder: Color(demoHex: 0x2C1067), + fieldIcon: Color(demoHex: 0x2C1067), + fieldIconWeight: .regular, + fieldTrailingIcon: Color(demoHex: 0x2C1067), + link: TextToken(fontName: "ChivoMono-Medium", size: 16, color: Color(demoHex: 0xFF52B3)), + buttonFont: TextToken(fontName: "Rowdies-Bold", size: 20, color: Color(demoHex: 0x2C1067)), + buttonCornerRadius: 24, + buttonStroke: Stroke(color: Color(demoHex: 0x00DCE2), width: 2), + buttonShadow: Shadow(color: Color(demoHex: 0x00DCE2), x: 3, y: 6), + primaryButton: ButtonColors(fill: Color(demoHex: 0xFF52B3), label: Color(demoHex: 0x2C1067)), + secondaryButton: ButtonColors(fill: Color(demoHex: 0xF3FBFB), label: Color(demoHex: 0x2C1067)), + dividerColor: Color(demoHex: 0x864B6F), + otherLabel: TextToken(fontName: "ChivoMono-Medium", size: 16, color: Color(demoHex: 0x2C1067)), + otherPadding: EdgeInsets(top: 16, leading: 40, bottom: 0, trailing: 40), + googleLabel: TextToken(fontName: "Roboto-SemiBold", size: 14, color: .black), + phoneProvider: Provider( + fill: Color(demoHex: 0x00DCE2), + label: TextToken(fontName: "ChivoMono-Medium", size: 14, color: Color(demoHex: 0x2C1067)), + cornerRadius: 12 + ), + footerText: TextToken(fontName: "ChivoMono-Medium", size: 14, color: Color(demoHex: 0x202124)), + footerAccent: TextToken( + fontName: "ChivoMono-Bold", + size: 14, + color: Color(demoHex: 0xFF52B3), + underline: true + ) + ) + + /// Figma 20:5769 "iOS Landing" with the Coffee Spark headline. + static let spark = DemoTheme( + id: .spark, + libraryFontFamily: "JetBrains Mono", + pageBackground: Color(demoHex: 0xF1F1F1), + // The frame's "title" text is hidden; this size is the Doggo and Grid title's, used on the + // screens Figma doesn't cover. + title: TextToken(fontName: "JetBrainsMono-Medium", size: 28, color: Color(demoHex: 0x1C1B1B)), + showsTitle: false, + titleSpacing: 12, + cardFill: nil, + cardCornerRadius: 24, + cardPadding: 0, + cardShadow: nil, + fieldFill: .white, + fieldStroke: Stroke(color: .black, width: 2), + fieldCornerRadius: 16, + fieldText: TextToken(fontName: "JetBrainsMono-Medium", size: 16, color: .black), + fieldPlaceholder: .black, + fieldIcon: .black, + fieldIconWeight: .regular, + fieldTrailingIcon: .black, + link: TextToken(fontName: "JetBrainsMono-Medium", size: 16, color: Color(demoHex: 0x34A853)), + buttonFont: TextToken(fontName: "JetBrainsMono-Bold", size: 20, color: .black), + buttonCornerRadius: 40, + buttonStroke: Stroke(color: .black, width: 2), + buttonShadow: nil, + primaryButton: ButtonColors(fill: Color(demoHex: 0xFDADEE), label: .black), + secondaryButton: ButtonColors(fill: Color(demoHex: 0xF3FBFB), label: .black), + dividerColor: Color(demoHex: 0xFDFCFB), + otherLabel: TextToken(fontName: "JetBrainsMono-Medium", size: 16, color: .black), + otherPadding: EdgeInsets(top: 24, leading: 54, bottom: 0, trailing: 54), + googleLabel: TextToken(fontName: "Roboto-SemiBold", size: 14, color: .black), + phoneProvider: Provider( + fill: Color(demoHex: 0xC6FF00), + label: TextToken(fontName: "ChivoMono-Medium", size: 14, color: Color(demoHex: 0x34A853)), + cornerRadius: 40 + ), + footerText: TextToken(fontName: "ChivoMono-Medium", size: 14, color: Color(demoHex: 0x202124)), + footerAccent: TextToken( + fontName: "ChivoMono-Bold", + size: 14, + color: Color(demoHex: 0x34A853), + underline: true + ) + ) +} + +// MARK: - Library theming + +extension DemoTheme { + var typography: AuthTypography { + AuthTypography(fontName: libraryFontFamily) + } + + var textFieldStyle: AuthTextFieldStyle { + AuthTextFieldStyle( + tint: fieldStroke.color, + containerColor: fieldFill, + secondaryColor: fieldPlaceholder, + errorColor: errorColor, + cornerRadius: fieldCornerRadius + ) + } + + var ctaButtonStyle: AuthCTAButtonStyle { + AuthCTAButtonStyle( + backgroundColor: primaryButton.fill, + contentColor: primaryButton.label, + shape: .roundedRectangle(radius: buttonCornerRadius), + font: buttonFont.font() + ) + } +} + +// MARK: - Background art + +/// The background layers of each frame, placed at their Figma offsets from the frame's top-left +/// corner: "bg" and "pattern" in Doggo, "Frame 5" in Grid and "avatar spark" in Coffee Spark. +struct DemoThemeBackground: View { + let theme: DemoTheme + + var body: some View { + // An overlay, so the art larger than the screen doesn't size the background itself. + theme.pageBackground + .overlay(alignment: .topLeading) { art } + .clipped() + .ignoresSafeArea() + .accessibilityHidden(true) + } + + private var art: some View { + ZStack(alignment: .topLeading) { + switch theme.id { + case .doggo: + DoggoGradient() + .frame(width: 441.481, height: 934.09) + .offset(x: -8, y: 0) + art("doggo-pattern", x: -160, y: -680, width: 1031, height: 1042) + case .grid: + art("grid-pattern", x: -269, y: -75, width: 997, height: 997) + case .spark: + // The export includes the layer's texture and noise effects, so it is larger than the + // 583x568 layer; it is centred on the layer's bounds. + art("spark-blob", x: -295.8, y: -317.7, width: 751, height: 735.3) + } + } + } + + private func art(_ name: String, x: CGFloat, y: CGFloat, width: CGFloat, + height: CGFloat) -> some View { + Image("FullCustomization/\(name)") + .resizable() + .frame(width: width, height: height) + .offset(x: x, y: y) + .accessibilityIdentifier(name) + } +} + +/// Figma "bg" (17:12934): a radial gradient whose ellipse is given by three handle points in the +/// layer's unit square, drawn by mapping a unit circle onto that ellipse. +private struct DoggoGradient: View { + var body: some View { + Canvas { context, size in + let origin = CGPoint(x: -0.03 * size.width, y: 0) + let axisX = CGPoint(x: 0.95 * size.width - origin.x, y: 0.55 * size.height - origin.y) + let axisY = CGPoint(x: -0.83 * size.width - origin.x, y: 1.08 * size.height - origin.y) + var unit = context + unit.transform = CGAffineTransform( + a: axisX.x, b: axisX.y, c: axisY.x, d: axisY.y, tx: origin.x, ty: origin.y + ) + unit.fill( + Path(CGRect(x: -2, y: -2, width: 4, height: 4)), + with: .radialGradient( + Gradient(stops: [ + .init(color: Color(demoHex: 0xFFF8F8), location: 0.04), + .init(color: Color(demoHex: 0xFFDDB4), location: 0.34), + .init(color: Color(demoHex: 0xFFD8EB), location: 0.74), + ]), + center: .zero, + startRadius: 0, + endRadius: 1 + ) + ) + } + } +} + +extension Color { + init(demoHex hex: UInt32) { + self.init( + red: Double((hex >> 16) & 0xFF) / 255, + green: Double((hex >> 8) & 0xFF) / 255, + blue: Double(hex & 0xFF) / 255 + ) + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/BagelFatOne-400.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/BagelFatOne-400.ttf new file mode 100644 index 00000000000..2caed33cea2 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/BagelFatOne-400.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/ChivoMono-500.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/ChivoMono-500.ttf new file mode 100644 index 00000000000..232a06976f8 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/ChivoMono-500.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/ChivoMono-700.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/ChivoMono-700.ttf new file mode 100644 index 00000000000..93a56f6de48 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/ChivoMono-700.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/JetBrainsMono-500.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/JetBrainsMono-500.ttf new file mode 100644 index 00000000000..51ccd916b8e Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/JetBrainsMono-500.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/JetBrainsMono-700.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/JetBrainsMono-700.ttf new file mode 100644 index 00000000000..1305efce9d6 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/JetBrainsMono-700.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-bagelfatone.txt b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-bagelfatone.txt new file mode 100644 index 00000000000..21c7b2d4d41 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-bagelfatone.txt @@ -0,0 +1,93 @@ +Copyright 2022 The Bagel Fat Project Authors (https://github.com/JAMO-TYPEFACE/BagelFat) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-chivomono.txt b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-chivomono.txt new file mode 100644 index 00000000000..4e5e18cc08e --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-chivomono.txt @@ -0,0 +1,93 @@ +Copyright 2019 The Chivo Project Authors (https://github.com/Omnibus-Type/Chivo) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-jetbrainsmono.txt b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-jetbrainsmono.txt new file mode 100644 index 00000000000..821a3dac22a --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-jetbrainsmono.txt @@ -0,0 +1,93 @@ +Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. + +This license is copied below, and is also available with a FAQ at: https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-onest.txt b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-onest.txt new file mode 100644 index 00000000000..b6f4f914879 --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-onest.txt @@ -0,0 +1,93 @@ +Copyright 2021 The Onest Project Authors (https://github.com/googlefonts/onest) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-roboto.txt b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-roboto.txt new file mode 100644 index 00000000000..9c48e05a24f --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-roboto.txt @@ -0,0 +1,93 @@ +Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://openfontlicense.org + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-rowdies.txt b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-rowdies.txt new file mode 100644 index 00000000000..f51da0012cd --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/OFL-rowdies.txt @@ -0,0 +1,93 @@ +Copyright 2018 The Rowdies Project Authors (https://github.com/magictype/rowdy) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +https://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Onest-500.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Onest-500.ttf new file mode 100644 index 00000000000..bf4d81d5713 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Onest-500.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Onest-700.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Onest-700.ttf new file mode 100644 index 00000000000..e5811290b87 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Onest-700.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Roboto-500.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Roboto-500.ttf new file mode 100644 index 00000000000..310c9e48da2 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Roboto-500.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Roboto-600.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Roboto-600.ttf new file mode 100644 index 00000000000..2ef85eada43 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Roboto-600.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Rowdies-400.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Rowdies-400.ttf new file mode 100644 index 00000000000..f65911f72a2 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Rowdies-400.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Rowdies-700.ttf b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Rowdies-700.ttf new file mode 100644 index 00000000000..ba852339da2 Binary files /dev/null and b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/Fonts/Rowdies-700.ttf differ diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/FullCustomizationExample.swift b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/FullCustomizationExample.swift new file mode 100644 index 00000000000..576c73a5a0e --- /dev/null +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Examples/FullCustomization/FullCustomizationExample.swift @@ -0,0 +1,139 @@ +// Copyright 2025 Google LLC +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import FirebaseAppleSwiftUI +import FirebaseAuth +import FirebaseAuthSwiftUI +import FirebaseGoogleSwiftUI +import FirebaseOAuthSwiftUI +import FirebasePhoneAuthSwiftUI +import SwiftUI + +/// Every screen of the authentication sheet drawn by the app, while the library keeps the auth +/// logic, navigation, MFA, account conflicts and reauthentication. +/// +/// - `.pickerContent { state in ... }` replaces the whole first screen. +/// - `.pickerDestination` replaces each pushed screen through its content slot; update password +/// has no slot and stays stock, falling through to `DefaultAuthPickerDestination`. +/// - `.signedInContent` replaces the signed-in screen. +/// - The theming modifiers restyle the stock screens left in the flow (update password, +/// reauthentication, delete confirmation) and the library components the demo reuses. +struct FullCustomizationExample: View { + /// Its own service, so it can turn on email-link sign-in (drawn in the Figma frames) without + /// changing the other examples. + /// Created when the example appears: `NavigationLink` builds its destination eagerly. + @State private var authService: AuthService? + + var body: some View { + if let authService { + FullCustomizationFlow() + .environment(authService) + } else { + Color.clear.onAppear { + authService = AuthService(configuration: Self.configuration) + .withEmailSignIn() + .withEmailLinkSignIn() + .withGoogleSignIn() + .withPhoneSignIn() + .withAppleSignIn() + .withOAuthSignIn(OAuthProviderSwift.github()) + } + } + } + + private static var configuration: AuthConfiguration { + let actionCodeSettings = ActionCodeSettings() + actionCodeSettings.handleCodeInApp = true + actionCodeSettings.url = URL(string: "https://flutterfire-e2e-tests.firebaseapp.com") + actionCodeSettings.setIOSBundleID(Bundle.main.bundleIdentifier!) + actionCodeSettings.linkDomain = "flutterfire-e2e-tests.firebaseapp.com" + return AuthConfiguration( + tosUrl: URL(string: "https://example.com/tos"), + privacyPolicyUrl: URL(string: "https://example.com/privacy"), + emailLinkSignInActionCodeSettings: actionCodeSettings, + mfaEnabled: true + ) + } +} + +private struct FullCustomizationFlow: View { + @Environment(AuthService.self) private var authService + @AppStorage(DemoThemeID.storageKey) private var themeID: DemoThemeID = .doggo + + var body: some View { + let theme = themeID.theme + AuthPickerView { + home + } + .pickerContent { state in + DemoLanding(pickerState: state) + } + .pickerDestination { screen in + switch screen { + case .passwordRecovery: + DemoPasswordRecovery() + case .emailLink: + DemoEmailLink() + case .enterPhoneNumber: + DemoEnterPhoneNumber() + case let .enterVerificationCode(verificationID, fullPhoneNumber): + DemoEnterVerificationCode(verificationID: verificationID, fullPhoneNumber: fullPhoneNumber) + case .mfaEnrollment: + DemoMFAEnrolment() + case .mfaManagement: + DemoMFAManagement() + case let .mfaResolution(mfaRequired): + DemoMFAResolution(mfaRequired: mfaRequired) + default: + DefaultAuthPickerDestination(screen: screen) + } + } + .signedInContent { state in + DemoSignedIn(state: state) + } + .authTypography(theme.typography) + .authTextFieldStyle(theme.textFieldStyle) + .authCTAButtonStyle(theme.ctaButtonStyle) + } + + private var home: some View { + VStack(spacing: 24) { + Picker("Theme", selection: $themeID) { + ForEach(DemoThemeID.allCases) { theme in + Text(theme.label).tag(theme) + } + } + .pickerStyle(.segmented) + .accessibilityIdentifier("theme-picker") + + if authService.authenticationState == .authenticated { + let user = authService.currentUser + Text("Signed in as \(user?.email ?? user?.phoneNumber ?? "")") + .authFont(.body) + DemoButton(title: "Manage account", identifier: "manage-account-button") { + authService.isPresented = true + } + } else { + Text("Not signed in") + .authFont(.body) + DemoButton(title: "Sign in", identifier: "sign-in-sheet-button") { + authService.isPresented = true + } + } + } + .padding(24) + .frame(maxWidth: .infinity, maxHeight: .infinity) + .background { DemoThemeBackground(theme: themeID.theme) } + } +} diff --git a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Info.plist b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Info.plist index 972c78a5b8c..53436b39dfa 100644 --- a/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Info.plist +++ b/samples/swiftui/FirebaseSwiftUISample/FirebaseSwiftUISample/Info.plist @@ -43,6 +43,20 @@ fbapi fb-messenger-share-api + UIAppFonts + + BagelFatOne-400.ttf + ChivoMono-500.ttf + ChivoMono-700.ttf + JetBrainsMono-500.ttf + JetBrainsMono-700.ttf + Onest-500.ttf + Onest-700.ttf + Roboto-500.ttf + Roboto-600.ttf + Rowdies-400.ttf + Rowdies-700.ttf + UIBackgroundModes fetch