Add google auth component

app.json

@@ -12,11 +12,16 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "usesAppleSignIn": true,
+      "googleServicesFile": "./GoogleService-Info.plist",
     },
     "android": {
+      "googleServicesFile": "./google-services.json",
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
@@ -25,6 +30,9 @@
     "web": {
       "favicon": "./assets/favicon.png"
     },
-    "plugins": ["expo-router"]
+    "plugins": [
+      "expo-router",
+      "@react-native-google-signin/google-signin",
+    ]
   }
 }

package.json

@@ -15,6 +15,7 @@
     "@expo/vector-icons": "^13.0.0",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/datetimepicker": "7.2.0",
+    "@react-native-google-signin/google-signin": "^10.0.1",
     "@react-navigation/bottom-tabs": "^6.5.9",
     "@react-navigation/material-bottom-tabs": "^6.2.17",
     "@react-navigation/native": "^6.1.8",
@@ -25,6 +26,7 @@
     "deprecated-react-native-prop-types": "^4.2.1",
     "dom-parser": "^0.1.6",
     "expo": "~49.0.11",
+    "expo-apple-authentication": "~6.1.0",
     "expo-constants": "~14.4.2",
     "expo-linking": "~5.0.2",
     "expo-router": "^2.0.0",
@@ -40,13 +42,10 @@
     "react-native-render-html": "^6.3.4",
     "react-native-root-siblings": "^4.1.1",
     "react-native-root-toast": "^3.5.1",
-    "react-native-ionicons": "^4.6.5",
-    "react-native-elements": "^3.4.3",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
-    "react-native-vector-icons": "^10.0.0",
     "react-native-url-polyfill": "^2.0.0",
-    "expo-apple-authentication": "~6.1.0"
+    "react-native-vector-icons": "^10.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/app/auth/login.tsx

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
 import { Redirect, Link } from 'expo-router';
-import { Alert, View } from 'react-native';
+import { Alert, View, Text } from 'react-native';
 import { Button, Input } from 'react-native-elements';
 import { useSession } from '../../utils/AuthContext';
 import globalStyles from '../../styles/globalStyles';
+import AppleAuth from '../../components/AppleAuth';
+import GoogleAuth from '../../components/GoogleAuth';
 
 function LoginScreen() {
   const sessionHandler = useSession();
@@ -50,11 +52,13 @@ function LoginScreen() {
         />
       </View>
 
-      <Link href="/auth/signup">Don&apos;t have an account? Sign Up</Link>
-
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>
         <Button title="Log In" disabled={loading} onPress={signInWithEmail} />
       </View>
+      <Link href="/auth/signup">Don&apos;t have an account? Sign Up</Link>
+      <Text>OR</Text>
+      <AppleAuth />
+      <GoogleAuth />
     </View>
   );
 }

src/components/AppleAuth.tsx

@@ -3,7 +3,7 @@ import * as AppleAuthentication from 'expo-apple-authentication';
 import { useSession } from '../utils/AuthContext';
 import { router } from 'expo-router';
 
-export function Auth() {
+export default function AppleAuth() {
   const { signInWithApple } = useSession();
   if (Platform.OS === 'ios')
     return (

src/components/GoogleAuth.tsx

@@ -0,0 +1,45 @@
+import {
+  GoogleSignin,
+  GoogleSigninButton,
+  statusCodes,
+} from '@react-native-google-signin/google-signin';
+import { useSession } from '../utils/AuthContext';
+
+export default function GoogleAuth() {
+  const { signInWithGoogle } = useSession();
+  GoogleSignin.configure({
+    scopes: ['https://www.googleapis.com/auth/drive.readonly'],
+    webClientId: 'YOUR CLIENT ID FROM GOOGLE CONSOLE',
+  });
+
+  return (
+    <GoogleSigninButton
+      size={GoogleSigninButton.Size.Wide}
+      color={GoogleSigninButton.Color.Dark}
+      onPress={async () => {
+        try {
+          await GoogleSignin.hasPlayServices();
+          const userInfo = await GoogleSignin.signIn();
+          if (userInfo.idToken) {
+            const { data, error } = await signInWithGoogle(userInfo.idToken);
+            console.log(error, data);
+          } else {
+            throw new Error('no ID token present!');
+          }
+        } catch (error: any) {
+          if (error) {
+            if (error.code === statusCodes.SIGN_IN_CANCELLED) {
+              // user cancelled the login flow
+            } else if (error.code === statusCodes.IN_PROGRESS) {
+              // operation (e.g. sign in) is in progress already
+            } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
+              // play services not available or outdated
+            } else {
+              // some other error happened
+            }
+          }
+        }
+      }}
+    />
+  );
+}

src/utils/AuthContext.tsx

@@ -15,6 +15,7 @@ export interface AuthState {
   signUp: (email: string, password: string) => Promise<AuthResponse>;
   signInWithEmail: (email: string, password: string) => Promise<AuthResponse>;
   signInWithApple: (token: string) => Promise<AuthResponse>;
+  signInWithGoogle: (token: string) => Promise<AuthResponse>;
   signOut: () => void;
 }
 
@@ -71,12 +72,17 @@ export function AuthContextProvider({
     setSession(null);
   };
 
-  const signInWithApple = (token: string) => 
+  const signInWithApple = (token: string) =>
     supabase.auth.signInWithIdToken({
-          provider: 'apple',
-          token: token 
-        });
+      provider: 'apple',
+      token: token,
+    });
 
+  const signInWithGoogle = async (token: string) =>
+    await supabase.auth.signInWithIdToken({
+      provider: 'google',
+      token: token,
+    });
 
   const authContextValue = useMemo(
     () => ({
@@ -85,6 +91,7 @@ export function AuthContextProvider({
       signIn,
       signInWithEmail,
       signInWithApple,
+      signInWithGoogle,
       signOut,
     }),
     [session],