SecureField for passwords in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the visible output of this SwiftUI SecureField?

Consider this SwiftUI code snippet for a password input. What will the user see when typing in the SecureField?

iOS Swift

import SwiftUI

struct ContentView: View {
  @State private var password = ""

  var body: some View {
    SecureField("Enter password", text: $password)
      .padding()
      .border(Color.gray)
  }
}

A The typed characters appear as dots or bullets, hiding the actual text.

B The typed characters appear as plain text, visible to the user.

C The SecureField shows asterisks (*) instead of the typed characters.

D The SecureField does not accept any input and remains empty.

💡 Hint

SecureField is designed to hide the typed text for privacy.

SecureField masks the input by showing dots or bullets instead of the actual characters to keep passwords private.

❓ lifecycle

intermediate

When does the SecureField update its bound variable in SwiftUI?

Given a SecureField bound to a @State variable, when is the variable updated with the user's input?

iOS Swift

SecureField("Password", text: $password)

A When the view containing the SecureField appears.

B Only when the user presses the return key on the keyboard.

C Continuously as the user types each character.

D Only after the SecureField loses focus.

💡 Hint

SecureField updates continuously as the user types, like TextField.

SecureField updates its bound variable continuously as the user types each character, enabling reactive UI updates.

📝 Syntax

advanced

Which SwiftUI code snippet correctly creates a SecureField with a placeholder and a bound variable?

Select the code that compiles and works as expected for a SecureField with placeholder "Enter password" and bound to @State variable password.

A SecureField(text: $password, placeholder: Text("Enter password"))

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

C SecureField($password, "Enter password")

D SecureField("Enter password", binding: $password)

💡 Hint

Check the official SwiftUI SecureField initializer syntax.

The correct initializer is SecureField(_ titleKey: StringProtocol, text: Binding). Option B matches this exactly.

🔧 Debug

advanced

Why does this SecureField not update the password variable?

Examine this code snippet. The SecureField does not update the password variable when typing. What is the cause?

iOS Swift

struct ContentView: View {
  @State private var password = ""

  var body: some View {
    SecureField("Password", text: $password)
      .padding()
  }
}

A The password variable is not marked with @State, so it cannot be bound.

B The SecureField requires a @Binding variable, but password is a constant.

C The SecureField needs a TextField instead to update variables.

D The padding modifier prevents the SecureField from updating the variable.

💡 Hint

Check how SwiftUI tracks changes in variables for UI updates.

In SwiftUI, variables bound to input fields must be @State or @Binding to allow updates. Here, password is a plain variable, so binding fails.

🧠 Conceptual

expert

What is the main security benefit of using SecureField over TextField for password input?

Why should developers prefer SecureField instead of TextField when asking users for passwords?

A SecureField prevents the keyboard from showing predictive text and autocorrect.

B SecureField automatically encrypts the password before storing it in memory.

C SecureField disables copy-paste to protect the password from being copied.

D SecureField masks the input visually to prevent shoulder surfing and accidental exposure.

💡 Hint

Think about what users see when typing passwords.

SecureField hides the typed characters by showing dots or bullets, protecting the password from being seen by others nearby.

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