setup Google Sign In

Author: Mishra-coder

mobile/app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "mobile",
-    "slug": "mobile",
+    "name": "Zappify",
+    "slug": "zappify",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -13,17 +13,22 @@
       "backgroundColor": "#ffffff"
     },
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.zappify.app"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
+      "package": "com.zappify.app",
       "edgeToEdgeEnabled": true
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": [
+      "@react-native-google-signin/google-signin"
+    ]
   }
 }

mobile/package-lock.json

@@ -10,11 +10,15 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "2.2.0",
+    "@react-native-google-signin/google-signin": "^16.1.2",
     "@react-navigation/bottom-tabs": "^7.15.9",
     "@react-navigation/native": "^7.2.2",
     "@react-navigation/native-stack": "^7.14.10",
     "expo": "~54.0.33",
+    "expo-auth-session": "~7.0.10",
+    "expo-crypto": "~15.0.8",
     "expo-status-bar": "~3.0.9",
+    "expo-web-browser": "~15.0.10",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",

mobile/package.json

@@ -3,14 +3,38 @@ import { View, Text, TextInput, TouchableOpacity, StyleSheet, Alert, KeyboardAvo
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';
 import { colors } from '../theme/colors';
 import { useApp } from '../context/AppContext';
 
+GoogleSignin.configure({
+  webClientId: '1076957044730-mht8sbihb0d4661hprrvbjf9v4gb0njr.apps.googleusercontent.com',
+  offlineAccess: true,
+});
+
 export default function LoginScreen({ navigation }) {
   const [isSignUp, setIsSignUp] = useState(false);
   const [form, setForm] = useState({ name: '', email: '', password: '', confirm: '' });
   const { login } = useApp();
 
+  const handleGoogleSignIn = async () => {
+    try {
+      await GoogleSignin.hasPlayServices();
+      const userInfo = await GoogleSignin.signIn();
+      const user = {
+        name: userInfo.data.user.name,
+        email: userInfo.data.user.email,
+        picture: userInfo.data.user.photo,
+      };
+      await login(user);
+      navigation.goBack();
+    } catch (error) {
+      if (error.code === statusCodes.SIGN_IN_CANCELLED) return;
+      if (error.code === statusCodes.IN_PROGRESS) return;
+      Alert.alert('Google Sign In Failed', error.message);
+    }
+  };
+
   const handleAuth = async () => {
     if (!form.email || !form.password) { Alert.alert('Error', 'Please fill all fields'); return; }
     if (isSignUp) {
@@ -59,6 +83,17 @@ export default function LoginScreen({ navigation }) {
             <Text style={styles.authBtnTxt}>{isSignUp ? 'CREATE ACCOUNT' : 'SIGN IN'}</Text>
           </TouchableOpacity>
 
+          <View style={styles.separator}>
+            <View style={styles.sepLine} />
+            <Text style={styles.sepTxt}>OR CONTINUE WITH</Text>
+            <View style={styles.sepLine} />
+          </View>
+
+          <TouchableOpacity style={styles.googleBtn} onPress={handleGoogleSignIn}>
+            <Text style={styles.googleG}>G</Text>
+            <Text style={styles.googleBtnTxt}>{isSignUp ? 'Sign up with Google' : 'Sign in with Google'}</Text>
+          </TouchableOpacity>
+
           <TouchableOpacity style={styles.switchBtn} onPress={() => setIsSignUp(!isSignUp)}>
             <Text style={styles.switchTxt}>
               {isSignUp ? 'Already have an account? ' : "Don't have an account? "}
@@ -80,6 +115,12 @@ const styles = StyleSheet.create({
   input: { width: '100%', borderWidth: 1.5, borderColor: colors.border, borderRadius: 12, paddingHorizontal: 16, paddingVertical: 14, fontSize: 15, color: colors.dark, marginBottom: 14 },
   authBtn: { width: '100%', backgroundColor: colors.brand, borderRadius: 12, paddingVertical: 16, alignItems: 'center', marginTop: 4 },
   authBtnTxt: { color: colors.white, fontWeight: '800', fontSize: 15, letterSpacing: 1 },
+  separator: { flexDirection: 'row', alignItems: 'center', width: '100%', marginVertical: 16, gap: 10 },
+  sepLine: { flex: 1, height: 1, backgroundColor: colors.border },
+  sepTxt: { fontSize: 11, color: colors.gray, fontWeight: '600', letterSpacing: 0.5 },
+  googleBtn: { width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 10, borderWidth: 1.5, borderColor: colors.border, borderRadius: 12, paddingVertical: 14 },
+  googleG: { fontSize: 18, fontWeight: '800', color: '#4285F4' },
+  googleBtnTxt: { fontSize: 14, fontWeight: '600', color: colors.dark },
   switchBtn: { marginTop: 20 },
   switchTxt: { fontSize: 14, color: colors.gray },
   switchLink: { color: colors.brand, fontWeight: '700' },