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.

Practice

1. What is the main purpose of using SecureField in a SwiftUI app?

easy

A. To display a multiline text input

B. To hide the text input, typically for passwords

C. To create a button that submits a form

D. To show a label with static text

Solution

1. Step 1: Understand SecureField's role

   SecureField is designed to hide user input, making it ideal for passwords.

2. Step 2: Compare with other UI elements

   Unlike TextField, SecureField masks the input characters for privacy.

3. Final Answer:

   To hide the text input, typically for passwords -> Option B

4. Quick Check:

   SecureField hides input = B [OK]

Hint: SecureField always hides input text for privacy [OK]

Common Mistakes:

• Confusing SecureField with TextField
• Thinking SecureField shows visible text
• Using SecureField for buttons or labels

2. Which of the following is the correct syntax to create a SecureField bound to a @State variable named password with placeholder "Enter password"?

easy

A. SecureField("Enter password", text: $password)

B. SecureField(text: $password, placeholder: "Enter password")

C. SecureField("Enter password", binding: password)

D. SecureField(text: password, placeholder: "Enter password")

Solution

1. Step 1: Recall SecureField initializer

   The correct initializer is SecureField(_ titleKey: String, text: Binding<String>).

2. Step 2: Match syntax with variable

   Binding uses $password to connect the state variable.

3. Final Answer:

   SecureField("Enter password", text: $password) -> Option A

4. Quick Check:

   SecureField("text", text: $variable) = D [OK]

Hint: Use $ before state variable for binding in SecureField [OK]

Common Mistakes:

• Swapping parameter order
• Missing $ for binding
• Using wrong parameter names

3. What will be displayed on screen when this SwiftUI code runs?

struct ContentView: View {
  @State private var password = ""
  var body: some View {
    SecureField("Password", text: $password)
      .padding()
      .border(Color.gray)
  }
}

medium

A. A text input box showing typed characters as dots or bullets

B. A plain text label showing the word "Password"

C. A button labeled "Password"

D. An empty screen with no visible UI

Solution

1. Step 1: Identify UI element

   The code uses SecureField with placeholder "Password" and binds to a state variable.

2. Step 2: Understand SecureField behavior

   It shows a text input box that masks typed characters as dots or bullets.

3. Final Answer:

   A text input box showing typed characters as dots or bullets -> Option A

4. Quick Check:

   SecureField input masked = A [OK]

Hint: SecureField input is always masked visually [OK]

Common Mistakes:

• Thinking placeholder text is always visible
• Confusing SecureField with Text label
• Expecting a button instead of input

4. Identify the error in this SwiftUI code snippet:

@State private var password = ""
var body: some View {
  SecureField("Enter password", text: password)
}

medium

A. Password variable should be a constant

B. SecureField cannot be used inside body

C. Placeholder text must be empty string

D. Missing $ before password in binding

Solution

1. Step 1: Check binding syntax

   The text parameter requires a binding, which needs $password, not just password.

2. Step 2: Understand @State usage

   @State variables are accessed with $ to create bindings for UI elements.

3. Final Answer:

   Missing $ before password in binding -> Option D

4. Quick Check:

   Binding needs $ prefix = C [OK]

Hint: Always use $ before @State variable for binding in SecureField [OK]

Common Mistakes:

• Omitting $ causing compile error
• Thinking SecureField can't be in body
• Misunderstanding placeholder requirements

5. You want to create a password input field that shows a hint "At least 8 characters" below the SecureField. Which SwiftUI code snippet correctly achieves this?

hard

A. SecureField("Password", text: $password).hint("At least 8 characters")

B. SecureField("Password", text: $password).placeholder("At least 8 characters")

C. VStack {
SecureField("Password", text: $password)
Text("At least 8 characters").font(.footnote).foregroundColor(.gray)
}

D. Text("At least 8 characters")
SecureField("Password", text: $password)

Solution

1. Step 1: Understand layout for hint text

   Use a VStack to stack SecureField and hint Text vertically.

2. Step 2: Style hint text appropriately

   Apply smaller font and gray color to hint text for subtlety.

3. Step 3: Check other options

   Options B and C use non-existent modifiers; D places Text above SecureField, not below.

4. Final Answer:

   VStack { SecureField("Password", text: $password) Text("At least 8 characters").font(.footnote).foregroundColor(.gray) } -> Option C

5. Quick Check:

   Use VStack for hint below SecureField = A [OK]

Hint: Stack SecureField and hint Text in VStack for vertical layout [OK]

Common Mistakes:

• Using invalid modifiers like .placeholder or .hint
• Placing hint text above SecureField
• Not styling hint text for clarity