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

calendar-integration/google-calendar-utils.js

@@ -1,4 +1,5 @@
 export async function fetchGoogleCalendarEvents(token, startDate, endDate) {
+  console.log(token);
   const response = await fetch(
     `https://www.googleapis.com/calendar/v3/calendars/primary/events?single_events=true&time_min=${startDate}&time_max=${endDate}`,
     {
@@ -9,6 +10,7 @@ export async function fetchGoogleCalendarEvents(token, startDate, endDate) {
   );
 
   const data = await response.json();
+  console.log(data);
   const googleEvents = [];
   data.items?.forEach((item) => {
     let isAllDay = false;

components/pages/settings/CalendarSettingsPage.tsx

@@ -1,5 +1,5 @@
 import { AntDesign, Ionicons } from "@expo/vector-icons";
-import React, { useCallback, useState } from "react";
+import React, {useCallback, 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,21 +9,19 @@ import { fetchMicrosoftCalendarEvents } from "@/calendar-integration/microsoft-c
 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";
 import debounce from "debounce";
 import AppleIcon from "@/assets/svgs/AppleIcon";
 import GoogleIcon from "@/assets/svgs/GoogleIcon";
 import OutlookIcon from "@/assets/svgs/OutlookIcon";
+import * as AuthSession from "expo-auth-session";
+import * as Google from "expo-auth-session/providers/google";
+import * as WebBrowser from "expo-web-browser";
 
-GoogleSignin.configure({
+const googleConfig = {
-  webClientId:
+  androidClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
-    "406146460310-hjadmfa1gg4ptaouira5rkhu0djlo5ut.apps.googleusercontent.com",
+  iosClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
-  scopes: ["profile", "email"], // Note: add calendar scope
+  webClientId: "406146460310-2u67ab2nbhu23trp8auho1fq4om29fc0.apps.googleusercontent.com",
-});
+  scopes: ["email", "profile", "https://www.googleapis.com/auth/calendar.events.owned"]
-
-const GoogleLogin = async () => {
-  return await GoogleSignin.signIn();
 };
 
 const microsoftConfig = {
@@ -57,7 +55,15 @@ const CalendarSettingsPage = (props: {
   const { mutateAsync: createEventFromProvider } = useCreateEventFromProvider();
   const { mutateAsync: updateUserData } = useUpdateUserData();
 
+  WebBrowser.maybeCompleteAuthSession()
+  const [request, response, promptAsync] = Google.useAuthRequest(googleConfig);
+
+  useEffect(() => {
+    signInWithGoogle();
+  }, [response]);
+
   const fetchAndSaveGoogleEvents = () => {
+    console.log("fetch");
     const timeMin = new Date(new Date().setHours(0, 0, 0, 0));
     const timeMax = new Date(
       new Date(new Date().setHours(0, 0, 0, 0)).setDate(timeMin.getDate() + 30)
@@ -94,19 +100,16 @@ const CalendarSettingsPage = (props: {
     });
   };
 
-  const handleGoogleLogin = async () => {
+  const signInWithGoogle = async () => {
     try {
-      const response = await GoogleLogin();
+      // Attempt to retrieve user information from AsyncStorage
-      if (response) {
+      if (response?.type === 'success') {
-        const googleUserData = response.data;
+        console.log(response.authentication)
-        let idToken = googleUserData?.idToken;
+        await updateUserData({newUserData: {googleToken: response.authentication?.accessToken}})
-
-        if (idToken) {
-          await updateUserData({ newUserData: { googleToken: idToken } });
       }
-      }
+    } catch (error) {
-    } catch (apiError) {
+      // Handle any errors that occur during AsyncStorage retrieval or other operations
-      console.log(apiError || "Something went wrong");
+      console.error("Error retrieving user data from AsyncStorage:", error);
     }
   };
 
@@ -290,7 +293,7 @@ const CalendarSettingsPage = (props: {
         </Text>
 
         <Button
-          onPress={handleGoogleLogin}
+            onPress={() => promptAsync()}
           label="Connect Google"
           iconSource={() => (
             <View marginR-15>
@@ -329,50 +332,31 @@ const CalendarSettingsPage = (props: {
           Connected Calendars
         </Text>
         <View style={styles.card}>
-          <Text text70>Calendars</Text>
           <View style={{ marginTop: 20 }}>
             <Button
-              label={"Sync Outlook"}
-              iconSource={() => (
-                <View
-                  backgroundColor="#ededed"
-                  width={40}
-                  height={40}
-                  style={{ borderRadius: 50 }}
-                  marginR-10
-                  centerV
-                  centerH
-                >
-                  <Ionicons name="logo-microsoft" size={22} color="#979797" />
-                </View>
-              )}
-              backgroundColor="white"
-              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}
-              />
+                label="Sync Google"
+                iconSource={() => (
+                    <View marginR-15>
+                      <GoogleIcon />
+                    </View>
                 )}
+                style={styles.addCalBtn}
+                color="black"
+                text70BL
+            />
+            <Button
+                onPress={fetchAndSaveMicrosoftEvents}
+                label="Sync Outlook"
+                iconSource={() => (
+                    <View marginR-15>
+                      <OutlookIcon />
+                    </View>
+                )}
+                style={styles.addCalBtn}
+                color="black"
+                text70BL
+            />
           </View>
         </View>
       </View>