Implement Google/Firebase Authentication

[Devasy]

Implement Google/Firebase Authentication

Description

Add Google/Firebase authentication support to the Splitwiser app to provide users with an easy sign-in option using their Google accounts.

Requirements

Frontend (React Native/Expo)

• Install and configure Firebase SDK
• Set up Google authentication provider
• Create Google sign-in button in LoginScreen
• Implement useGoogleAuth hook for handling Google authentication flow
• Handle authentication state management with Firebase Auth
• Add proper error handling for Google authentication failures

Backend (FastAPI)

• Install Firebase Admin SDK
• Set up Firebase service account configuration
• Create /auth/login/google endpoint to verify Google ID tokens
• Implement Google user registration flow
• Handle linking Google accounts with existing email accounts

Dependencies to Add

Frontend

"firebase": "^10.6.0",
"expo-auth-session": "~5.0.2"

Backend

firebase-admin>=6.0.0

Configuration

• Set up Firebase project configuration
• Configure Google OAuth client IDs for Android/iOS/Web
• Set up Firebase service account for backend verification
• Add environment variables for Firebase configuration

Security Considerations

• Verify Google ID tokens on the backend
• Implement proper token refresh mechanism
• Handle account linking scenarios
• Add rate limiting for authentication endpoints

UI/UX

• Design Google sign-in button following Google's branding guidelines
• Add loading states during authentication
• Implement proper error messages for authentication failures
• Add "OR" divider between email/password and Google authentication

Testing

• Add unit tests for Google authentication flow
• Test authentication on different platforms (Android/iOS/Web)
• Test error scenarios (network failures, invalid tokens, etc.)
• Test account linking scenarios

Implementation Notes

• This feature was temporarily removed to focus on basic email/password authentication
• The previous implementation included Firebase configuration and Google Auth integration
• Consider using Firebase Authentication for user management and session handling
• Ensure compliance with Google's OAuth policies and branding guidelines

Priority

Medium - This is a nice-to-have feature that will improve user experience but is not critical for the MVP.

Dependencies

• #[issue_number] - Basic authentication system must be working
• Firebase project setup and configuration

Acceptance Criteria

• Users can sign in with their Google account
• Google authentication is properly integrated with existing authentication system
• Proper error handling and user feedback
• Authentication state is maintained across app sessions
• Backend properly verifies Google ID tokens
• UI follows Material Design guidelines for Google sign-in

[msuud]

Hi @Devasy23, I'd like to work on this issue. I’ve previously integrated Firebase Authentication in one of my projects, so I’m confident I can handle this effectively. Could you please assign it to me ?

[Devasy]

Hi @msuud , as this app is in react native and expo it may be complicated to perform firebase authentication, so take some time and explore, set-up the project then take on major tasks

[msuud]

Hi @Devasy23, thanks for the heads-up! I’ve already set up the project locally and started integrating Firebase Authentication using Expo and React Native. I'm comfortable with the flow so far and confident in continuing. Let me know if you'd still prefer I wait, or if I can go ahead and take ownership of this issue.

[Devasy]

Go ahead. Feel free to ping at any time if you get stuck or have any doubts. Thanks

[msuud]

Yeah sure thanks!

[msuud]

Hi @Devasy23,

Thanks again for the heads-up regarding the complexity of Firebase authentication with React Native and Expo. I've spent some more time on it, and I've encountered a few unexpected challenges that are proving more difficult than anticipated.
I've looked into this issue further and unfortunately, I won't be able to contribute to it at this time.

[Devasy]

@msuud don't feel overwhelmed, I have a simple task to get you started. I need you to document the current state of the UI from the test-frontend branch.

For setting you just need to install all the dependencies from packet.json and then you will start the metro builder using command npx expo start

[meghan9908]

hi @Devasy23 I would like to take up the challenge despite hardships . I actually integrated firebase(database) for my previous project and I think I can handle this too
if you are okay with me I can take up this

[Devasy]

Go ahead @meghan9908 , if you face any issue feel free to connect with me, I help you