Biometric authentication (Face ID, Touch ID) in iOS Swift - UI Render Trace

Component - Biometric authentication (Face ID, Touch ID)

This component allows users to log in using their face or fingerprint. It uses the device's built-in biometric sensors to check identity quickly and securely.

Widget Tree

UIViewController
├── UIView (main view)
│   ├── UILabel (instruction text)
│   └── UIButton (Authenticate)
└── UIAlertController (for error or success messages)

The main screen has a label showing instructions and a button to start biometric login. Alerts pop up to show success or errors.

Render Trace - 4 Steps

Step 1: UIViewController

Step 2: UILabel

Step 3: UIButton

Step 4: UIAlertController

State Change - Re-render

Trigger:User taps the 'Authenticate' button

Before

No authentication attempted, screen shows instruction and button

→

After

Biometric prompt appears, then alert shows success or failure message

Re-renders:The UIAlertController is presented modally, main view remains unchanged

UI Quiz - 3 Questions

What happens when the user taps the 'Authenticate' button?

A The app immediately logs in without checking biometrics

B The biometric authentication prompt appears

C The screen background color changes

D The instruction label text changes

Key Insight

Biometric authentication UI uses simple, clear instructions and a single button to start. Feedback is given with alerts so users know if login succeeded or failed. This keeps the flow easy and secure.