Updated FE OAuth

backend/integrations/oauth/soth/msft_web/msft_web.go

@@ -34,6 +34,7 @@ var defaultScopes = []string{"openid", "offline_access", "user.read", "calendars
 func New(clientKey *m.Secret[string], secret *m.Secret[string], callbackURL string, tenant string, scopes ...string) *Provider {
 	p := &Provider{
 		ClientKey:    clientKey,
+		Secret: 	  secret,
 		CallbackURL:  callbackURL,
 		ProviderName: "microsoftonlineweb",
 		tenant:       tenant,

frontend/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@generatesac/lib",
-  "version": "0.0.180",
+  "version": "0.0.184",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

frontend/lib/src/api/authApi.ts

@@ -3,7 +3,7 @@ import { LoginResponse, OAuthCallbackRequestQueryParams } from "../types/auth";
 import { baseApi, handleQueryParams } from "./base";
 
 const AUTH_API_BASE_URL = "/auth";
-const PROVIDER = "microsoftonline";
+const PROVIDER = "microsoftonlineweb";
 
 export const authApi = baseApi.injectEndpoints({
   endpoints: (builder) => ({

frontend/lib/src/api/base.ts

@@ -1,19 +1,28 @@
 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
 
-export const LOCAL_API_BASE_URL = "http://localhost:3000/api/v1";
+export const LOCAL_API_BASE_URL = "http://127.0.0.1:8080/api/v1";
 export const PROD_API_BASE_URL = "https://studentactivitycalendar.xyz/api/v1";
 
+type GlobalState = {
+  platform: "web" | "mobile";
+  loggedIn: boolean;
+  accessToken?: string;
+};
+
 // BaseAPI for the entire application:
 export const baseApi = createApi({
   baseQuery: fetchBaseQuery({
-    baseUrl: PROD_API_BASE_URL,
+    baseUrl: LOCAL_API_BASE_URL,
     credentials: "include",
     prepareHeaders: async (headers, { getState }) => {
       // User slice existing must exist in all dependent apps:
-      const token = (getState() as { user: { accessToken: string } })?.user?.accessToken;
-      if (token) {
-        headers.set("_sac_session", token);
+      const globalState = (getState() as { global: GlobalState })?.global;
+      if (globalState.accessToken) {
+        // Pass the authentication header:
+        headers.set("_sac_session", globalState.accessToken);
       }
+      // Set the platform header:
+      headers.set("Platform", globalState.platform);
       return headers;
     },
   }),

frontend/mobile/package.json

@@ -25,7 +25,7 @@
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@fortawesome/react-native-fontawesome": "^0.3.2",
-        "@generatesac/lib": "0.0.180",
+        "@generatesac/lib": "0.0.184",
         "@gorhom/bottom-sheet": "^4.6.3",
         "@hookform/resolvers": "^3.4.2",
         "@react-native-async-storage/async-storage": "^1.23.1",

frontend/mobile/src/app/_layout.tsx

@@ -20,7 +20,7 @@ export { ErrorBoundary } from 'expo-router';
 SplashScreen.preventAutoHideAsync();
 
 const InitalLayout = () => {
-    const { accessToken, loggedIn } = useAppSelector((state) => state.user);
+    const { accessToken, loggedIn } = useAppSelector((state) => state.global);
     const {
         eventPreviewRef,
         eventId,

frontend/mobile/src/app/app/(tabs)/profile.tsx

@@ -13,10 +13,10 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 
 import { GlobalLayout } from '@/src/app/design-system/components/GlobalLayout/GlobalLayout';
-import { resetAccessToken } from '@/src/store/slices/userSlice';
 import { useAppDispatch, useAppSelector } from '@/src/store/store';
 
 import { Box, Colors, SACColors, Spacing, Text } from '../../design-system';
+import { resetAccessToken } from '@/src/store/slices/globalSlice';
 
 type ProfileItemProps = {
     icon: IconDefinition;

frontend/mobile/src/app/auth/callback.tsx

@@ -6,16 +6,17 @@ import { router, useLocalSearchParams } from 'expo-router';
 import { OAuthCallbackRequestQueryParams, authApi } from '@generatesac/lib';
 
 import Loading from '@/src/assets/gif/loading.gif';
-import { setLoggedInState, setUser } from '@/src/store/slices/userSlice';
+import { setUser } from '@/src/store/slices/userSlice';
 import { useAppDispatch, useAppSelector } from '@/src/store/store';
 
 import { Box, Text } from '../design-system';
+import { setLoggedIn } from '@/src/store/slices/globalSlice';
 
 const OAuthCallback = () => {
     const params = useLocalSearchParams();
     const [oAuthCallback] = authApi.useLazyCallbackQuery();
     const dispatch = useAppDispatch();
-    const { accessToken } = useAppSelector((state) => state.user);
+    const { accessToken } = useAppSelector((state) => state.global);
 
     useEffect(() => {
         const { code, session_state, state } =
@@ -25,7 +26,7 @@ const OAuthCallback = () => {
                 ({ data, error }) => {
                     if (data) {
                         dispatch(setUser(data));
-                        dispatch(setLoggedInState(true));
+                        dispatch(setLoggedIn(true));
                         router.push('/app/');
                     }
                     if (error) {

frontend/mobile/src/app/auth/index.tsx

@@ -4,11 +4,11 @@ import { Image, Linking, SafeAreaView } from 'react-native';
 import { authApi } from '@generatesac/lib';
 
 import Loading from '@/src/assets/gif/loading.gif';
-import { setAccessToken } from '@/src/store/slices/userSlice';
 import { useAppDispatch } from '@/src/store/store';
 
 import { Box, Button, Text } from '../design-system';
 import { GlobalLayout } from '../design-system/components/GlobalLayout/GlobalLayout';
+import { setAccessToken } from '@/src/store/slices/globalSlice';
 
 const WelcomePage = () => {
     const [login, { isLoading }] = authApi.useLazyLoginQuery();

frontend/mobile/src/hooks/useClub.ts

@@ -25,7 +25,6 @@ const useClub = () => {
         if (clubId !== '') {
             getClub(clubId).then(({ data: clubData }) => {
                 if (clubData) {
-                    console.log(clubData);
                     dispatch(setClub(clubData));
                 }
             });
@@ -50,7 +49,6 @@ const useClub = () => {
                             new Date(event.end_time).getTime() >
                             new Date().getTime()
                     );
-                    console.log('events', events);
                     dispatch(setClubEvents(events));
                 }
             });

frontend/mobile/src/store/slices/globalSlice.ts

@@ -0,0 +1,37 @@
+import { Event, Tag } from '@generatesac/lib';
+import { createSlice } from '@reduxjs/toolkit';
+
+type GlobalState = {
+    platform: 'web' | 'mobile';
+    loggedIn: boolean;
+    accessToken?: string;
+};
+
+const initialState: GlobalState = {
+    platform: 'mobile',
+    loggedIn: false,
+};
+
+export const globalSlice = createSlice({
+    name: 'global',
+    initialState,
+    reducers: {
+        setLoggedIn: (state, action) => {
+            state.loggedIn = action.payload;
+        },
+        setAccessToken: (state, action) => {
+            state.accessToken = action.payload;
+        },
+        resetAccessToken: (state) => {
+            state.accessToken = undefined;
+            state.loggedIn = false;
+        }
+    }
+});
+
+export const {
+    setLoggedIn,
+    setAccessToken,
+    resetAccessToken
+} = globalSlice.actions;
+export default globalSlice.reducer;

frontend/mobile/src/store/slices/userSlice.ts

@@ -1,15 +1,9 @@
 import { User } from '@generatesac/lib';
 import { createSlice } from '@reduxjs/toolkit';
 
-export type UserState = {
-    loggedIn: boolean;
-    accessToken?: string;
-};
-
-const initialState: UserState & User = {
+const initialState: User = {
     id: '',
     email: '',
-    loggedIn: false,
     created_at: '',
     updated_at: '',
     name: '',
@@ -33,24 +27,11 @@ export const userSlice = createSlice({
             state.role = action.payload.role;
         },
         resetUser: () => initialState,
-        setAccessToken: (state, action) => {
-            state.accessToken = action.payload;
-        },
-        resetAccessToken: (state) => {
-            state.accessToken = undefined;
-            state.loggedIn = false;
-        },
-        setLoggedInState: (state, action) => {
-            state.loggedIn = action.payload;
-        }
     }
 });
 
 export const {
     setUser,
     resetUser,
-    setAccessToken,
-    resetAccessToken,
-    setLoggedInState
 } = userSlice.actions;
 export default userSlice.reducer;

frontend/mobile/src/store/store.ts

@@ -19,8 +19,10 @@ import { thunk } from 'redux-thunk';
 import clubReducer from '@/src/store/slices/clubSlice';
 import eventReducer from '@/src/store/slices/eventSlice';
 import userReducer from '@/src/store/slices/userSlice';
+import globalReducer from './slices/globalSlice';
 
 const rootReducer = combineReducers({
+    global: globalReducer,
     user: userReducer,
     event: eventReducer,
     club: clubReducer,
@@ -34,7 +36,7 @@ const persistanceConfig = {
     storage: AsyncStorage,
     stateReconciler: autoMergeLevel2,
     blacklist: [baseApi.reducerPath],
-    whitelist: ['user', 'event', 'club']
+    whitelist: ['user', 'event', 'club', 'global']
 };
 
 const persistedReducer = persistReducer<RootReducer>(

frontend/mobile/yarn.lock

@@ -1402,10 +1402,10 @@
     humps "^2.0.1"
     prop-types "^15.7.2"
 
-"@generatesac/[email protected].180":
-  version "0.0.180"
-  resolved "https://registry.yarnpkg.com/@generatesac/lib/-/lib-0.0.180.tgz#01a5866af05ccbd369e14faddb8acb2745b9fece"
-  integrity sha512-UxIBGebRwwHdNyX8CHMmMTbC6WwQMKbvzAtRGCZyMvkldasw+XdQ9+F+WzZyR6OF1Lp84VLJsF6UAIYLO1slVQ==
+"@generatesac/[email protected].184":
+  version "0.0.184"
+  resolved "https://registry.yarnpkg.com/@generatesac/lib/-/lib-0.0.184.tgz#1a024934e05e69685a46bfcfe388fdf8b4809226"
+  integrity sha512-btRNxaCH7ovI9WCRt/0fsaUTW2mWzhgDZwBC6fDmIH929bo6etX477jPAdtBJXAWxMz/RIYvIAuLRda8qma/oA==
   dependencies:
     "@reduxjs/toolkit" "^2.2.3"
     react "^18.2.0"