[Office Hours] PRISMA: Authentication with JWT, Swift to React Synchronization

[EvelynBunnyDev]

For Friday Mar 1 Office Hour @Supereg

Related Discussion

Refer to this for a general overview of what we are trying to implement for our chatbot authentication: https://github.com/orgs/CS342/discussions/78

Right now, we are running into an issue pulling all of the code in our React frontend, Python backend, and iOS app in Swift. We whiteboarded a workflow which we can show you in person.

One primary issue we have right now is that the localhost:3000 web server does not return a JSON response. Here's the error from the web console: login.tsx:42 Failed to obtain custom token: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON (login.tsx:42 is a print statement).

Additionally (and this could be interconnected with the previous issue), our ChatPanel does not render when we run the simulator in Xcode.
This is our login page from the React frontend that renders a login page and our chat page:

import React, { useState } from 'react';
import { getAuth, User, signInWithCustomToken } from "@firebase/auth";
// import { Response } from 'express'; 

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState<User | null>(null); // Add state to manage user

  const handleLogin = () => {
    fetch('http://localhost:3000', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        username: username,
        password: password
      })
    })
    .then(response => response.json())
    .then(data => {
      // Use the custom token to sign in
      const auth = getAuth();
      signInWithCustomToken(auth, data.token)
        .then((userCredential) => {
          console.log('userCredential:', userCredential);
          console.log('userCredential.user:', userCredential.user);
          userCredential.user.getIdToken().then((token) => {
            localStorage.setItem('token', token); // Store the token in local storage
            console.log("token:", userCredential.user.getIdToken());
          });
          // Continue with your user state update and other logic
          setUser(userCredential.user);
          console.log('Authentication successful:', userCredential.user);
        })
        .catch((error) => {
          console.error('Authentication failed:', error.message);
        });
    })
    .catch(error => {
      console.error('Failed to obtain custom token:', error);  // this is where the error message refers us to
    });    
  };

  return (
    <div className="container">
      <h2>Prisma Auth Test Login</h2>
      <input
        className="input"
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        className="input"
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button className="button" onClick={handleLogin}>Login</button> {/* Call handleLogin on button click */}

      <style jsx>{`
        .container {
          margin-top: 50px;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .input {
          margin: 10px 0;
          padding: 10px;
          border-radius: 5px;
          border: 1px solid #ccc;
        }
        .button {
          padding: 10px 20px;
          border-radius: 5px;
          border: none;
          background-color: #007bff;
          color: white;
          cursor: pointer;
        }
      `}</style>
    </div>
  );
};

export default LoginPage;

We think our error is here in our React code and not on the Swift side or the Python backend, but happy to share any and all files to find the root cause.

Reproduction

Web server error display:

Swift console error:

Simulator is always loading...

Additional context

No response

Code of Conduct

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