# CryptoKit in SwiftUI

Security is a crucial aspect of mobile app development. In iOS app development, encrypting user passwords is an important step to ensure the protection of user data. In this blog post, we'll show you how to encrypt passwords in SwiftUI.

The code in this post is available [here](https://github.com/xavier7t/iOSDevX/tree/main/iOSDevX/202304-Apr%202023/CryptoKit).

## **Why Encrypt Passwords?**

Encrypting passwords is essential because it ensures that the user's sensitive data remains safe in case of a security breach. When a user creates an account in your app, they typically choose a password that they can remember easily. However, if that password is not encrypted, it can be easily stolen by malicious actors. Encrypting the password makes it much more difficult for attackers to obtain and use.

## **Choosing an Encryption Algorithm**

There are many encryption algorithms available, but not all of them are suitable for password encryption. A common algorithm used for password encryption is bcrypt. Bcrypt is a slow hashing algorithm that is designed specifically for password storage. It is computationally expensive, which makes brute-force attacks much more difficult.

SwiftUI does not have built-in support for bcrypt, but there are libraries available that make it easy to use. One popular library is called `CryptoKit`.

## **Using CryptoKit to Encrypt Passwords**

To use `CryptoKit` to encrypt passwords, we'll start by importing the library in our Swift file:

```swift
import CryptoKit
```

Next, we'll create a function that will take a password string as input and return an encrypted password string:

```swift
func encryptPassword(password: String) -> String {
    let salt = "mysalt"
    let saltedPassword = password + salt
    
    guard let saltedPasswordData = saltedPassword.data(using: .utf8) else {
        return ""
    }
    
    let hashedPassword = SHA256.hash(data: saltedPasswordData)
    let hashedPasswordString = hashedPassword.compactMap { String(format: "%02x", $0) }.joined()
    
    return hashedPasswordString
}
```

In this code, we're using the `SHA256` hashing function from `CryptoKit` to hash the salted password string. We're then converting the hashed data to a hexadecimal string and returning it.

Note that we're using a salt value to increase the security of our password encryption. The salt value is a random string that is added to the password before it is hashed. This makes it much more difficult for attackers to crack passwords using precomputed hash tables.

## **Using the Encrypt Password Function in SwiftUI**

Now that we have our `encryptPassword` function, we can use it in our SwiftUI views. Let's create a simple view with a text field for the user to enter their password, and a button to encrypt the password.

```swift
struct ContentView: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""

    var body: some View {
        VStack {
            TextField("Password", text: $password)
            
            Button("Encrypt Password") {
                encryptedPassword = encryptPassword(password: password)
            }
            
            Text("Encrypted Password: \(encryptedPassword)")
        }
    }
}
```

In this code, we're using the `@State` property wrapper to create two state variables: `password` and `encryptedPassword`. We're creating a text field for the user to enter their password, and a button to encrypt the password using our `encryptPassword` function. We're then displaying the encrypted password in a `Text` view.

## Redaction

After implementing the encryption functionalities, we can improve our logic by adding a button to hide the encrypted password with redaction. For more about Redaction, check my previous post [here](https://xavier7t.com/redaction-in-swiftui).

```swift
struct ContentView: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""
    @State var hideEncryptedPassword: Bool = false

    var body: some View {
        VStack {
            TextField("Password", text: $password)
            
            Button("Encrypt Password") {
                encryptedPassword = encryptPassword(password: password)
            }
            
            Text("Encrypted Password:")
                .bold()
            Group {
                if hideEncryptedPassword {
                    Text("\(encryptedPassword)")
                        .redacted(reason: .placeholder)
                } else {
                    Text("\(encryptedPassword)")
                }
            }
            Button(hideEncryptedPassword ? "Show" : "Hide") {
                hideEncryptedPassword.toggle()
            }
        }
    }
}
```

In the example above, we added a `@State` property of type `Bool` to indicate if the encrypted password text is hidden. Then we replaced the encrypted password text with a `Group` which is conditional to redact the text if `hideEncryptedPassword` is `true`. And we added another button to toggle the boolean value of `hideEncryptedPassword`.

## **UI Enhancement**

And finally, we can make some UI Enhancement by adding borders, frames, bolding and / or colors to our text field and buttons.

```swift

struct ContentViewEnhanced: View {
    @State var password: String = ""
    @State var encryptedPassword: String = ""
    @State var hideEncryptedPassword: Bool = false
    var body: some View {
        VStack {
            TextField("Password", text: $password)
                .frame(width: 200, height: 40, alignment: .center)
                .border(.black)
            Button("Encrypt") {
                encryptedPassword = encryptPassword(password: password)
            }
            .bold()
            .foregroundColor(.white)
            .frame(width: 200, height: 40, alignment: .center)
            .background(Color.blue.cornerRadius(10))
            Text("Encrypted Password:")
                .bold()
            Group {
                if hideEncryptedPassword {
                    Text("\(encryptedPassword)")
                        .redacted(reason: .placeholder)
                } else {
                    Text("\(encryptedPassword)")
                }
            }
            Button(hideEncryptedPassword ? "Show" : "Hide") {
                hideEncryptedPassword.toggle()
            }
            .bold()
            .foregroundColor(.white)
            .frame(width: 200, height: 40, alignment: .center)
            .background(Color.blue.cornerRadius(10))
        }
        .padding(.horizontal)
    }
}
```

And that’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!