- Added proper oauth2 authentication with google and saving of the access token to the profile

components/pages/settings/CalendarSettingsPage.tsx

@@ -1,5 +1,5 @@
 import {AntDesign, Ionicons} from "@expo/vector-icons";
-import React, {useState} from "react";
+import React, {useEffect, useState} from "react";
 import {Button, Checkbox, Text, View} from "react-native-ui-lib";
 import {ScrollView, StyleSheet} from "react-native";
 import {colorMap} from "@/contexts/SettingsContext";
@@ -9,18 +9,9 @@ import {fetchMicrosoftCalendarEvents} from "@/calendar-integration/microsoft-cal
 import {useCreateEventFromProvider} from "@/hooks/firebase/useCreateEvent";
 import {useAuthContext} from "@/contexts/AuthContext";
 import {useUpdateUserData} from "@/hooks/firebase/useUpdateUserData";
-import {GoogleSignin} from "@react-native-google-signin/google-signin";
 import * as AuthSession from "expo-auth-session";
-
-GoogleSignin.configure({
-    webClientId:
-        "406146460310-hjadmfa1gg4ptaouira5rkhu0djlo5ut.apps.googleusercontent.com",
-    scopes: ["profile", "email"], // Note: add calendar scope
-});
-
-const GoogleLogin = async () => {
-    return await GoogleSignin.signIn();
-};
+import * as Google from "expo-auth-session/providers/google";
+import * as WebBrowser from "expo-web-browser";
 
 const microsoftConfig = {
     clientId: "13c79071-1066-40a9-9f71-b8c4b138b4af", // Replace with your Microsoft client ID
@@ -37,6 +28,13 @@ const microsoftConfig = {
     tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token"
 };
 
+const googleConfig = {
+    androidClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
+    iosClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
+    webClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
+    scopes: ["email", "profile", "https://www.googleapis.com/auth/calendar.events.owned"]
+};
+
 const CalendarSettingsPage = (props: {
     setSelectedPage: (page: number) => void;
 }) => {
@@ -47,6 +45,26 @@ const CalendarSettingsPage = (props: {
     const {mutateAsync: createEventFromProvider} = useCreateEventFromProvider();
     const {mutateAsync: updateUserData} = useUpdateUserData();
 
+    WebBrowser.maybeCompleteAuthSession()
+    const [request, response, promptAsync] = Google.useAuthRequest(googleConfig);
+
+    const signInWithGoogle = async () => {
+        try {
+            // Attempt to retrieve user information from AsyncStorage
+            if (response?.type === 'success') {
+                console.log(response.authentication)
+                await updateUserData({newUserData: {googleToken: response.authentication?.accessToken}})
+            }
+        } catch (error) {
+            // Handle any errors that occur during AsyncStorage retrieval or other operations
+            console.error("Error retrieving user data from AsyncStorage:", error);
+        }
+    };
+
+    useEffect(() => {
+        signInWithGoogle();
+    }, [response]);
+
     const fetchAndSaveGoogleEvents = () => {
         const timeMin = new Date(new Date().setHours(0, 0, 0, 0));
         const timeMax = new Date(
@@ -85,22 +103,6 @@ const CalendarSettingsPage = (props: {
         });
     };
 
-    const handleGoogleLogin = async () => {
-        try {
-            const response = await GoogleLogin();
-            if (response) {
-                const googleUserData = response.data;
-                let idToken = googleUserData?.idToken;
-
-                if (idToken) {
-                    await updateUserData({newUserData: {googleToken: idToken}});
-                }
-            }
-        } catch (apiError) {
-            console.log(apiError || "Something went wrong");
-        }
-    };
-
     const handleMicrosoftSignIn = async () => {
         try {
             console.log("Starting Microsoft sign-in...");
@@ -266,7 +268,7 @@ const CalendarSettingsPage = (props: {
                             backgroundColor="white"
                             color="#464039"
                             borderRadius={15}
-                            onPress={handleGoogleLogin}
+                            onPress={() => promptAsync()}
                         />
                         <Button
                             label={"Connect Microsoft"}
@@ -293,7 +295,28 @@ const CalendarSettingsPage = (props: {
                 <View style={styles.card}>
                     <Text text70>Calendars</Text>
                     <View style={{marginTop: 20}}>
-                        <Button
+                        {profileData?.googleToken !== undefined && profileData.googleToken !== '' && <Button
+                            label={"Sync Google"}
+                            iconSource={() => (
+                                <View
+                                    backgroundColor="#ededed"
+                                    width={40}
+                                    height={40}
+                                    style={{borderRadius: 50}}
+                                    marginR-10
+                                    centerV
+                                    centerH
+                                >
+                                    <Ionicons name="logo-google" size={22} color="#979797"/>
+                                </View>
+                            )}
+                            backgroundColor="white"
+                            color="#464039"
+                            borderRadius={15}
+                            onPress={fetchAndSaveGoogleEvents}
+                        />}
+
+                        {profileData?.microsoftToken !== undefined && profileData.microsoftToken !== '' &&<Button
                             label={"Sync Outlook"}
                             iconSource={() => (
                                 <View
@@ -312,29 +335,7 @@ const CalendarSettingsPage = (props: {
                             color="#464039"
                             borderRadius={15}
                             onPress={fetchAndSaveMicrosoftEvents}
-                        />
-                        {profileData?.googleToken !== undefined && (
-                            <Button
-                                label={"Sync Google"}
-                                iconSource={() => (
-                                    <View
-                                        backgroundColor="#ededed"
-                                        width={40}
-                                        height={40}
-                                        style={{borderRadius: 50}}
-                                        marginR-10
-                                        centerV
-                                        centerH
-                                    >
-                                        <Ionicons name="logo-google" size={22} color="#979797"/>
-                                    </View>
-                                )}
-                                backgroundColor="white"
-                                color="#464039"
-                                borderRadius={15}
-                                onPress={fetchAndSaveGoogleEvents}
-                            />
-                        )}
+                        />}
                     </View>
                 </View>
             </View>