App Lock with Face ID / Touch ID in SwiftUI 2.0 Lifecycle

Security.

In the current world, we have developed many things for securing our stuff. Now, AppLock becomes a common feature in every application.

The simplest solution we can provide for user security is to give the App Lock functionality.

In this post, we are going to learn how to implement the App Lock with Bio-metric (Face ID / Touch ID) feature in SwiftUI 2.0

I’ve listed out the steps to develop the app lock feature,

1. Adding NSFaceIDUsageDescription key in info.plist file
2. View Model Implementation
3. EnvironmentObject injection in App struct
4. Views implementation — Lock View & Home View

Let’s start 🏁

Step 1:

Open the app’s info.plist file → Add “Privacy - FaceID Usage Description” key. value for the key is a String. You can provide any string value. In my project, I’ve used

$(PRODUCT_NAME) need Touch Id or Face ID permission for app lock

Alternatively, you can add the same in Source Code of the info.plist like below

<key>NSFaceIDUsageDescription</key>
<string>$(PRODUCT_NAME) need Touch Id or Face ID permission for app lock</string>

Step 2:

Important points to note in ViewModel:

1. LocalAuthentication is an Apple Framework which gives us the provision to extend the device lock functionality (passcode, FaceID and TouchID) to the app.
   To learn more about LocalAuthentication framework refer here.
2. LAContext class is providing the methods to check if the device has app lock enabled and to check if the device has enrolled FaceID/TouchID
3. LAPolicy: There are two policies.
   1. deviceOwnerAuthenticationWithBiometrics — Device owner is going to be authenticated using a biometric method (Touch ID or Face ID).
   2. deviceOwnerAuthentication — Device owner is going to be authenticated by biometry or device passcode.
   Here, I have used the first option (only biometric method)
4. Two @published properties used in ViewModel
   1. isAppLockEnabled → check if the app lock enabled (UserDefaults value)
   2. isAppUnLocked → check if the app is in the unlocked state.

App lock state needs to be persisted in the application storage. Here, I have used UserDefaults to store the app lock state but we can use other storage options like KeyChain as well.

Step 3:

Here, two main things have done.

1. @StateObject for the AppLockViewModel class has created and then injected that as .environmentObject to the ContentView()
2. Blurred the ContentView() based on the scenePhase. If you feel new to the scenePhase, please refer here.

Step 4:

Note:

1. If app lock is enabled, app lock validation will happen immediately on appearing the ContentView
2. isAppLockEnabled & isAppUnLocked values are got from @EnvironmentObject of AppLockViewModel. This is nothing but the one we injected in Step 3.

Note:

1. AppLock state is maintained in a toggle. appLockVM.appLockStateChange(appLockState: value) method will be called on every change of the AppLock toggle.
2. appLockVM object is got from @EnvironmentObject. Same as we used in ContentView().

Conclusion:

You can test this in the simulator by enabling Features → FaceID → enrolled option in simulator toolbar.

Try yourself. Thanks for reading the post 😊

Check out the full repository here.