iOS Swiftmobile~20 mins

Firebase Authentication in iOS Swift - Mini App: Build & Ship

Choose your learning style9 modes available

Learn Why Deep UI Try Challenge Build Recall Publish

Build: Login Screen

This screen allows users to sign in using their email and password with Firebase Authentication. It shows input fields for email and password, a login button, and displays error messages if login fails.

Target UI

-------------------------
|       Login Screen     |
|-----------------------|
| Email: [___________]  |
| Password: [________]  |
|                       |
|       [Login]         |
|                       |
|  Error message here    |
-------------------------

Two TextFields: one for email, one for password

A Login button that triggers Firebase Authentication sign-in

Show an error message below the button if login fails

Disable the Login button while authentication is in progress

Use secure text entry for password field

Starter Code

iOS Swift

import SwiftUI
import FirebaseAuth

struct LoginScreen: View {
    @State private var email = ""
    @State private var password = ""
    @State private var errorMessage = ""
    @State private var isLoading = false

    var body: some View {
        VStack(spacing: 20) {
            Text("Login Screen")
                .font(.largeTitle)
                .bold()

            TextField("Email", text: $email)
                .keyboardType(.emailAddress)
                .autocapitalization(.none)
                .padding()
                .background(Color(UIColor.secondarySystemBackground))
                .cornerRadius(8)

            SecureField("Password", text: $password)
                .padding()
                .background(Color(UIColor.secondarySystemBackground))
                .cornerRadius(8)

            Button(action: {
                // TODO: Add login action
            }) {
                Text("Login")
                    .frame(maxWidth: .infinity)
                    .padding()
                    .background(Color.blue)
                    .foregroundColor(.white)
                    .cornerRadius(8)
            }
            .disabled(isLoading)

            if !errorMessage.isEmpty {
                Text(errorMessage)
                    .foregroundColor(.red)
                    .multilineTextAlignment(.center)
            }

            Spacer()
        }
        .padding()
    }
}

struct LoginScreen_Previews: PreviewProvider {
    static var previews: some View {
        LoginScreen()
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import SwiftUI
import FirebaseAuth

struct LoginScreen: View {
    @State private var email = ""
    @State private var password = ""
    @State private var errorMessage = ""
    @State private var isLoading = false

    var body: some View {
        VStack(spacing: 20) {
            Text("Login Screen")
                .font(.largeTitle)
                .bold()

            TextField("Email", text: $email)
                .keyboardType(.emailAddress)
                .autocapitalization(.none)
                .padding()
                .background(Color(UIColor.secondarySystemBackground))
                .cornerRadius(8)

            SecureField("Password", text: $password)
                .padding()
                .background(Color(UIColor.secondarySystemBackground))
                .cornerRadius(8)

            Button(action: {
                loginUser()
            }) {
                if isLoading {
                    ProgressView()
                        .frame(maxWidth: .infinity)
                        .padding()
                } else {
                    Text("Login")
                        .frame(maxWidth: .infinity)
                        .padding()
                }
            }
            .background(isLoading ? Color.gray : Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
            .disabled(isLoading)

            if !errorMessage.isEmpty {
                Text(errorMessage)
                    .foregroundColor(.red)
                    .multilineTextAlignment(.center)
            }

            Spacer()
        }
        .padding()
    }

    private func loginUser() {
        errorMessage = ""
        isLoading = true
        Auth.auth().signIn(withEmail: email, password: password) { result, error in
            isLoading = false
            if let error = error {
                errorMessage = error.localizedDescription
            } else {
                errorMessage = ""
                // Successful login - proceed to next screen or update UI
            }
        }
    }
}

struct LoginScreen_Previews: PreviewProvider {
    static var previews: some View {
        LoginScreen()
    }
}

This solution uses SwiftUI to build a simple login screen. It has two input fields: one for email and one for password. The password field hides the text for privacy.

The Login button triggers the loginUser() function, which uses Firebase Authentication's signIn(withEmail:password:) method to attempt login.

While the login is in progress, the button shows a spinner and is disabled to prevent multiple taps.

If login fails, the error message from Firebase is shown in red below the button. If login succeeds, the error message clears and you can add navigation or other logic.

This approach keeps the UI responsive and gives clear feedback to the user.

Final Result

Completed Screen

-------------------------
|       Login Screen     |
|-----------------------|
| Email: [user@example] |
| Password: [********]  |
|                       |
|       [Login]         |
|                       |
|  Invalid password      |
-------------------------