SecureField for passwords in iOS Swift - Mini App: Build & Ship

Build: Login Screen

A simple login screen with a secure password field that hides the typed characters.

Target UI

-------------------------
|       Login Screen     |
|-----------------------|
| Username: ____________|
| Password: ____________|
| [Login Button]        |
-------------------------

Add a TextField for username input.

Add a SecureField for password input that hides the text.

Add a Login button below the fields.

Use SwiftUI framework.

Ensure the password field does not show typed characters.

Starter Code

iOS Swift

import SwiftUI

struct LoginScreen: View {
    @State private var username = ""
    @State private var password = ""

    var body: some View {
        VStack(spacing: 20) {
            // TODO: Add username TextField here
            // TODO: Add password SecureField here
            // TODO: Add Login Button here
        }
        .padding()
    }
}

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

Task 1

Task 2

Task 3

Solution

iOS Swift

import SwiftUI

struct LoginScreen: View {
    @State private var username = ""
    @State private var password = ""

    var body: some View {
        VStack(spacing: 20) {
            TextField("Username", text: $username)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .autocapitalization(.none)
                .disableAutocorrection(true)

            SecureField("Password", text: $password)
                .textFieldStyle(RoundedBorderTextFieldStyle())

            Button("Login") {
                // Action on login tap
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
        }
        .padding()
    }
}

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

This login screen uses SwiftUI's TextField for the username and SecureField for the password. The SecureField automatically hides the typed characters, showing dots instead, which is perfect for passwords. The button is styled with a blue background and white text to stand out. The username field disables autocorrection and capitalization to make typing easier and more accurate for usernames.

Final Result

Completed Screen

-------------------------
|       Login Screen     |
|-----------------------|
| Username: [__________]|
| Password: [********]  |
| [    Login Button   ] |
-------------------------

User types username in the username field normally.

User types password in the password field; characters appear as dots.

User taps the Login button to trigger login action.

Stretch Goal

Add a toggle button to show or hide the password text in the SecureField.

💡 Hint

Use a @State boolean to switch between SecureField and TextField, and add a button with an eye icon to toggle.