- 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",

package-lock.json

@@ -16,6 +16,7 @@
         "@react-native-firebase/crashlytics": "^20.3.0",
         "@react-native-firebase/firestore": "^20.4.0",
         "@react-native-firebase/functions": "^20.4.0",
+        "@react-native-google-signin/google-signin": "^13.1.0",
         "@react-navigation/drawer": "^6.7.2",
         "@react-navigation/native": "^6.0.2",
         "date-fns": "^3.6.0",
@@ -7233,6 +7234,25 @@
         "@react-native-firebase/app": "20.4.0"
       }
     },
+    "node_modules/@react-native-google-signin/google-signin": {
+      "version": "13.1.0",
+      "resolved": "https://registry.npmjs.org/@react-native-google-signin/google-signin/-/google-signin-13.1.0.tgz",
+      "integrity": "sha512-C2/sqb0/s0c+Dwc/mykASZsRuHxGqn7SFrCxCY9D8p8IOQO05haInhCc7lzraJshRixGva5c/4usQZ71HMYSEQ==",
+      "peerDependencies": {
+        "expo": ">=50.0.0",
+        "react": "*",
+        "react-dom": "*",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@react-native/assets-registry": {
       "version": "0.74.85",
       "resolved": "https://registry.npmjs.org/@react-native/assets-registry/-/assets-registry-0.74.85.tgz",

package.json

@@ -35,6 +35,7 @@
     "@react-native-firebase/crashlytics": "^20.3.0",
     "@react-native-firebase/firestore": "^20.4.0",
     "@react-native-firebase/functions": "^20.4.0",
+    "@react-native-google-signin/google-signin": "^13.1.0",
     "@react-navigation/drawer": "^6.7.2",
     "@react-navigation/native": "^6.0.2",
     "date-fns": "^3.6.0",