Audax UK Mobile App

A mobile-friendly React Native application providing access to Audax UK services. Built with Expo for cross-platform support (iOS, Android, Web).

Features

• User Authentication: Login with email and password against Audax UK backend
• Member Dashboard: Access member-specific content after authentication
• Mobile-First Design: Responsive UI built with Tamagui components
• Cross-Platform: Runs on web, with iOS and Android support coming soon

Tech Stack

• React Native - Cross-platform mobile framework
• Expo - Development platform and build tooling
• TypeScript - Type-safe development
• Tamagui - UI component library for cross-platform styling
• React Navigation - Navigation management

Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd audax-uk-app

2. Install dependencies

npm install

Running the App

Web (Current Target)

npm run web

This will start the Expo development server and open the app in your browser at http://localhost:8081.

iOS (Future)

npm run ios

Android (Future)

npm run android

Project Structure

audax-uk-app/
├── src/
│   ├── screens/          # Screen components
│   │   ├── LoginScreen.tsx
│   │   └── MemberDashboardScreen.tsx
│   ├── services/         # API and business logic
│   │   ├── api-client.ts
│   │   └── auth-service.ts
│   ├── utils/            # Utility functions
│   │   └── html-parser.ts
│   ├── types/            # TypeScript type definitions
│   │   └── navigation.ts
│   └── config/           # Configuration files
│       └── tamagui.config.ts
├── App.tsx               # Root component
├── package.json
└── tsconfig.json

Authentication Flow

The app integrates with the existing Audax UK backend (https://www.audax.uk):

1. Token Fetch: GET /login to retrieve anti-CSRF and fingerprint tokens
2. Login Submission: POST /login with multipart/form-data containing:
   • Email address
   • Password
   • Anti-CSRF token (__RequestVerificationToken)
   • Fingerprint token (ufprt)
   • RememberMe flag
3. Session Management: Browser handles session cookies automatically (yourAuthCookie, ASP.NET_SessionId)
4. Member Access: GET /members with authenticated session

Key Implementation Details

Cookie Handling

The app uses browser-native cookie handling via fetch with credentials: 'include'. This automatically manages:

• ASP.NET session cookies
• Anti-CSRF tokens
• Session persistence

Anti-CSRF Protection

The backend requires __RequestVerificationToken in both cookie and form data. The app:

1. Fetches the login page HTML
2. Extracts the token from hidden input fields
3. Submits it with login credentials

Mobile-Friendly UI

All screens use Tamagui components that are:

• Responsive to different screen sizes
• Accessible
• Performant on both web and native platforms

Development

Type Checking

npx tsc --noEmit

Testing

npm test

Known Limitations

• Web Only: Current release targets web platform only
• Session Timeout: Basic session expiry handling (redirects to login on 401/302)
• Content Display: Simple text rendering of member content (HTML parsing could be enhanced)
• No Offline Support: Requires active internet connection

Future Enhancements

• iOS and Android native builds
• Enhanced HTML rendering for member content
• Offline support with data caching
• Push notifications
• "Remember Me" functionality
• Password reset flow

Troubleshooting

CORS Issues

If you encounter CORS errors when connecting to the Audax UK backend, this is expected during local development. The backend needs to allow the development origin.

Cookie Not Persisting

Ensure cookies are enabled in your browser. The app relies on browser-native cookie handling.

TypeScript Errors

Run npm install to ensure all dependencies are installed correctly. The project uses strict TypeScript mode.

Contributing

This is a greenfield project implementing the initial authentication and dashboard features. See openspec/changes/add-user-authentication/ for the full specification.

License

[License information to be added]