feat: Add Google Sign-In option

I've added the functionality for you to sign in or sign up using your Google account.

- Added a 'Sign in with Google' button to the Login and Signup screens.
- Implemented the Google authentication flow using Expo's `expo-auth-session`.
- Added a new API endpoint for Google login in the backend.
- Updated the AuthContext to handle the Google sign-in state.
- Added environment variable handling for Google Client IDs.

Author: google-labs-jules[bot]

.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/context/AuthContext.js

@@ -6,6 +6,10 @@ import {
   setAuthTokens,
   setTokenUpdateListener,
 } from "../api/client";
+import { useAuthRequest } from "expo-auth-session/providers/google";
+import * as WebBrowser from "expo-web-browser";
+
+WebBrowser.maybeCompleteAuthSession();
 
 export const AuthContext = createContext();
 
@@ -15,13 +19,51 @@ export const AuthProvider = ({ children }) => {
   const [refresh, setRefresh] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
 
+  const [request, response, promptAsync] = useAuthRequest({
+    expoClientId: process.env.EXPO_PUBLIC_GOOGLE_EXPO_CLIENT_ID,
+    iosClientId: process.env.EXPO_PUBLIC_GOOGLE_IOS_CLIENT_ID,
+    androidClientId: process.env.EXPO_PUBLIC_GOOGLE_ANDROID_CLIENT_ID,
+    webClientId: process.env.EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID,
+  });
+
+  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 +188,10 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
+  const loginWithGoogle = async () => {
+    await promptAsync();
+  };
+
   const logout = async () => {
     try {
       // Clear stored authentication data
@@ -182,6 +228,7 @@ export const AuthProvider = ({ children }) => {
         signup,
         logout,
         updateUserInContext,
+        loginWithGoogle,
       }}
     >
       {children}

frontend/package-lock.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",

frontend/package.json

@@ -8,7 +8,7 @@ const LoginScreen = ({ navigation }) => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const { login } = useContext(AuthContext);
+  const { login, loginWithGoogle } = useContext(AuthContext);
 
   const handleLogin = async () => {
     if (!email || !password) {
@@ -23,6 +23,18 @@ const LoginScreen = ({ navigation }) => {
     }
   };
 
+  const handleGoogleSignIn = async () => {
+    setIsLoading(true);
+    try {
+      await loginWithGoogle();
+    } catch (error) {
+      console.error('Google Sign-In error:', error);
+      Alert.alert('Google Sign-In Failed', 'An error occurred during Google Sign-In. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Welcome Back!</Text>
@@ -53,6 +65,16 @@ const LoginScreen = ({ navigation }) => {
       >
         Login
       </Button>
+      <Button
+        mode="contained"
+        onPress={handleGoogleSignIn}
+        style={[styles.button, styles.googleButton]}
+        labelStyle={styles.buttonLabel}
+        icon="google"
+        disabled={isLoading}
+      >
+        Sign in with Google
+      </Button>
       <Button
         onPress={() => navigation.navigate('Signup')}
         style={styles.signupButton}
@@ -86,6 +108,9 @@ const styles = StyleSheet.create({
     backgroundColor: colors.primary,
     paddingVertical: spacing.sm,
   },
+  googleButton: {
+    backgroundColor: '#4285F4', // Google's brand color
+  },
   buttonLabel: {
     ...typography.body,
     color: colors.white,

frontend/screens/LoginScreen.js

@@ -10,7 +10,7 @@ const SignupScreen = ({ navigation }) => {
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
-  const { signup } = useContext(AuthContext);
+  const { signup, loginWithGoogle } = useContext(AuthContext);
 
   const handleSignup = async () => {
     if (!name || !email || !password || !confirmPassword) {
@@ -35,6 +35,18 @@ const SignupScreen = ({ navigation }) => {
     }
   };
 
+  const handleGoogleSignIn = async () => {
+    setIsLoading(true);
+    try {
+      await loginWithGoogle();
+    } catch (error) {
+      console.error('Google Sign-In error:', error);
+      Alert.alert('Google Sign-In Failed', 'An error occurred during Google Sign-In. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <View style={styles.container}>
       <Text style={styles.title}>Create Account</Text>
@@ -81,6 +93,16 @@ const SignupScreen = ({ navigation }) => {
       >
         Sign Up
       </Button>
+      <Button
+        mode="contained"
+        onPress={handleGoogleSignIn}
+        style={[styles.button, styles.googleButton]}
+        labelStyle={styles.buttonLabel}
+        icon="google"
+        disabled={isLoading}
+      >
+        Sign up with Google
+      </Button>
       <Button
         onPress={() => navigation.navigate('Login')}
         style={styles.loginButton}
@@ -115,6 +137,9 @@ const styles = StyleSheet.create({
     backgroundColor: colors.primary,
     paddingVertical: spacing.sm,
   },
+  googleButton: {
+    backgroundColor: '#4285F4', // Google's brand color
+  },
   buttonLabel: {
     ...typography.body,
     color: colors.white,