Feature/google signin

.github/workflows/preview.yml

@@ -29,6 +29,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

@@ -49,6 +49,7 @@ yarn-error.*
 
 # local env files
 .env*.local
+frontend/.env
 
 # typescript
 *.tsbuildinfo

frontend/.env.example

@@ -0,0 +1,4 @@
+EXPO_PUBLIC_GOOGLE_EXPO_CLIENT_ID=
+EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID=
+EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID=
+EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID=

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 loginWithGoogle = (id_token) => {
+  return apiClient.post("/auth/login/google", { id_token });
+};
+
 export const updateUser = (userData) => apiClient.patch("/users/me", userData);
 
 export const refresh = (refresh_token) => {

frontend/app.json

@@ -6,6 +6,7 @@
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
+  "scheme": "splitwiser",
     "newArchEnabled": true,
     "splash": {
       "image": "./assets/splash-icon.png",
@@ -14,11 +15,13 @@
     },
     "ios": {
       "supportsTablet": true,
+      "bundleIdentifier": "com.devasy23.splitwiser",
       "infoPlist": {
         "NSPhotoLibraryUsageDescription": "Allow Splitwiser to select a group icon from your photo library."
       }
     },
     "android": {
+      "package": "com.devasy23.splitwiser",
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"

frontend/context/AuthContext.js

@@ -1,4 +1,6 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
+import { useAuthRequest } from "expo-auth-session/providers/google";
+import * as WebBrowser from "expo-web-browser";
 import { createContext, useEffect, useState } from "react";
 import * as authApi from "../api/auth";
 import {
@@ -7,6 +9,8 @@ import {
   setTokenUpdateListener,
 } from "../api/client";
 
+WebBrowser.maybeCompleteAuthSession();
+
 export const AuthContext = createContext();
 
 export const AuthProvider = ({ children }) => {
@@ -15,13 +19,64 @@ export const AuthProvider = ({ children }) => {
   const [refresh, setRefresh] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
 
+  // For Expo Go, we need to use the web-based auth flow
+  // Force all platforms to use web client ID in Expo Go
+  const [request, response, promptAsync] = useAuthRequest({
+    expoClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
+    iosClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID, // Force web client for iOS in Expo Go
+    androidClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID, // Force web client for Android in Expo Go
+    webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
+    redirectUri: 'https://auth.expo.io/@devasy23/frontend',
+  });
+
+  // Debug logging
+  useEffect(() => {
+    if (request) {
+      console.log("Auth request details:", {
+        url: request.url,
+        params: request.params
+      });
+    }
+  }, [request]);
+
+  useEffect(() => {
+    const handleGoogleSignIn = async () => {
+      if (response?.type === "success") {
+        const { id_token } = response.params;
+        try {
+          const res = await authApi.loginWithGoogle(id_token);
+          const { access_token, refresh_token, user: userData } = res.data;
+          setToken(access_token);
+          setRefresh(refresh_token);
+          await setAuthTokens({
+            newAccessToken: access_token,
+            newRefreshToken: refresh_token,
+          });
+          const normalizedUser = userData?._id
+            ? userData
+            : userData?.id
+            ? { ...userData, _id: userData.id }
+            : userData;
+          setUser(normalizedUser);
+        } catch (error) {
+          console.error(
+            "Google login failed:",
+            error.response?.data?.detail || error.message
+          );
+        }
+      }
+    };
+
+    handleGoogleSignIn();
+  }, [response]);
+
   // Load token and user data from AsyncStorage on app start
   useEffect(() => {
     const loadStoredAuth = async () => {
       try {
         const storedToken = await AsyncStorage.getItem("auth_token");
         const storedRefresh = await AsyncStorage.getItem("refresh_token");
-  const storedUser = await AsyncStorage.getItem("user_data");
+        const storedUser = await AsyncStorage.getItem("user_data");
 
         if (storedToken && storedUser) {
           setToken(storedToken);
@@ -146,6 +201,10 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
+  const loginWithGoogle = async () => {
+    await promptAsync();
+  };
+
   const logout = async () => {
     try {
       // Clear stored authentication data
@@ -182,6 +241,7 @@ export const AuthProvider = ({ children }) => {
         signup,
         logout,
         updateUserInContext,
+        loginWithGoogle,
       }}
     >
       {children}

frontend/navigation/GroupsStackNavigator.js

@@ -12,9 +12,9 @@ const GroupsStackNavigator = () => {
     <Stack.Navigator>
       <Stack.Screen name="GroupsList" component={HomeScreen} options={{ headerShown: false }}/>
       <Stack.Screen name="GroupDetails" component={GroupDetailsScreen} />
-      <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ title: 'Add Expense' }} />
+      <Stack.Screen name="AddExpense" component={AddExpenseScreen} options={{ headerShown: false }} />
       <Stack.Screen name="JoinGroup" component={JoinGroupScreen} options={{ headerShown: false }} />
-  <Stack.Screen name="GroupSettings" component={GroupSettingsScreen} options={{ title: 'Group Settings' }} />
+      <Stack.Screen name="GroupSettings" component={GroupSettingsScreen} options={{ headerShown: false }} />
     </Stack.Navigator>
   );
 };

frontend/package.json

@@ -16,6 +16,8 @@
     "@react-navigation/native-stack": "^7.3.23",
     "axios": "^1.11.0",
     "expo": "~53.0.20",
+    "expo-auth-session": "^6.2.1",
+    "expo-crypto": "^14.1.5",
     "expo-image-picker": "~16.0.2",
     "expo-status-bar": "~2.2.3",
     "react": "19.0.0",