SwiftUI Password: Show and Hide

When creating an app security is very important but so is convenience therefore the ability to show and hide passwords has become a crucial feature for mobile applications. In this blog post, we will explore how to create a secure text field that hides the password but also learn how to create the ability to show/hide the password.

What is SwiftUI Password?

First of let’s start with the basics, in SwiftUI a password field is called SecureField. SwiftUI SecureField is a specialized view modifier that empowers developers to create secure and user-friendly password input fields within their applications. This feature enables the masking of passwords by default, ensuring that sensitive user credentials remain hidden from prying eyes.

In the following example we will create a secure field and have a variable that contains the entered password:

struct PasswordContent: View {
    @State var password: String = ""

       var body: some View {
           VStack {
               SecureField("Enter a password", text: $password)
                   .disableAutocorrection(true)
                   .autocapitalization(.none)
                   .padding()
           }
       }
}

The result:

And there you have it. If you don’t want your app to have the ability to show/hide passwords, this is all you need but if you want that keep on reading.

We added .disableAutocorrection(true) and .autocapitalization(.none) because when we are dealing with passwords we want the user to the full control and no help in spelling correctly.

Implementing Show and Hide Password in SwiftUI

Implementing the show and hide password functionality in SwiftUI is straightforward.

The first thing we will be doing is creating a boolean variable called isShowingPassword and that pretty much decides if the password is shown or not.

Next, we will create a check if isShowingPassword is true or false and if it’s true we will show SecureField and if it’s false we will replace our SecureField with a TextField.

struct PasswordContent: View {
    @State var password: String = ""
    @State var isShowingPassword: Bool = false
    
    var body: some View {
        VStack {
            Group {
                if isShowingPassword {
                    TextField("Enter a password", text: $password)
                }else {
                    SecureField("Enter a password", text: $password)
                }
            }
            .disableAutocorrection(true)
            .autocapitalization(.none)
            .padding()
            
            Button {
                isShowingPassword.toggle()
            }label: {
                if isShowingPassword {
                    Text("Hide")
                }else {
                    Text("Show")
                }
            }
        }
    }
}

The result:

And this it, now we have created the ability for our users to show/hide their password. But there is an issue with the keyboard. The keyboard will dismiss when we change focus and that is not a great user experience.

Read on to fix those issues in the 🙂

Don’t dismiss the keyboard

The issue with the keyboard dismissing we can fix by using the .focused modifier and creating an enum that describes which field to focus on.

First, we create an enum class called FieldToFocus with two enums: secureField and textField. Next, we use the .onChange modifier to detect when the isShowingPassword variable changes when it’s true we focus the text field and if it’s false we focus the secure field. And lastly, we use the .focused modifier on the TextField and the SecureField.

struct PasswordContent: View {
    @State var password: String = ""
    @State var isShowingPassword: Bool = false
    @FocusState var isFieldFocus: FieldToFocus?
    
    var body: some View {
        VStack {
            Group {
                if isShowingPassword {
                    TextField("Enter a password", text: $password)
                        .focused($isFieldFocus, equals: .textField)
                }else {
                    SecureField("Enter a password", text: $password)
                        .focused($isFieldFocus, equals: .secureField)
                }
            }
            .disableAutocorrection(true)
            .autocapitalization(.none)
            .padding()
            
            Button {
                isShowingPassword.toggle()
            }label: {
                if isShowingPassword {
                    Text("Hide")
                }else {
                    Text("Show")
                }
            }
        }
        .onChange(of: isShowingPassword) { result in
            isFieldFocus = isShowingPassword ? .textField : .secureField
        }
    }
    
    enum FieldToFocus {
        case secureField, textField
    }
}

Advantages of Show and Hide Password Functionality

In conclusion, SwiftUI Password with the ability to show and hide passwords offers a multitude of benefits to both developers and users. Here you have a few good points on why it’s a good idea to provide your users with the ability to show/hide passwords.

  1. Enhanced User Experience: The ability to show and hide passwords significantly enhances the user experience. Users often struggle to enter complex passwords correctly due to hidden characters. Allowing them to toggle password visibility empowers them to verify the input, thereby reducing the likelihood of errors and subsequent frustration.
  2. Password Strength Validation: When users can see their passwords, they gain valuable insights into their complexity and strength. This way, they are more likely to create robust passwords that adhere to security best practices, ultimately bolstering the security of their accounts.
  3. Error Identification: In cases where users encounter login errors, the option to view the entered password aids in identifying potential issues. It eliminates the guesswork and empowers users to spot and rectify any inadvertent mistakes promptly.
Scroll to Top