Im making a simple login system using Express, React and passport. Axios executes submission and successfully communicates with express and User is succesfully serialized into session. However, the code isn't executed in .then() part of Axios call. I get no error, it just doesn't do anything
client/components/Login.js
import React from "react";
import '../css/components.css';
import { useNavigate } from 'react-router-dom'
import {useEffect,useState} from "react";
import Axios from "axios";
const styles = {
h2Login: {
textAlign: "center",
fontSize: "25px"
},
divLogin: {
textAlign:"center",
paddingTop: "15px"
},
loginA: {
fontSize: "15px"
},
margins: {
marginTop: "5px"
}
}
function Login(){
const navigate = useNavigate();
const [loginUsername, setLoginUsername] = useState("")
const [loginPassword, setLoginPassword] = useState("")
const login = () => {
Axios({
method: "POST",
data: {
username: loginUsername,
password: loginPassword,
},
withCredentials: true,
url: "http://localhost:4000/login",
}).then((res) => { // It's like this isn't even called
console.log(res);
if(res.status === 200){
console.log("Successfully logged in");
navigate('/');
}else if(res.status === 500){
console.log("Failed to log in: " + res)
}
}
);
};
return(
<section className="justify-content-center" >
<div className="container">
<div className="row justify-content-center">
<div className="col-lg-8">
<div>
<div className="form-input login-form">
<h2 style={styles.h2Login}>Login Form</h2>
<form className="login-form">
<div className="form-group">
<input className="form-control form-control-md input-thingy" type="text" placeholder="username" id="email"
onChange={(e) => setLoginUsername(e.target.value)}
/>
</div>
<div className="form-group ">
<input className="form-control input-thingy" type="password" placeholder="password" id="password"
onChange={(e) => setLoginPassword(e.target.value)}
/>
</div>
<button style={styles.margins} type="submit" className="btn btn-primary" onClick={login}>Login</button>
<div style={styles.divLogin}>
<a style={styles.loginA} className=""
>Don't
have an account?</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
)
}
export default Login;
client/app.js
import React, { useEffect, useState } from "react";
import Nav from "./components/Nav.js";
import {BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Login from "./components/Login.js"
import Axios from "axios";
function App() {
return (
<Router>
<div className="App">
<header>
<Nav/>
<Routes>
<Route path='/login' element={<Login/>} />
</Routes>
</header>
</div>
</Router>
);
}
export default App
server/server.js
if(process.env.NODE_ENV !== 'production') {require('dotenv').config();}
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const initializePassport = require('./passport-config');
const passport = require('passport');
const session = require('express-session');
const methodOverride = require('method-override');
const app = express();
const bcrypt = require('bcrypt')
//const cookieParser = require('cookie-parser');
//app.use(cookieParser({secret: process.env.COOKIE_SECRET}));
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// Cors
const whitelist = process.env.WHITELISTED_DOMAINS
? process.env.WHITELISTED_DOMAINS.split(",")
: []
const corsOptions = {
origin: function (origin, callback) {
if (!origin || whitelist.indexOf(origin) !== -1) {
callback(null, true)
} else {
callback(new Error("Not allowed by CORS"))
}
},
methods: ["GET", "POST", "PUT", "DELETE"],
credentials: true,
}
app.use(cors(corsOptions))
// knex & bookshelf
const knex = require('knex')({
client: "mysql",
connection: {
host: "localhost",
user: "dbuser",
password: "dbpass",
database: "testdb"
}
});
const bookshelf = require('bookshelf')(knex);
async function createBookshelfOf(tbl){
return bookshelf.Model.extend({
tableName: tbl,
idAttribute: "id"
});
}
async function insertInto(table, obj){
await knex(table).insert(obj)
.then(()=>console.log("INSERTED: " + obj + ", INTO table: " + table))
.catch((err)=>{console.log(err); throw err;})
}
// Passport
initializePassport(
passport,
async username=>{
try{
let bookshelfUser = await createBookshelfOf("Users");
return await new bookshelfUser().where("username", username).fetch().then((data)=>{
return data.attributes;
});
}
catch (e) {
console.log(e);
return null;
}},
async id=>{
try{
let bookshelfUser = await createBookshelfOf("Users");
return await new bookshelfUser().where("idUsers", id).fetch().then((data)=>{
return data.attributes;
});
}
catch (e) {
return null;
}});
// Don't know what it does, but somehow without it passport doesn't work so DON'T TOUCH IT
app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
/* Session*/
app.use(session({
secret : process.env.SESSION_SECRET,
resave: false,
saveUninitialized : false
}));
app.use(passport.initialize());
app.use(passport.session());
app.use(methodOverride('__method'));
// Authentication
app.post('/login', (req, res, next)=>{
passport.authenticate('local', {
successRedirect : '/',
failureRedirect : '/login'
}, (err, user, info)=>{
if(err){res.status(500).send(err); return;}
if(!user){
res.status(500).send("Could not fetch user");
return;
}
req.logIn(user, (err)=>{
if(err){return next(err)}
res.status(200).send(user);
});
})(req, res, next);
});
function checkNotAuthenticated(req, res, next) {
if (req.isAuthenticated()) {
return res.redirect('/');
}
next();
}
app.post("/register", checkNotAuthenticated, async(req, res) => {
try{
let Users = await createBookshelfOf("Users");
let users = await new Users().fetchAll()
for (let user of users.toJSON()){
if (user.username === req.body.username){
res.status(500).send("Username exists")
return
}
}
const hashedPassword = bcrypt.hash(req.body.password, 10);
let obj = [{
username: req.body.username,
name: "Test",
surname: "Test",
password: hashedPassword
}];
insertInto("Users", obj);
res.status(200).send("Successfully inserted data")
} catch (e) {
console.log(e.message)
res.status(500).send(e.message);
}
});
app.get('/user', (req, res)=>{
res.status(200).send(req.user);
})
// Server config
const PORT = 4000; // backend routing port
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}.`);
});
server/passport-config.js
const LocalStrategy = require('passport-local').Strategy;
const bcrypt = require('bcrypt');
function initialize(passport, getUserByUsername, getUserById) {
console.log("Passport initialized");
const authenticateUser = async (username, password, done) => {
const user = await getUserByUsername(username);
if (user == null) {
console.log("No user with that username");
return done(null, false, { message: 'No user with that username' });
}
try {
console.log(user);
await bcrypt.compare(password, user.password, (err, result)=>{
if (!result){
console.log("Password incorrect");
return done(null, false, { message: 'Password incorrect' });
}
if(result){
console.log("User logged in successfully: " + user.username);
return done(null, user);
}
});
} catch (e) {
console.log(e);
return done(e)
}
}
passport.use(new LocalStrategy({ usernameField: 'username' }, authenticateUser));
passport.serializeUser((user, done) => done(null, user.idUsers));
passport.deserializeUser(async(id, done) => {
return done(null, await getUserById(id));
})
}
module.exports = initialize