React & Express: app.use() routes not working with socket.io - reactjs

Question

React Beginner Here. I'm trying to connect an existing react project and socket.io but now I can't access the routes with app.use(). I can see the console logs of the connections and disconnections but when I login with '/login', It doesn't run. Front end runs at 3000, Server at 9000
Edit: It does run because I receive a token which is sent at the end of it. However I get a status 404 Cannot POST /login.
Socket.js
const express = require('express')
const router = express.Router()
const http = require('http')
const cors = require('cors')
const server = http.createServer(router)
router.use(cors())
const {Server} = require("socket.io")
const io = new Server(server, {
cors: {
origin: 'http://localhost:3000',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
}
})
io.on('connection', (socket) => {
console.log('a user connected')
socket.on('disconnect', () => {
console.log('user disconnected', socket.id)
})
socket.on('chat message', (msg) => {
console.log('message: ' + msg)
io.emit('chat message', msg)
})
})
module.exports = {server}
Server.js
const express = require('express')
const app = express()
const {server} = require('./socket/socket')
const cors = require('cors')
app.use(cors({
origin: ['http://localhost:3000', 'http://localhost:9000', 'http://localhost:3001'],
credentials: true,
}))
app.use(express.json())
app.use(express.urlencoded({extended: true}))
const login = require('./routes/login')
const signup = require('./routes/verify/signup')
const home = require('./routes/home')
const checkRefreshToken = require('./routes/_checkRT')
const logout = require('./routes/_logout')[![enter image description here][1]][1]
const verify = require('./routes/verify/_verify')
app.use('/login', login)
app.use('/signup', signup)
app.use('/', home)
app.use('/check_refresh_token', checkRefreshToken)
app.use('/logout', logout)
app.use('/verification', verify)
const PORT = process.env.PORT || 9000
server.listen(PORT, () => {
console.log(`Listening on http://localhost:${PORT}`)
})
front end messages.jsx
import React from 'react'
import Navbar from '../../components/navbar/navbar'
import io from 'socket.io-client'
const socket = io.connect('http://localhost:9000/')
const Messages = () => {
return (
<div>
<Navbar />
</div>
)
}
export default Messages
Login.js
require('dotenv').config()
const express = require('express')
const router = express.Router()
const jwt = require('jsonwebtoken')
const cors = require('cors')
const bcrypt = require('bcrypt')
const mysql = require('mysql')
const connection = mysql.createConnection({
host: process.env.DB_HOST,
user: process.env.DB_USER,
password: process.env.DB_PASSWORD,
database: process.env.DB_DATABASE
})
// middleware
router.use(cors({
origin: ['http://localhost:3000', 'http://localhost:9000', 'http://localhost:3001'],
credentials: true,
}))
router.use(express.json())
router.use(express.urlencoded({extended: true}))
/**
* Flow of the code:
* 1. Check if email exists in the database
* 2. If it does, check if the password matches
* 3. If it does, generate an access token
* 4. Then generate a refresh token
* 5. Then send the access token and refresh token to the client
*/
router.post('/', (req, res) =>
{
// Even these doesn't run
// console.log("HERE");
// res.send("HELLO")
const { email, password } = req.body
function getInput() {
return new Promise((resolve, reject) => {
let sql = `
SELECT * FROM account_table
LEFT JOIN section_table
ON account_table.account_section_id = section_table.section_id
WHERE account_email = ?
;`
connection.query(sql, [email], (err, results) => {
if (err) return reject({status: 500, message: 'Internal server error'})
else if (results.length === 0) return reject({status: 401, message: 'Invalid email or password'})
return resolve(results)
})
})
}
function checkPassword(input) {
return new Promise((resolve, reject) => {
bcrypt.compare(password, input[0].account_password, (err, result) => {
if (err) return reject({status: 500, message: 'Internal server error'})
else if (!result) return reject({status: 401, message: 'Invalid email or password'})
return resolve(input)
})
})
}
function generateAccess(result) {
return new Promise((resolve, reject) => {
const userAccessToken = {
user_id: result[0].account_id,
user_section_id: result[0].account_section_id
}
jwt.sign(userAccessToken, process.env.ACCESS_TOKEN_SECRET, {expiresIn: '15m'}, (err, token) => {
if (err) return reject({status: 500, message: 'Internal server error'})
return resolve(token)
})
})
}
function generateRefresh(result) {
return new Promise((resolve, reject) => {
const userAccessToken = {
user_id: result[0].account_id,
user_section_id: result[0].account_section_id
}
jwt.sign({userAccessToken}, process.env.REFRESH_TOKEN_SECRET, (err, token) => {
if (err) return reject({status: 500, message: 'Internal server error'})
return resolve(token)
})
})
}
function insertSend(access, refresh, result) {
return new Promise((resolve, reject) => {
const userInfo = {
user_f_name: result[0].account_first_name,
user_l_name: result[0].account_last_name,
section_grade: result[0].section_grade,
section_strand: result[0].section_strand,
section_name: result[0].section_name,
}
let expiryDate = new Date(Date.now())
expiryDate.setDate(expiryDate.getDate() + 7) // 7 days
let sql = `INSERT INTO refresh_token_table (token_content, token_owner_id, token_timestamp) VALUES (?, ?, ?)`
connection.query(sql, [refresh, result[0].account_id, expiryDate], (err, results) => {
if (err) return reject({status: 500, message: 'Internal server error'})
return resolve(
res.cookie("hello_world_cookie69", refresh, {
origin: "http://localhost:9000",
expires: expiryDate,
httpOnly: true,
secure: true,
sameSite: "strict",
}).json({userInfo, access})
)
})
})
}
try {
let vEmail = await getInput()
let vData = await checkPassword(vEmail)
let accessToken = await generateAccess(vData)
let refreshToken = await generateRefresh(vData)
let send = await insertSend(accessToken, refreshToken, vData)
} catch (err) {
return res.status(err.status).json({ message: err.message })
}
})
module.exports = router