Firebase Admin Refactor + JWT feature

.github/workflows/main.yml

@@ -23,12 +23,19 @@ jobs:
         run: npm ci
         working-directory: server/
 
-      - name: Set up environment variables
+      - name: Create subdirectory for service account JSON
         run: |
           mkdir private_key
-          echo "${{ secrets.SERVICE_ACCOUNT_SECRET }}" > private_key/private.json
         working-directory: server/src
 
+      - name: Create service account JSON
+        id: create-service-account-json
+        uses: jsdaniell/[email protected]
+        with:
+          name: "private.json"
+          json: ${{ secrets.SERVICE_ACCOUNT_SECRET }}
+          dir: 'server/src/private_key/'
+
       - name: Compile TypeScript files
         run: npx tsc
         working-directory: server/

client/src/components/Auth/AuthenticationResponse.tsx

@@ -1,16 +1,18 @@
 import React from "react";
-import { StyleSheet, Text, Dimensions, TouchableOpacity} from "react-native";
+import { StyleSheet, Text, Dimensions, TouchableOpacity } from "react-native";
 import { FirebaseError } from "firebase/app";
 import { User } from "firebase/auth";
 
 //Type to handle Authentication Responses from firebase
-export type AuthenticationResponse = {
-  user: User | null;
-  error?: undefined;
-} | {
-  user?: undefined;
-  error: unknown;
-}
+export type AuthenticationResponse =
+  | {
+      user: User | null;
+      error?: undefined;
+    }
+  | {
+      user?: undefined;
+      error: unknown;
+    };
 
 export class CustomError {
   public code: string;
@@ -23,7 +25,10 @@ export class CustomError {
 }
 
 //Custom responses
-export const inValidEmailResponse = new CustomError("Invalid Email", "Please provide a valid email address")
+export const inValidEmailResponse = new CustomError(
+  "Invalid Email",
+  "Please provide a valid email address"
+);
 
 //Function that decodes the error code
 const decodeFirebaseError = (error: FirebaseError) => {
@@ -47,54 +52,56 @@ const decodeFirebaseError = (error: FirebaseError) => {
 
 const decodeCustomError = (error: CustomError) => {
   return error.message;
-}
+};
 
 //Function that handles the response depending on type
-function handleResponse(response: AuthenticationResponse) {
-  if(response?.user) {
+const handleResponse = (response: AuthenticationResponse) => {
+  if (response?.user) {
+    // If the user is not undefined
     return "";
   }
 
-  console.log(response.error)
-
-  if(response.error instanceof FirebaseError) {
+  if (response.error instanceof FirebaseError) {
+    // If the error is a firebase error
     return decodeFirebaseError(response.error);
   }
-
-  if(response.error instanceof CustomError) {
+  // If the error is a custom error
+  if (response.error instanceof CustomError) {
+    // If the error is a custom error
     return decodeCustomError(response.error);
   }
 
-  return "Unknown error"
-}
+  return "Unknown error";
+};
 
-//Something
+// Authentication Message Component Props
 interface AuthenticationErrorMessageProps {
   response: AuthenticationResponse | undefined;
   onPress?: () => void;
 }
 
-export const AuthenticationErrorMessage: React.FC<AuthenticationErrorMessageProps> = ({ response, onPress }) => {
-  if( response === undefined ) {
+export const AuthenticationErrorMessage: React.FC<
+  AuthenticationErrorMessageProps
+> = ({ response, onPress }) => {
+  if (response === undefined) {
     return null;
   }
 
-  const errorMessage = handleResponse(response)
+  const errorMessage = handleResponse(response);
 
   return (
-    errorMessage &&
-    <TouchableOpacity style={styles.error_container} onPressIn={onPress}>
+    errorMessage && (
+      <TouchableOpacity style={styles.error_container} onPressIn={onPress}>
         <Text style={styles.error_text}>{errorMessage}</Text>
-    </TouchableOpacity>
+      </TouchableOpacity>
+    )
   );
-}
-
+};
 
 const styles = StyleSheet.create({
   error_text: {
     color: "white",
     fontSize: Dimensions.get("window").height * 0.02,
-
   },
   error_container: {
     display: "flex",
@@ -105,7 +112,6 @@ const styles = StyleSheet.create({
     marginTop: Dimensions.get("window").height * 0.005,
     width: Dimensions.get("window").width * 0.9,
     borderRadius: 10,
-    padding: 10
-  }
+    padding: 10,
+  },
 });
-

client/src/components/Auth/LoginScreen.tsx

@@ -27,17 +27,23 @@ const LoginScreen = () => {
   const [email, setEmail] = React.useState<string>("");
   const [password, setPassword] = React.useState<string>("");
   const [authResponse, setAuthResponse] = React.useState<AuthenticationResponse>();
-  const [invalidLogin, invalidateLogin] = React.useState<boolean>(false);
+  const [invalidLogin, invalidateLogin] = React.useState<boolean>(false); // Possbily change this?
 
+  // Sign in function with email and password
   const onHandleSubmit = async () => {
+    Keyboard.dismiss();
     setAuthResponse(await appSignIn(email, password));
+  };
+
+  // Listens for the response from the sign in function
+  useEffect(() => {
     if (authResponse?.user) {
       router.replace("(home)/chatchannel");
     } else if (authResponse?.error) {
       console.log(authResponse.error);
       invalidateLogin(true);
     }
-  };
+  }, [authResponse])
 
   useEffect(() => {
     setEmail(inputEmail?.toString() || ""); // On load of the page, set the email to the inputEmail if they entered it!
@@ -76,7 +82,10 @@ const LoginScreen = () => {
         </KeyboardAvoidingView>
 
         <View style={styles.error_container}>
-          <AuthenticationErrorMessage response={authResponse} onPress={() => setAuthResponse(undefined)} />
+          <AuthenticationErrorMessage response={authResponse} onPress={() => {
+            setAuthResponse(undefined)
+            invalidateLogin(false)
+            }} />
         </View>
 
       </View>

client/src/configs/firebaseConfig.ts

@@ -6,10 +6,10 @@ import {API_KEY, AUTH_DOMAIN, PROJECT_ID, STORAGE_BUCKET, MESSAGING_SENDER_ID, A
 const firebaseConfig = {
   apiKey: API_KEY || "Mock-Key",
   authDomain: AUTH_DOMAIN,
-  projectId: PROJECT_ID,
-  storageBucket: STORAGE_BUCKET,
-  messagingSenderId: MESSAGING_SENDER_ID,
-  appId: APP_ID,
+  // projectId: PROJECT_ID,
+  // storageBucket: STORAGE_BUCKET,
+  // messagingSenderId: MESSAGING_SENDER_ID,
+  // appId: APP_ID,
 };
 
 let app;

client/src/contexts/LocationContext.tsx

@@ -17,9 +17,9 @@ const LocationContext = createContext<LocationContextProps | null>(null);
 
 const getLocation = async () => {
   return await Location.getCurrentPositionAsync({
-    accuracy: Location.Accuracy.Balanced
+    accuracy: Location.Accuracy.Balanced,
   }); // Change accuracy while testing. Could become .env variable.
-}
+};
 
 export const useLocation = () => {
   return useContext(LocationContext);
@@ -66,13 +66,13 @@ export const LocationProvider = ({
         } catch (error) {
           console.error("Error fetching location:", error);
         }
-      }, Number(LOCATION_REFRESH_RATE)); // Send location every few seconds
+      }, Number(LOCATION_REFRESH_RATE)); // Fetch location every 3 seconds
 
       // Cleanup function to clear interval when component unmounts
       return () => clearInterval(interval);
     })();
 
-    return () => console.log("Location dismounted");
+    return () => console.log("[LOG]: Cleaning up location useEffect");
 
   }, []);
 

client/src/contexts/SocketContext.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useContext, useEffect, useState } from "react";
 import { io, Socket } from "socket.io-client";
 import { useLocation } from "./LocationContext";
 import { EXPO_IP } from "@env";
+import { AuthStore } from "../services/store";
 
 const SocketContext = createContext<Socket | null>(null);
 
@@ -11,27 +12,56 @@ export const useSocket = () => {
 
 export const SocketProvider = ({ children }: { children: React.ReactNode }) => {
   const [socket, setSocket] = useState<Socket | null>(null);
+  const [mounted, setMounted] = useState(false);
   const locationContext = useLocation();
 
+
   useEffect(() => {
-    let isMounted = true;
+    const getToken = async () => {
+      const token = await AuthStore.getRawState().userAuthInfo?.getIdToken();
+      console.log("Token:", token);
+      return token;
+    }
+
+    const initializeSocket = async () => {
+      const token = await getToken();
+      const socketIo = io(`http://${EXPO_IP}:8080`, {
+        auth: {
+          token: token,
+        }
+      });
 
-    const socketIo = io(`http://${EXPO_IP}:8080`); // Hardcoded IP address
+      setSocket(socketIo);
+      setMounted(true);
+    }
 
-    socketIo.on("connect", () => {
-      if (isMounted) {
-        setSocket(socketIo);
-      } else {
-        console.log("Socket not mounted");
-      }
-    });
 
+    if (!mounted) {
+      initializeSocket();
+    }
     return () => {
-      isMounted = false;
-      socket?.disconnect();
+      console.log("[LOG]: Cleaning up intializeSocket useEffect");
     };
   }, []);
 
+  // Listen to the socket state and run once the socket is set!
+  useEffect(() => {
+
+    if (!socket) return;
+
+    socket.on("connect", () => {
+      console.log("Connected to server");
+      }
+    );
+
+    return () => {
+      console.log("[LOG]: Cleaning up sockets and mounted state.");
+      socket.disconnect();
+      setSocket(null);
+      setMounted(false);
+    }
+  }, [socket]);
+
   useEffect(() => {
     // TODO: Refactor this useEffect into a different file (service?) outside of the context, as it is not part of the purpose of a context.
     if (

client/src/services/store.ts

@@ -32,7 +32,6 @@ export const appSignIn = async (email: string, password: string) => {
             store.userAuthInfo = response?.user;
             store.isLoggedin = response?.user ? true : false;
         });
-
         return { user: auth.currentUser };
     } catch (e) {
         return { error: e };

server/.gitignore

@@ -132,6 +132,9 @@ dist
 # Build files
 build
 
+# Private Key JSON
+./private_key/*
+
 # Other
 .env
 build/