Add Google Sign-Up Integration to main

.github/workflows/preview.yml

@@ -9,7 +9,9 @@ permissions:
 
 jobs:
   preview:
+    if: github.event.pull_request.head.repo.full_name == github.repository
     runs-on: ubuntu-latest
+
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
@@ -29,6 +31,14 @@ jobs:
         run: npm install
         working-directory: ./frontend
 
+      - name: Create .env file
+        working-directory: ./frontend
+        run: |
+          echo "EXPO_PUBLIC_GOOGLE_EXPO_CLIENT_ID=${{ secrets.EXPO_PUBLIC_GOOGLE_EXPO_CLIENT_ID }}" >> .env
+          echo "EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID=${{ secrets.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID }}" >> .env
+          echo "EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID=${{ secrets.EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID }}" >> .env
+          echo "EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=${{ secrets.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID }}" >> .env
+
       - name: Create preview
         uses: expo/expo-github-action/preview@v8
         with:

.gitignore

@@ -16,7 +16,6 @@ venv/
 # Firebase
 firebase-service-account.json
 google-services.json
-
 # dependencies
 node_modules/
 

frontend/api/auth.js

@@ -8,6 +8,10 @@ export const signup = (name, email, password) => {
   return apiClient.post("/auth/signup/email", { name, email, password });
 };
 
