login and register screens

[bhuelsman]

Files added

• mobile/src/screens/LoginScreen.tsx
  • Collects user email and password input
  • Performs client-side validation (required fields and email format)
  • Displays inline field-level validation errors
  • Calls the backend authentication endpoint via loginUser
  • Stores the returned JWT token securely using Expo SecureStore
  • Handles and displays server-side authentication errors
  • Shows a loading indicator during API requests
  • Provides navigation to the registration screen for new users
• mobile/src/screens/RegisterScreen.tsx
  • Collects user information (name, email, password, password confirmation)
  • Performs client-side validation, including:
  • Required fields
  • Email format validation
  • Minimum password length
  • Password confirmation matching
  • Displays inline validation errors for each field
  • Calls the backend registration endpoint via registerUser
  • Stores the returned JWT token securely using Expo SecureStore
  • Automatically authenticates the user after successful registration
  • Navigates the user into the main application flow
  • Handles and displays server-side errors (e.g., duplicate email)
  • Provides navigation to the login screen for existing user
• mobile/src/services/AuthService.ts:
• mobile/src/hooks/useAuthToken.ts:
• AuthContext.tsx: new auth context provider, loads the token from SecureStore on startup, exposes authtoken,isloggedin, login() and logout()

Files modified

• mobile/src/App.tsx : organized screens, separated from logged in or not, wraps the app in AuthProvider and chooses login/register vs main screens based on auth state
• mobile/src/app.json: added expo-secure-store and expo-asset to asynchronously load, cache, and manage local or remote assets at runtime and store tokens
• mobile/src/package.json: added expo-secure-store to dependencies, provides encrypted, local key-value storage for sensitive data on mobile devices, such as authentication tokens, passwords, and user secrets
• mobile/src/screens/IssueDetailScreen now imports the token from context, can use authToken for verified actions like endorse
• mobile/src/screens/IssueCreationScreen also imports the token from useAuth() context instead of hardcoding

Authentication Flow

1. The app uses a token-based authentication system backed by Expo SecureStore. On app launch, the useAuthToken hook checks for a stored JWT token to determine whether the user is authenticated.
2. If a token exists, the app renders the main navigation stack (issue-related screens)
3. If no token is found, the app renders the authentication stack (login and registration screens)
4. Authentication state is derived from persistent storage rather than in-memory state, ensuring session persistence across app restarts.

Login and registration flows:

1. Call backend API endpoints via AuthService
2. Receive a JWT token upon success
3. Store the token securely using SecureStore
4. Transition the user into the authenticated experience

How to get the token to use for other actions that require auth(like endorse and issue creation)

1. import useAuth from ../contexts/AuthContext
2. do const { authToken } = useAuth();
3. if you need an authenticated request:

• if (!authToken) { /* fail or redirect to login */ }
• example http header headers: { Authorization: Bearer ${authToken} }

Run backend in terminal 1

cd backend
npm run dev

Run Mobile in terminal 3

cd mobile
./startWin.sh ip

On App testing
What I've been logging in with

Full name: Test Mobile
Email: testing@gmail.com
Password: Testing123!