How to Implement Biometric Authentication (Face ID & Touch ID) for Your Web App on iOS using WebView

Enhancing user convenience and security is always a top priority for developers creating iOS applications. Biometric authentication, using Face ID or Touch ID, offers users an advanced yet intuitive method to secure their accounts or sensitive information within an app. If you’re working with a web-based app via WebView for iOS, it’s essential to understand how to integrate biometric authentication smoothly into your workflow.

This blog article will guide you step-by-step on integrating Face ID and Touch ID biometric authentication into your WebView-based web app, boosting security while ensuring a seamless user experience.

Understanding Biometric Authentication on iOS

Biometric authentication utilizes hardware sensors to verify a user’s identity through unique physical features like fingerprints (Touch ID) or facial recognition (Face ID). Apple provides powerful built-in APIs enabling developers to harness these technologies easily.

The LocalAuthentication framework provided by Apple simplifies biometric integration, allowing apps to verify users quickly with minimal code or complexity. Combining this power with WebView lets you build highly secure web-based solutions that enhance user trust and streamline login processes.

Step 1: Check Device Compatibility and Availability

Before integrating, ensure the user’s device supports biometric authentication. Apple’s LocalAuthentication APIs enable checking if biometric methods are available and enabled:

import LocalAuthentication

func isBiometricAvailable() -> Bool {
    let context = LAContext()
    var error: NSError?
    return context.canEvaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, error: &error)
}

Step 2: Implement Biometric Authentication Prompt

Next, trigger biometric authentication via LocalAuthentication framework’s evaluatePolicy method to authenticate the user:

func authenticateUser(completion: @escaping (Bool, Error?) -> Void) {
    let context = LAContext()
    let reason = Authenticate to access your account

    context.evaluatePolicy(.deviceOwnerAuthenticationWithBiometrics, localizedReason: reason) { success, error in
        DispatchQueue.main.async {
            completion(success, error)
        }
    }
}

This prompts the standard Face ID or Touch ID system prompt to appear, verifying the user biometrically.

Step 3: Communicate Between WebView and Native Code

WebView hides complexity by running your web app as native app content, giving you direct access to native functionality. You can use JavaScript messaging bridges to communicate between your web app and Swift UI code. For example, add a script handler in WebView:

import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let contentController = WKUserContentController()
        contentController.add(self, name: biometricAuth)

        let config = WKWebViewConfiguration()
        config.userContentController = contentController

        webView = WKWebView(frame: self.view.bounds, configuration: config)
        view.addSubview(webView)

        if let url = URL(string: https://yourappwebsite.com) {
            webView.load(URLRequest(url: url))
        }
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == biometricAuth {
            authenticateUser { success, error in
                let result = success ? true : false
                self.webView.evaluateJavaScript(handleBiometricResult(\(result));, completionHandler: nil)
            }
        }
    }
}

Then, from your JavaScript web app, send messages to trigger native biometric authentication:

function triggerBiometricAuth() {
    window.webkit.messageHandlers.biometricAuth.postMessage(null);
}

function handleBiometricResult(success) {
    if (success) {
        alert('Authentication successful!');
    } else {
        alert('Authentication failed. Please try again.');
    }
}

A Quick and Effective Solution: WebViewGold

If you’re looking for an even simpler way to package your existing website into a fully functional, biometric-ready iOS application, consider an intuitive solution like WebViewGold. WebViewGold eliminates much of the complexity typically involved in building WebView apps, facilitating quick conversion of web content into native-feeling applications. With built-in support for native APIs, integrating Face ID and Touch ID authentication takes far less time and effort, letting you focus on delivering robust user experiences.

Final Thoughts: Enhance Security and Ease for Your Users

Biometric authentication through Face ID and Touch ID greatly enhances both security and usability, providing seamless logins and improved confidence from your users. Implementing these features in your WebView-based iOS apps is straightforward with the right approach.

Whether you manually integrate through Swift code or opt for a streamlined platform like WebViewGold, adding biometric authentication capability to your web applications elevates their security standards and significantly improves user interaction and satisfaction.