[Office Hours] PRISMA: Authentication with JWT token

[EvelynBunnyDev]

Related Discussion

@dhruvna1k and I are working on firebase authentication with the chat interface. At this stage, instead of using the user credentials (username + password) for authentication, we are replacing this credential with a JWT token. Before this, we have successfully implemented a login-page, which will pop up if the user is not authenticated while attempting to access the chat interface. Successful login will generate a JWT token, which is stored in the browser cache.
userCredential.user.getIdToken().then((token) => { localStorage.setItem('token', token); // Store the token in local storage });

Our workflow is as below:

1. iOS needs to generate JWT token (so not just the web login page within the chat interface).
2. Load web view, pass in JWT as a URL parameter to the backend.
3. Frontend authorizes token (completed tentatively. Would like a mentor to review the code)
4. Frontend establishes a secure connection with the backend (we think we may have done this in dataFetching.ts, but the full process might be incomplete. Need further elaboration here as well)

1 and 2 are implemented in the CS342/Prisma repo
3 and 4 are in Stanford HCI/Prisma, updated in matt's cloud function branch.

@PSchmiedmayer As of Feb. 29 2024, we made changes to the Swift code with extensive modifications to ChatView, and have therefore completed all steps in the workflow. We created key functions in ChatView, including: generateJWT, sendTokenToBackend, and signInWithFirebase. Successful implementation is reflected by passing a JWT token from Swift to the web chat interface, which connects to the python backend and prints "user successfully authenticated via JWT". Our current impediment is how to test this implementation: Ideally, we would need guidance from a mentor to connect code from these two different repos (web and swift) [Realistically, which codebase shall we run? Shall we start the process in both repos or to merge them into one big repo and run?], which marks successful flow by printing the JWT token along the steps, and ultimately printing that the user has successfully logged in via JWT.

Additional question: Shall we substitute the user-password approach in the visualization code (web repo) with JWT authorization?

--Outdated (start)--
Here are our current questions:

1. Currently when rendering the chat interface, there are instances where localhost skips the login page. Would like some guidance on how to fix this issue
2. For our Step 2: which files do we need to modify for this step?
3. For Step 1: getting a general overview of how to implement the JWT token generation would be great. Does it go in the CS342/Prisma repo, or the stanfordhci/prisma repo?
4. For Step 3, we understand how to read the token from firebase and how to store it in browser cache. Just want to make sure everything is up to par and that we aren't missing anything.
   --Outdated (end)--

Reproduction

Given that there isn't a specific bug in our instance, we're gonna share our code during office hour. You can access our changes here:

1. Login page & conditional render of chat interface: https://github.com/StanfordHCI/prisma/tree/matt/cloud-fn-to-backend
2. JWT authentication: https://github.com/StanfordHCI/prisma/pull/27

Additional context

No response

Code of Conduct

• I agree to follow this course's Code of Conduct and Contributing Guidelines