- Prepared methods for microsoft authorization and added a button to handle microsoft auth

- Saved the microsoft token to the profile of the current user

calendar-integration/google-calendar-utils.js

@@ -1,6 +1,6 @@
-export async function fetchGoogleCalendarEvents(token, startDate) {
+export async function fetchGoogleCalendarEvents(token, startDate, endDate) {
   const response = await fetch(
-    `https://www.googleapis.com/calendar/v3/calendars/primary/events?single_events=true&time_min=${startDate}`,
+    `https://www.googleapis.com/calendar/v3/calendars/primary/events?single_events=true&time_min=${startDate}&time_max=${endDate}`,
     {
       headers: {
         Authorization: `Bearer ${token}`,

components/pages/settings/CalendarSettingsPage.tsx

@@ -10,6 +10,7 @@ import { useCreateEvent } 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 { authorize } from "react-native-app-auth";
 
 GoogleSignin.configure({
   webClientId:
@@ -21,6 +22,25 @@ const GoogleLogin = async () => {
   return await GoogleSignin.signIn();
 };
 
+const microsoftConfig = {
+  issuer: "https://login.microsoftonline.com/common",
+  clientId: "<your-client-id>", // Replace with your microsoft client id
+  redirectUrl: "<your-redirect-uri>", // replace with your redirect uri added in microsoft portal
+  scopes: ["openid", "profile", "email"],
+  serviceConfiguration: {
+    authorizationEndpoint:
+      "https://login.microsoftonline.com/common/oauth2/v2.0/authorize",
+    tokenEndpoint: "https://login.microsoftonline.com/common/oauth2/v2.0/token",
+    revocationEndpoint:
+      "https://login.microsoftonline.com/common/oauth2/v2.0/logout",
+  },
+  useNonce: true,
+  usePKCE: true, //For iOS, we have added the useNonce and usePKCE parameters, which are recommended for security reasons.
+  additionalParameters: {
+    prompt: "consent",
+  },
+};
+
 const CalendarSettingsPage = (props: {
   setSelectedPage: (page: number) => void;
 }) => {
@@ -32,16 +52,21 @@ const CalendarSettingsPage = (props: {
   const { mutateAsync: updateUserData } = useUpdateUserData();
 
   const fetchAndSaveGoogleEvents = () => {
-    const timeMin = new Date(new Date().setHours(0, 0, 0, 0)).toISOString();
-
-    fetchGoogleCalendarEvents(profileData?.googleToken, timeMin).then(
-      (response) => {
-        response?.forEach((item) => createEvent(item));
-      },
+    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),
     );
+
+    fetchGoogleCalendarEvents(
+      profileData?.googleToken,
+      timeMin.toISOString(),
+      timeMax.toISOString(),
+    ).then((response) => {
+      response?.forEach((item) => createEvent(item));
+    });
   };
 
-  const fetchAndSaveMicrosoftEvents = (token: string) => {
+  const fetchAndSaveMicrosoftEvents = () => {
     const startDateTime = new Date(new Date().setHours(0, 0, 0, 0));
     const endDateTime = new Date(
       new Date(new Date().setHours(0, 0, 0, 0)).setDate(
@@ -50,7 +75,7 @@ const CalendarSettingsPage = (props: {
     );
 
     fetchMicrosoftCalendarEvents(
-      token,
+      profileData?.microsoftToken,
       startDateTime.toISOString().slice(0, -5) + "Z",
       endDateTime.toISOString().slice(0, -5) + "Z",
     ).then((response) => {
@@ -74,6 +99,17 @@ const CalendarSettingsPage = (props: {
     }
   };
 
+  const handleMicrosoftSignIn = async () => {
+    try {
+      const { idToken } = await authorize(microsoftConfig);
+      if (idToken) {
+        await updateUserData({ newUserData: { microsoftToken: idToken } });
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
   return (
     <View marginH-30>
       <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
@@ -178,6 +214,25 @@ const CalendarSettingsPage = (props: {
             borderRadius={15}
             onPress={handleGoogleLogin}
           />
+          <Button
+              label={"Connect Google"}
+              iconSource={() => (
+                <View
+                    backgroundColor="#ededed"
+                    width={40}
+                    height={40}
+                    style={{ borderRadius: 50 }}
+                    centerV
+                    centerH
+                >
+                  <Ionicons name="logo-microsoft" size={22} color="#979797" />
+                </View>
+              )}
+              backgroundColor="white"
+              color="#464039"
+              borderRadius={15}
+              onPress={handleMicrosoftSignIn}
+          />
         </View>
       </View>
       <View style={styles.card}>
@@ -205,26 +260,28 @@ const CalendarSettingsPage = (props: {
               onPress={fetchAndSaveGoogleEvents}
             />
           )}
-          <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?.microsoftToken !== undefined && (
+            <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}
+            />
+          )}
         </View>
       </View>
     </View>

hooks/firebase/types/profileTypes.ts

@@ -18,6 +18,7 @@ export interface UserProfile {
   familyId?: string;
   uid?: string;
   googleToken?: string;
+  microsoftToken?: string;
 }
 
 export interface ParentProfile extends UserProfile {

package.json

@@ -60,6 +60,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.3",
+    "react-native-app-auth": "^8.0.0",
     "react-native-big-calendar": "^4.14.0",
     "react-native-calendars": "^1.1306.0",
     "react-native-gesture-handler": "~2.16.1",