I’m making an application using react, node and firebase and am trying to connect my backend to my front end. I have developed out backend routes and api but when I try to make requests from the front end all of them get stuck on pending. I’m not sure what the problem is as I have cors installed, a proxy set up, and the routing is fine. I’m assuming it has something to do with the asynchronicity of it but I’m not sure the problem. I will provide the code down below for the functions.

The front end is running on port 3000 while the backend is on port 8080. The package.json has a proxy set up for port 8080. Cors is also set up properly on the server. Here are some snippets of different files and their contents.

React component:

const loginUser = async (email, password) => {
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      const idToken = await userCredential.user.getIdToken();
      return idToken;
    } catch (error) {
      console.error('Error logging in:', error);
      throw error;
    }
  };

  const submitLogin = async (email, password) => {
    try {
      const idToken = await loginUser(email, password);
      console.log('ID Token:', idToken);
      const response = await fetch('/api/user/login', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ idToken }),
      });
      console.log('Response:', response);
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      const data = await response.json();
      console.log('Login successful:', data);
    } catch (error) {
      console.error('Error submitting login:', error);
      setError(error.message);
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    await submitLogin(email, password);
  };

Server:

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const cors = require('cors');

const app = express();

// Middleware
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.json());

// Import routes
const userRoute = require('./routes/userRoute');

// Serve static files from the "public" directory
app.use(express.static(path.join(__dirname, '../public')));

// User routes
app.use('/api/user', userRoute);

userRoute:

// routes/userRoutes.js
const express = require('express');
const userController = require('../controllers/userController');

const router = express.Router();

// Create user route
router.post('/signup', userController.createUser, (req, res) => {
  res.status(200).json( {message: 'User created successfully'} );
})

// Delete user route
router.delete('/delete/:uid', userController.deleteUser, (req, res) => {
  res.status(200).json( {message: 'User deleted successfully'} );
})

// Login route
router.post('/login', userController.loginUser)
 

module.exports = router;

package.json

{
  "name": "someonetocheckout-website",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.5.2",
    "@headlessui/react": "^2.1.2",
    "@stripe/react-stripe-js": "^2.7.3",
    "@stripe/stripe-js": "^4.1.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "firebase": "^10.12.4",
    "firebase-admin": "^12.2.0",
    "nodemon": "^3.1.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.24.1",
    "react-scripts": "^5.0.1",
    "stripe": "^16.2.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start-backend": "nodemon backend/server.js",
    "start-frontend": "react-scripts start",
    "start": "concurrently "npm run start-backend" "npm run start-frontend"",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.39",
    "prettier": "^3.3.3",
    "tailwind": "^4.0.0"
  },
  "proxy": "http://localhost:8080"
}

userController middleware

const { auth, db } = require('../adminConfig');  // Use Firebase Admin SDK
const admin = require('firebase-admin');

const userController = {};

// Login user
userController.loginUser = async (req, res) => {
  const { idToken } = req.body;

  if (!idToken) {
    return res.status(400).json({ message: 'Missing ID token' });
  }

  try {
    // Verify the ID token
    console.log('i am here in the log in function!!!')
    const decodedToken = await auth.verifyIdToken(idToken);
    const uid = decodedToken.uid;

    // Fetch additional user information from Firestore
    const userDoc = await db.collection('users').doc(uid).get();
    if (!userDoc.exists) {
      return res.status(404).json({ message: 'User not found in Firestore' });
    }

    const userData = userDoc.data();
    res.status(200).json({ message: 'Login successful', user: userData });
  } catch (error) {
    console.error('Error verifying ID token:', error);
    res.status(401).json({ message: 'Unauthorized', error: error.message });
  }
};

module.exports = userController;