Skip to content

Readme.md

Latest commit

 

History

History
253 lines (189 loc) · 4.27 KB

Readme.md

File metadata and controls

253 lines (189 loc) · 4.27 KB
Raw

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.