- Implementation of a google authentication with a react-native library

components/pages/settings/CalendarSettingsPage.tsx

@@ -6,6 +6,7 @@ import { colorMap } from "@/contexts/SettingsContext";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import { fetchGoogleCalendarEvents } from "@/calendar-integration/google-calendar-utils";
 import { useCreateEvent } from "@/hooks/firebase/useCreateEvent";
+import { GoogleSignin } from "@react-native-google-signin/google-signin";
 
 const CalendarSettingsPage = (props: {
   setSelectedPage: (page: number) => void;
@@ -28,6 +29,14 @@ const CalendarSettingsPage = (props: {
     await createEvent(item);
   }
 
+  // Note: Right key
+  GoogleSignin.configure({
+    webClientId:
+      "406146460310-81gld1b58ujsoe6a2t3ht0haprv5pa69.apps.googleusercontent.com",
+    scopes: ["profile", "email", "calendar"],
+    offlineAccess: true,
+  });
+
   return (
     <View marginH-30>
       <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
@@ -110,6 +119,32 @@ const CalendarSettingsPage = (props: {
           </Text>
         </View>
       </View>
+      <View style={styles.card}>
+        <Text text70>Add Calendar</Text>
+        <View style={{ marginTop: 20 }}>
+          <Button
+            label={"Connect Google"}
+            iconSource={() => (
+              <View
+                backgroundColor="#ededed"
+                width={40}
+                height={40}
+                style={{ borderRadius: 50 }}
+                marginR-10
+                centerV
+                centerH
+              >
+                <AntDesign name="google" size={30} color="#6c645b" />
+              </View>
+            )}
+            icon={<AntDesign name="checkcircleo" size={30} color="#8005eb" />}
+            backgroundColor="white"
+            color="#464039"
+            borderRadius={15}
+            onPress={signInGoogle}
+          />
+        </View>
+      </View>
       <View style={styles.card}>
         <Text text70>Calendars</Text>
         {/** Note: Should check for the user if it has connected calendars **/}
@@ -141,6 +176,17 @@ const CalendarSettingsPage = (props: {
   );
 };
 
+const signInGoogle = async () => {
+  try {
+    await GoogleSignin.hasPlayServices();
+    let userInfo = await GoogleSignin.signIn();
+    console.log(userInfo);
+  } catch (error) {
+    console.log(error);
+    console.log(error.code);
+  }
+};
+
 const styles = StyleSheet.create({
   backBtn: {
     backgroundColor: "red",