Skip to content

Commit

Permalink
Firebase Admin Refactor + JWT feature (#180)
Browse files Browse the repository at this point in the history 
* Set up Firebase-Admin in adminInit.ts (#155)

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* added passport

* started auth + admin sdk

* removed passport

* added private key to gitignore

* Delete server/private_keys/private.json

---------

Co-authored-by: AlexanderWangY <[email protected]>

* Refactored most of the actions (#156)

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* added passport

* started auth + admin sdk

* removed passport

* added private key to gitignore

* Delete server/private_keys/private.json

* initializing firestore in admin

* finished most of action refactoring

* Made error case for email in use display correctly in front end (#158)

* changed getConnectedUsers to admin

* migrated to firebase-admin

---------

Co-authored-by: AlexanderWangY <[email protected]>
Co-authored-by: Mohammed Ali <[email protected]>

* Added JWT on top of Firebase-Admin (#178)

* Made error case for email in use display correctly in front end

* Made error case for email in use display correctly in front end (#158)

* Cleaned up useEffect function #159

* Added testing pipeline (#175)

* Create main.yml

* Update main.yml

* Update _layout.tsx

* Update main.yml

* Update socketio.test.ts

* Update socketio.test.ts

* Update _layout.tsx

* User Context and User Type created and wrapped chat screen (#131)

* added user context

* Added userID and displayName

* moved user and display name generation into UserProvider

* Improved UserContext implementation

Amongst these changes, the user type on the frontend has been edited in order
to prevent hidden functions that would pull information into the UserContext
from other contexts. The message type was also modified to keep a new author
section with a displayName attribute. An issue should be created for a socket
API endpoint for grabbing the displayName, and one to set it in a connectedUser
document in the databse.

* updated package lock

---------

Co-authored-by: h1divp <[email protected]>

* Set up Firebase-Admin in adminInit.ts (#155)

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* added passport

* started auth + admin sdk

* removed passport

* added private key to gitignore

* Delete server/private_keys/private.json

---------

Co-authored-by: AlexanderWangY <[email protected]>

* Refactored most of the actions (#156)

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* fixes pt2

* JWT WIP

* new branch + function fix

* small bug fixes

* added passport

* started auth + admin sdk

* removed passport

* added private key to gitignore

* Delete server/private_keys/private.json

* initializing firestore in admin

* finished most of action refactoring

* Made error case for email in use display correctly in front end (#158)

* changed getConnectedUsers to admin

* migrated to firebase-admin

---------

Co-authored-by: AlexanderWangY <[email protected]>
Co-authored-by: Mohammed Ali <[email protected]>

* added middleware

---------

Co-authored-by: Phantom0110 <[email protected]>
Co-authored-by: Mohammed Ali <[email protected]>
Co-authored-by: AaronGibson2 <[email protected]>
Co-authored-by: h1divp <[email protected]>
Co-authored-by: AlexanderWangY <[email protected]>

* Delete server/src/private_key/private.json

* Update main.yml

* Updated pipeline to reflect firebase-admin

* Update main.yml

* Update main.yml

* Create subdirectory before creating service account JSON (#187)

* Update socket tests (#185)

* Update socket tests

* Remove unused type

* Update comment in socketio.test.ts

---------

Co-authored-by: Phoenix <[email protected]>

* Create subdirectory before creating service account JSON

---------

Co-authored-by: Phoenix <[email protected]>

* made changes to collection name + socket test load testing

* Added socketIo.connect()

* Remade collection name changes

* updated location of firebase secrets, added comment about it in config_example.md

* renamed file to firebaseInit from adminInit

* Updated comment

---------

Co-authored-by: AlexanderWangY <[email protected]>
Co-authored-by: Mohammed Ali <[email protected]>
Co-authored-by: Phantom0110 <[email protected]>
Co-authored-by: AaronGibson2 <[email protected]>
Co-authored-by: h1divp <[email protected]>
Co-authored-by: Aadit Kamat <[email protected]>
  • Loading branch information
@AlexanderWangY @Phantom0110
@AaronGibson2 @h1divp @aaditkamat
7 people authored Feb 29, 2024
1 parent 3f662e7 commit d2a2241
Show file tree
Hide file tree
Showing 19 changed files with 1,329 additions and 641 deletions.
11 changes: 9 additions & 2 deletions .github/workflows/main.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/
Expand Down
70 changes: 38 additions & 32 deletions client/src/components/Auth/AuthenticationResponse.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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) => {
Expand All @@ -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",
Expand All @@ -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,
},
});

15 changes: 12 additions & 3 deletions client/src/components/Auth/LoginScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand Down Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions client/src/configs/firebaseConfig.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 4 additions & 4 deletions client/src/contexts/LocationContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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");

}, []);

Expand Down
53 changes: 42 additions & 11 deletions client/src/contexts/SocketContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -11,27 +12,57 @@ 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
socketIo.connect()
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 (
Expand Down
1 change: 0 additions & 1 deletion client/src/services/store.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
Expand Down
3 changes: 3 additions & 0 deletions server/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,9 @@ dist
# Build files
build

# Private Key JSON
./private_key/*

# Other
.env
build/
11 changes: 4 additions & 7 deletions server/config_example.md
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
# dotenv config file (copy config to a new file named `.env`)
# **Do not delete this file**

# Firebase config
API_KEY = place_your_apiKey_here
AUTH_DOMAIN = place_your_authDomain_here
PROJECT_ID = place_your_projectId_here
STORAGE_BUCKET = place_your_storageBucket_here
MESSAGING_SENDER_ID = place_your_messagingSenderId_here
APP_ID = place_your_appId_here
# To configure firebase:
# - Go to project settings > service accounts,
# - Make a new private key for the Node.js SDK
# - Paste all contents into ".firebase-secrets.json" in server/

# Location
message_outreach_radius = 100 # meters
Expand Down
Loading

0 comments on commit d2a2241

Please sign in to comment.