Implement Email/Password Authentication with Clean UI (#9)

* feat: Update frontend package and add authentication screens

- Changed project name in package.json to "splitwiser" and updated main entry point.
- Updated dependencies to newer versions for better performance and security.
- Added HomeScreen component for user profile display and logout functionality.
- Created LoginScreen component for user authentication with email/password and Google sign-in options.
- Modified tsconfig.json for improved TypeScript support and configuration.

* feat: update app configuration and remove deprecated Google authentication code

* fix: updates the package.json

* feat(auth): enhance login/signup error handling and add basic form validation

Author: Devasy

frontend/.gitignore

@@ -0,0 +1,42 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { StatusBar } from 'expo-status-bar';
+
+import { AuthProvider, useAuth } from './contexts/AuthContext';
+import HomeScreen from './screens/HomeScreen';
+import LoginScreen from './screens/LoginScreen';
+
+const Stack = createNativeStackNavigator();
+
+function AppNavigator() {
+  const { isAuthenticated } = useAuth();
+
+  return (
+    <Stack.Navigator>
+      {isAuthenticated ? (
+        <Stack.Screen 
+          name="Home" 
+          component={HomeScreen} 
+          options={{ title: 'Splitwiser' }} 
+        />
+      ) : (
+        <Stack.Screen 
+          name="Login" 
+          component={LoginScreen} 
+          options={{ headerShown: false }} 
+        />
+      )}
+    </Stack.Navigator>
+  );
+}
+
+export default function App() {
+  return (
+    <AuthProvider>
+      <NavigationContainer>
+        <AppNavigator />
+        <StatusBar style="auto" />
+      </NavigationContainer>
+    </AuthProvider>
+  );
+}

frontend/App.tsx

@@ -1,50 +1,79 @@
-# Welcome to your Expo app 👋
+# Splitwiser Frontend
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+A React Native (Expo) application for the Splitwiser bill-splitting app.
 
-## Get started
+## Features
 
-1. Install dependencies
+- User authentication (email/password and Google Sign-in)
+- Login and signup screens
+- JWT authentication with refresh token mechanism
+- Secure token storage
 
-   ```bash
-   npm install
-   ```
+## Getting Started
 
-2. Start the app
+### Prerequisites
 
-   ```bash
-   npx expo start
-   ```
+- Node.js (v14 or later)
+- npm or yarn
+- Expo CLI (`npm install -g expo-cli`)
 
-In the output, you'll find options to open the app in a
+### Installation
 
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
-- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
-- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+1. Install dependencies:
 
-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
+```bash
+cd frontend
+npm install
+# or
+yarn install
+```
 
-## Get a fresh project
+2. Configure environment variables:
+   
+   - Update the API_URL in `contexts/AuthContext.tsx` with your backend URL.
+   - Update the `WEB_CLIENT_ID` in `config/firebase.tsx` with your Firebase Web Client ID.
 
-When you're ready, run:
+3. Start the development server:
 
 ```bash
-npm run reset-project
+npm start
+# or 
+yarn start
+# or
+npx expo start
 ```
 
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+### Running on Physical Device
+
+1. Install Expo Go app on your iOS or Android device
+2. Scan the QR code shown in the terminal after running `npm start`
+
+### Running on Emulator
 
-## Learn more
+- For Android: Press 'a' in the terminal after starting the development server
+- For iOS: Press 'i' in the terminal (requires macOS and Xcode)
 
-To learn more about developing your project with Expo, look at the following resources:
+## Authentication Flow
 
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
+This app follows the authentication flow as described in [auth-service.md](../docs/auth-service.md):
 
-## Join the community
+1. **Email/Password Authentication**
+   - Sign up with email, password, and name
+   - Login with email and password
+   
+2. **Google Authentication**
+   - Uses Firebase for Google authentication
+   - Sends the ID token to the backend for verification
+   
+3. **Token Management**
+   - Stores access tokens in memory
+   - Stores refresh tokens securely using Expo SecureStore
+   - Auto-refreshes expired tokens
+   - Handles token rotation
 
-Join our community of developers creating universal apps.
+## Project Structure
 
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+- `/screens` - React Native screens (LoginScreen, HomeScreen)
+- `/contexts` - React Context for global state management (AuthContext)
+- `/config` - Configuration files (Firebase)
+- `/assets` - Images and other static assets

frontend/README.md

@@ -1,50 +1,32 @@
 {
   "expo": {
-    "name": "frontend",
-    "slug": "frontend",
+    "name": "Splitwiser",
+    "slug": "splitwiser",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/images/icon.png",
-    "scheme": "frontend",
-    "userInterfaceStyle": "automatic",
-    "newArchEnabled": true,
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "scheme": "splitwiser",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true
-    },
-    "android": {
+    },    "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/images/adaptive-icon.png",
+        "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "edgeToEdgeEnabled": true,
-      "package": "com.vrajpatelll.frontend"
+      "googleServicesFile": "./google-services.json",
+      "package": "splitwiser.app"
     },
     "web": {
-      "bundler": "metro",
-      "output": "static",
-      "favicon": "./assets/images/favicon.png"
-    },
-    "plugins": [
-      "expo-router",
-      [
-        "expo-splash-screen",
-        {
-          "image": "./assets/images/splash-icon.png",
-          "imageWidth": 200,
-          "resizeMode": "contain",
-          "backgroundColor": "#ffffff"
-        }
-      ],
-      "expo-web-browser"
-    ],
-    "experiments": {
-      "typedRoutes": true
-    },
-    "extra": {
-      "router": {},
-      "eas": {
-        "projectId": "45b14924-7fce-48f7-b527-5a6a12f2d64f"
-      }
+      "favicon": "./assets/favicon.png"
     }
   }
 }