[Bug] Axios XHR/cors error 404 on login

[gbowne1]

Describe the bug

Maybe it's just me but I am getting

XHR POST http://localhost:3000/login in the browser console

with a 404 Not Found ERR_BAD_REQUEST in the Axios POST json it returns.

Object { stack: "AxiosError@http://localhost:3000/static/js/bundle.js:84832:18\nsettle@http://localhost:3000/static/js/bundle.js:85485:12\nonloadend@http://localhost:3000/static/js/bundle.js:84147:66\nEventHandlerNonNull*dispatchXhrRequest@http://localhost:3000/static/js/bundle.js:84160:7\n./node_modules/axios/lib/adapters/xhr.js/__WEBPACK_DEFAULT_EXPORT__<@http://localhost:3000/static/js/bundle.js:84093:10\ndispatchRequest@http://localhost:3000/static/js/bundle.js:85313:10\n_request@http://localhost:3000/static/js/bundle.js:84749:77\nrequest@http://localhost:3000/static/js/bundle.js:84644:25\nhttpMethod@http://localhost:3000/static/js/bundle.js:84783:19\nwrap@http://localhost:3000/static/js/bundle.js:85877:15\nlogin@http://localhost:3000/static/js/bundle.js:1763:69\nhandleSubmit@http://localhost:3000/static/js/bundle.js:2267:13\ncallCallback@http://localhost:3000/static/js/bundle.js:44340:18\ninvokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:44384:20\ninvokeGuardedCallback@http://localhost:3000/static/js/bundle.js:44441:35\ninvokeGuardedCallbackAndCatchFirstError@http://localhost:3000/static/js/bundle.js:44455:29\nexecuteDispatch@http://localhost:3000/static/js/bundle.js:48598:46\nprocessDispatchQueueItemsInOrder@http://localhost:3000/static/js/bundle.js:48624:26\nprocessDispatchQueue@http://localhost:3000/static/js/bundle.js:48635:41\ndispatchEventsForPlugins@http://localhost:3000/static/js/bundle.js:48644:27\n./node_modules/react-dom/cjs/react-dom.development.js/dispatchEventForPluginEventSystem/<@http://localhost:3000/static/js/bundle.js:48804:16\nbatchedUpdates$1@http://localhost:3000/static/js/bundle.js:63188:16\nbatchedUpdates@http://localhost:3000/static/js/bundle.js:44188:16\ndispatchEventForPluginEventSystem@http://localhost:3000/static/js/bundle.js:48803:21\ndispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay@http://localhost:3000/static/js/bundle.js:46310:42\ndispatchEvent@http://localhost:3000/static/js/bundle.js:46304:88\ndispatchDiscreteEvent@http://localhost:3000/static/js/bundle.js:46281:22\nEventListener.handleEvent*addEventBubbleListener@http://localhost:3000/static/js/bundle.js:46503:14\naddTrappedEventListener@http://localhost:3000/static/js/bundle.js:48726:33\nlistenToNativeEvent@http://localhost:3000/static/js/bundle.js:48670:30\n./node_modules/react-dom/cjs/react-dom.development.js/listenToAllSupportedEvents/<@http://localhost:3000/static/js/bundle.js:48681:34\nlistenToAllSupportedEvents@http://localhost:3000/static/js/bundle.js:48676:25\ncreateRoot@http://localhost:3000/static/js/bundle.js:65949:33\ncreateRoot$1@http://localhost:3000/static/js/bundle.js:66295:14\n./node_modules/react-dom/client.js/exports.createRoot@http://localhost:3000/static/js/bundle.js:66371:16\n./src/index.js@http://localhost:3000/static/js/bundle.js:1856:60\noptions.factory@http://localhost:3000/static/js/bundle.js:89367:31\n__webpack_require__@http://localhost:3000/static/js/bundle.js:88766:32\n@http://localhost:3000/static/js/bundle.js:90013:56\n@http://localhost:3000/static/js/bundle.js:90015:12\n", message: "Request failed with status code 404", name: "AxiosError", code: "ERR_BAD_REQUEST", config: {…}, request: XMLHttpRequest, response: {…} }
localhost:3000:13024:25

To Reproduce Steps to reproduce the behavior:

1. React Development Server running the app on localhost:3000 using npm start
2. mongod running the MongoDB server on localhost:27017
3. connected to twitchbot database/collection
4. mongosh MongoDB shell/client using twtichbot database
5. nodejs running both server.js and app.js in separate terminals in IDE (VSCode on Debian 12) by using npm start in /src/server or by running node app.js and node server.js in separate IDE terminal sessions (VSCode) while in /src/server.

node app.js responds with:

$ node app.js
[13:17] info: Connecting to irc-ws.chat.twitch.tv on port 443..
[13:17] info: Sending authentication to server..
[13:17] error: Invalid NICK.
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "Invalid NICK.".] {
  code: 'ERR_UNHANDLED_REJECTION'
}

Node.js v20.5.0

node server.js responds with:

$ node server.js
server running 
Connected to MongoDB

6. created some test credentials using a script I wrote for another project to insert a user into the database's User collection.
7. ensured that the inserted user exists in the users collection by `db.users.findOne(); returned the id correct, etc.

Firefox linux x64/amd64 latest browser console shows a Axios error 404 and bad request when navigated to the localhost:3000. Did not check Chrome. FF network tab shows four (4) 404's for the login POST request. Have my test users credentials typed into the

Expected behavior Not really sure.

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Debian 12 x64/amd64
• Browser [Debian 12 Firefox x64/amd64]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

[gbowne1]

I also noticed that while I had not entered my test users password etc into the login panel and clicked login.. I was not able to navigate manually away from localhost route.

Once I clicked login button after entering my test users details.. was able to manually enter /login after localhost and the app displayed but now not able to use the app and Login panel still displays.

Consider making the Login panel a separate component

@Sky-De @jarmentor @Amrani-Farouk-Hossam-Eddine

[gbowne1]

It also says

Source map error: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Resource URL: null
Source Map URL: react_devtools_backend_compact.js.map

somewhere I also saw:

No routes matched location "/login" history.ts:501

[jarmentor]

I think this is because the login component is hitting the client on port 3000 and not [the server] on 3001. I'll look into this.