SwiftUI SecureField Strong Password

Password security is crucial for protecting sensitive information. SwiftUI’s SecureField is an excellent tool for collecting passwords securely. By implementing strong password validation, you can guide users to create passwords that meet security requirements, improving the safety of their accounts.

When to Use Password Strength

Use strong password validation with SecureField when:

  1. You need to enforce password policies (e.g., minimum length, special characters).
  2. You want to provide real-time feedback on password strength.
  3. You aim to enhance user security by encouraging strong password practices.

Syntax

</>
Copy
SecureField("Placeholder", text: $bindingVariable)
    .onChange(of: bindingVariable) { newValue in
        // Perform validation or other actions based on newValue
    }

Example

Below is an example of implementing strong password validation using SecureField.

File: ContentView.swift

</>
Copy
import SwiftUI

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

    var body: some View {
        VStack(spacing: 20) {
            SecureField("Enter your password", text: $password)
                .padding()
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .onChange(of: password) { newValue in
                    validatePassword(newValue)
                }

            Text("Password Strength: \(passwordStrength)")
                .foregroundColor(strengthColor())
                .font(.headline)

            Spacer()
        }
        .padding()
    }

    private func validatePassword(_ password: String) {
        if password.count < 8 {
            passwordStrength = "Weak"
        } else if password.rangeOfCharacter(from: .uppercaseLetters) == nil ||
                  password.rangeOfCharacter(from: .lowercaseLetters) == nil ||
                  password.rangeOfCharacter(from: .decimalDigits) == nil {
            passwordStrength = "Moderate"
        } else {
            passwordStrength = "Strong"
        }
    }

    private func strengthColor() -> Color {
        switch passwordStrength {
        case "Weak":
            return .red
        case "Moderate":
            return .orange
        case "Strong":
            return .green
        default:
            return .gray
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Detailed Explanation

  1. SecureField: Captures the user’s password securely and binds it to the @State variable password.
  2. onChange: Monitors changes to the password and calls the validatePassword function.
  3. validatePassword: Checks the password length and whether it includes uppercase, lowercase, and numeric characters to determine its strength.
  4. Text View: Displays the password strength with dynamic color updates based on the strength level.
  5. strengthColor: Returns a color corresponding to the password’s strength for visual feedback.

Output Screenshot

Example for SwiftUI SecureField with Strong Password

Working Video


Conclusion

Implementing strong password validation with SecureField enhances user security by enforcing password policies and providing feedback. This example demonstrates how to build a user-friendly and secure password input system in SwiftUI.