Expo Biometric Authentication Demo

A React Native Expo application demonstrating secure authentication using:

• Email & Password Login
• Fingerprint Authentication
• Face ID Authentication
• 4-Digit Passcode Authentication
• Secure Storage using Expo Secure Store
• Authentication Settings Management

---

Features

User Registration

• Create new account
• Validate email format
• Password confirmation
• Store user information securely using Expo Secure Store

---

Login

• Login using Email & Password
• Validate registered credentials
• Navigate to biometric setup for first-time users
• Direct login for users with biometrics enabled

---

Biometric Authentication

Supports:

• Fingerprint
• Face ID
• Device Credentials (Passcode/Pattern)

Checks:

• Device hardware support
• Biometric enrollment
• User authentication
• Secure enable/disable flow

---

Passcode Authentication

• Create 4-digit passcode
• Login using passcode
• Change passcode
• Remove passcode (after biometric verification)

---

Settings

Manage authentication preferences:

• Enable/Disable Biometric Login
• Create Passcode
• Change Passcode
• Remove Passcode
• Logout

---

Authentication Flow

Splash
│
├── Logged In
│     │
│     ├── Biometrics Enabled
│     │      │
│     │      └── Authenticate
│     │              │
│     │              └── Home
│     │
│     └── Login
│
└── Welcome
      │
      ├── Register
      │      │
      │      ├── Create Passcode
      │      ├── Enable Biometrics
      │      └── Home
      │
      └── Login
             │
             ├── Email & Password
             ├── Biometrics
             └── Passcode

---

Screens

• Splash Screen
• Welcome Screen
• Register Screen
• Login Screen
• Create Passcode Screen
• Passcode Login Screen
• Enable Biometric Screen
• Authentication Loading Screen
• Home Screen
• Settings Screen

---

Project Structure

src
│
├── navigation
│   └── AppNavigator.tsx
│
├── screens
│   ├── SplashScreen.tsx
│   ├── WelcomeScreen.tsx
│   ├── RegisterScreen.tsx
│   ├── LoginScreen.tsx
│   ├── CreatePasscodeScreen.tsx
│   ├── PasscodeLoginScreen.tsx
│   ├── EnableBiometricScreen.tsx
│   ├── AuthLoadingScreen.tsx
│   ├── HomeScreen.tsx
│   └── SettingsScreen.tsx
│
├── storage
│   └── biometricStorage.ts
|
├── utils
│   └── biometric.ts
│
└── assets

---

Technologies Used

• Expo
• React Native
• TypeScript
• React Navigation
• Expo Local Authentication
• Expo Secure Store

---

Installation

Clone the repository:

git clone https://github.com/dainyjose/biometric-auth-mobile.git

Install dependencies:

npm install

Start Expo:

npx expo start

Run Android:

npx expo run:android

Run iOS:

npx expo run:ios

---

Required Packages

npx expo install expo-local-authentication
npx expo install expo-secure-store
npm install @react-navigation/native
npm install @react-navigation/native-stack

---

Secure Storage

The application securely stores:

Key	Description
user_data	Registered user details
biometric_enabled	Biometric login status
user_passcode	User passcode
is_logged_in	Login session

---

Security Notes

This project is intended for learning and demonstration purposes.

Production applications should:

• Never store plaintext passwords.
• Authenticate users through a backend server.
• Store authentication tokens instead of passwords.
• Encrypt sensitive data.
• Implement token refresh and expiration.
• Use certificate pinning for API communication.
• Follow OWASP Mobile Application Security guidelines.

---

Future Enhancements

• Forgot Password
• Change Password
• Multiple User Support
• Passcode Retry Limits
• Biometric Lockout Handling
• Session Timeout
• Auto Logout
• JWT Authentication
• Backend API Integration
• Refresh Tokens
• Dark Mode Support

---

License

This project is provided for educational purposes.