neu-cs4530 / spring24-project-team-208

spring24-project-team-208 created by GitHub Classroom
https://coveytownbattleship.onrender.com/
BSD 3-Clause "New" or "Revised" License
2 stars 0 forks source link

Implement user sign up, login, and authenticated join game #36

Closed mattcasey02 closed 6 months ago

mattcasey02 commented 6 months ago

For our user authentication we use firebase. It handles all the messy parts of the authentication (storing passwords etc.). Because we want usernames to be unique and tied to a firebase account, we need the backend to be able to authenticate the identity of the user when they go to join a game. This way, the backend can pull the username associated with the account, and send that to the joinGame function.

For account creation there is a REST API set up using tsoa that allows the frontend to send over an email, password, and username. Firebase admin is used to create an account with this info. Because firebase does not have a log in with username feature, but we want usernames to be unique, we use the username as the uid for the account. If some other account already has this uid, firebase will not allow the account to be made. Errors are handled and sent back as 422 HTTP errors.

The frontend has a basic login layout (to be improved later). When a user clicks sign up, we send an account creation request to the backend, and then log the user in using the client side firebase. When a user clocks log in, we just log the user in using the client side firebase. If any errors are sent by the API or firebase, they are handled and toasts pop up on screen.

When the user is logged in successfully, firebase gives us a User object that can be used to get an auth token. We keep a context called UserControllerContext that allows us to access this user in child components. When we set a UserController, we change the rendering to be the original screen where you select a town to join.

Finally, instead of sending a username to the towns API to join a game, we send a firebase auth token (which we get from the UserController.user). The backend verifies the token using firebase admin, gets the uid of the verified user, and joins a town with that as the username. If there is any error in authenticating, it is handled and sent back as a 401 HTTP error. This is then handled in the frontend and displayed as a toast.

mattcasey02 commented 6 months ago

It was an issue I was having with getting the environment variables set up properly. I fixed it now.

However, now some of the tests are failing because I changed the join town method to take in an auth token and not a username. I will have to modify these tests to get everything in order.

alinachiu commented 6 months ago

Looks great so far! I updated the branch with a potential fix for the switch from username to auth token to address the CI failure. A user mock still needs to be added to get the remaining four tests in TownSelection.test.tsx and the non-null assertion need to be removed from useUserController in the final PR.