+export const signInWithGoogle = (id_token) => {
+  return apiClient.post('/auth/login/google', JSON.stringify({ id_token }));
+};
+
 export const updateUser = (userData) => apiClient.patch("/users/me", userData);
 
 export const refresh = (refresh_token) => {

frontend/api/client.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-const API_URL = "https://splitwiser-production.up.railway.app";
+const API_URL = "http://localhost:8000";
 
 let accessToken = null;
 let refreshToken = null;

frontend/app.json

@@ -1,14 +1,15 @@
 {
   "expo": {
-    "name": "frontend",
-    "slug": "frontend",
+    "name": "SplitWiser",
+    "scheme": "splitwiser",
+    "slug": "splitwiser",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "newArchEnabled": true,
+    "userInterfaceStyle": "automatic",
+    "newArchEnabled": false,
     "splash": {
-      "image": "./assets/splash-icon.png",
+      "image": "./assets/splash.png",
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
@@ -23,12 +24,17 @@
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "edgeToEdgeEnabled": true,
+      "package": "com.splitwiser.app",
+      "googleServicesFile": "./google-services.json",
       "permissions": ["READ_MEDIA_IMAGES"]
     },
     "web": {
       "favicon": "./assets/favicon.png"
     },
+    "plugins": [
+      "expo-secure-store",
+      "expo-web-browser"
+    ],
     "extra": {
       "eas": {
         "projectId": "afe97159-52c4-425a-9ce3-c56d4f2cb568"

frontend/context/AuthContext.js

@@ -1,31 +1,60 @@
+// AuthContext.js
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { createContext, useEffect, useState } from "react";
+import { Platform } from 'react-native';
+import { GoogleSignin } from '@react-native-google-signin/google-signin';
+import {
+  GoogleAuthProvider,
+  signInWithCredential,
+  signInWithPopup,
+  User,
+} from 'firebase/auth';
+import { auth } from '../firebase/firebaseConfig.web';
 import * as authApi from "../api/auth";
 import {
   clearAuthTokens,
   setAuthTokens,
   setTokenUpdateListener,
 } from "../api/client";
-
 export const AuthContext = createContext();
 
 export const AuthProvider = ({ children }) => {
   const [user, setUser] = useState(null);
   const [token, setToken] = useState(null);
   const [refresh, setRefresh] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
+  const [firebaseUser, setFirebaseUser] = useState(null);
+  const [idToken, setIdToken] = useState(null);
+
+  // Configure Google Sign-In on component mount
+  useEffect(() => {
+      GoogleSignin.configure({
+        webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
+        offlineAccess: true,
+      });
+  }, []);
+
 
   // Load token and user data from AsyncStorage on app start
   useEffect(() => {
     const loadStoredAuth = async () => {
       try {
-        const storedToken = await AsyncStorage.getItem("auth_token");
+        const storedToken = await AsyncStorage.getItem('auth_token');
+        const storedUser = await AsyncStorage.getItem('user_data');
         const storedRefresh = await AsyncStorage.getItem("refresh_token");
-  const storedUser = await AsyncStorage.getItem("user_data");
+        const storedIdToken = await AsyncStorage.getItem('firebase_id_token');
+        const storedFirebaseUser = await AsyncStorage.getItem('firebase_user');
 
         if (storedToken && storedUser) {
+          if (storedFirebaseUser) {
+            try {
+              setFirebaseUser(JSON.parse(storedFirebaseUser));
+            } catch {
+              // ignore parse error; storage may contain older format
+            }
+          }
           setToken(storedToken);
-          setRefresh(storedRefresh);
+          setUser(JSON.parse(storedUser));
           await setAuthTokens({
             newAccessToken: storedToken,
             newRefreshToken: storedRefresh,
@@ -106,8 +135,33 @@ export const AuthProvider = ({ children }) => {
     saveUser();
   }, [user]);
 
+  // Save Firebase data to AsyncStorage
+  useEffect(() => {
+    const saveFirebaseData = async () => {
+      try {
+        if (idToken) {
+          await AsyncStorage.setItem('firebase_id_token', idToken);
+        } else {
+          await AsyncStorage.removeItem('firebase_id_token');
+        }
+
+        if (firebaseUser) {
+          await AsyncStorage.setItem('firebase_user', JSON.stringify(firebaseUser));
+        } else {
+          await AsyncStorage.removeItem('firebase_user');
+        }
+      } catch (error) {
+        console.error('Failed to save Firebase data to storage:', error);
+      }
+    };
+
+    saveFirebaseData();
+  }, [idToken, firebaseUser]);
+
+  // Regular email/password login
   const login = async (email, password) => {
     try {
+
       const response = await authApi.login(email, password);
       const { access_token, refresh_token, user: userData } = response.data;
       setToken(access_token);
@@ -133,6 +187,7 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
+  // Regular email/password signup
   const signup = async (name, email, password) => {
     try {
       await authApi.signup(name, email, password);
@@ -146,20 +201,91 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
-  const logout = async () => {
-    try {
-      // Clear stored authentication data
-      await AsyncStorage.removeItem("auth_token");
-      await AsyncStorage.removeItem("refresh_token");
-      await AsyncStorage.removeItem("user_data");
+  // Google Sign-In
+const signInWithGoogle = async () => {
+  try {
+    if (Platform.OS === 'web') {
+      // ---- WEB FLOW ----
+      const provider = new GoogleAuthProvider();
+      const result = await signInWithPopup(auth, provider);
+
+      const firebaseIdToken = await result.user.getIdToken(true);
+      setFirebaseUser(result.user);
+      setIdToken(firebaseIdToken);
+
+      // Exchange with backend for app tokens
+      const backendResponse = await authApi.signInWithGoogle(firebaseIdToken);
+      const { access_token, refresh_token, user: userData } = backendResponse.data;
+      setToken(access_token);
+      if (refresh_token) setRefresh(refresh_token);
+      await setAuthTokens({
+        newAccessToken: access_token,
+        newRefreshToken: refresh_token,
+      });
+      setUser(userData);
+
+      return { idToken: firebaseIdToken, firebaseUser: result.user };
+    } else {
+      // ---- NATIVE FLOW ----
+      await GoogleSignin.hasPlayServices({ showPlayServicesUpdateDialog: true });
+
+      const { idToken: googleIdToken } = await GoogleSignin.signIn();
+      if (!googleIdToken) throw new Error('No Google ID token returned');
+
+      const credential = GoogleAuthProvider.credential(googleIdToken);
+      const userCredential = await signInWithCredential(auth, credential);
+
+      const firebaseIdToken = await userCredential.user.getIdToken(true);
+      setFirebaseUser(userCredential.user);
+      setIdToken(firebaseIdToken);
+
+      const backendResponse = await authApi.signInWithGoogle(firebaseIdToken);
+      const { access_token, refresh_token, user: userData } = backendResponse.data;
+      setToken(access_token);
+      if (refresh_token) setRefresh(refresh_token);
+      await setAuthTokens({
+        newAccessToken: access_token,
+        newRefreshToken: refresh_token,
+      });
+      setUser(userData);
+
+      return { idToken: firebaseIdToken, firebaseUser: userCredential.user };
+    }
+  } catch (error) {
+    console.error('Google Sign-In error:', error?.message || error);
+    throw error;
+  }
+};
+
+// Unified logout function
+const logout = async () => {
+  try {
+    // Clear stored authentication data
+     await AsyncStorage.removeItem('auth_token');
+      await AsyncStorage.removeItem('user_data');
+      await AsyncStorage.removeItem('firebase_id_token');
+      await AsyncStorage.removeItem('firebase_user');
+
+      // Sign out from Google/Firebase if applicable
+      if (firebaseUser) {
+        if (Platform.OS === 'web') {
+          await auth.signOut();
+        } else {
+          await GoogleSignin.signOut();
+          await auth.signOut();
+        }
+      }
     } catch (error) {
       console.error("Failed to clear stored authentication:", error);
     }
 
+    // Clear all state
     setToken(null);
     setRefresh(null);
     setUser(null);
     await clearAuthTokens();
+    setFirebaseUser(null);
+    setIdToken(null);
   };
 
   const updateUserInContext = (updatedUser) => {
@@ -172,19 +298,52 @@ export const AuthProvider = ({ children }) => {
     setUser(normalizedUser);
   };
 
+  // Helper function to check if user is authenticated (either way)
+  const isAuthenticated = () => {
+    return !!(token || idToken);
+  };
+
+  // Helper function to get current auth method
+  const getAuthMethod = () => {
+    if (idToken && firebaseUser) return 'google';
+    if (token && user) return 'email';
+    return null;
+  };
+
   return (
     <AuthContext.Provider
+
       value={{
+
+        // Original auth state
         user,
+
         token,
+
         isLoading,
+
+
+        // Google auth state
+        firebaseUser,
+        idToken,
+
+        // Auth methods
         login,
+
         signup,
+        signInWithGoogle,
+
         logout,
+
         updateUserInContext,
+
+        // Helper methods
+        isAuthenticated,
+        getAuthMethod,
       }}
+
     >
       {children}
     </AuthContext.Provider>
   );
-};
+};

frontend/eas.json

@@ -1,6 +1,7 @@
 {
   "cli": {
-    "version": ">= 7.6.0"
+    "version": ">= 16.17.3",
+    "appVersionSource": "remote"
   },
   "build": {
     "development": {
@@ -10,7 +11,9 @@
     "preview": {
       "distribution": "internal"
     },
-    "production": {}
+    "production": {
+      "autoIncrement": true
+    }
   },
   "submit": {
     "production": {}

frontend/firebase/firebaseConfig.native.js

@@ -0,0 +1,24 @@
+import { initializeApp, getApp, getApps } from "firebase/app";
+import { initializeAuth, GoogleAuthProvider } from "firebase/auth";
+import { getReactNativePersistence } from "firebase/auth/react-native";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+const firebaseConfig = {
+  apiKey: process.env.EXPO_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.EXPO_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.EXPO_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.EXPO_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.EXPO_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.EXPO_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.EXPO_PUBLIC_FIREBASE_MEASUREMENT_ID,
+};
+
+const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
+
+const auth = initializeAuth(app, {
+  persistence: getReactNativePersistence(AsyncStorage),
+});
+
+const googleProvider = new GoogleAuthProvider();
+
+export { app, auth, googleProvider };