I've made a way for a user to create a username/password, and I think I've figured out how to make them log in. Here is the code:

//Services tab
app.get('/log-in', function(req, res) {
    console.log("Logged in")

    var password = req.query.password;
    var email = req.query.email;


    connection.query("SELECT user_id from user WHERE password = ?  AND email = ?;", 
[password, email], function(err, rows) {
        if(err) {
            return res.status(201).send(JSON.stringify({msg: "Error: "   err}));
        } else {
            if(rows.length > 0) { 
                return res.status(201).send(JSON.stringify({msg: "SUCCESS! Your user ID 
is: ", user:rows[0].user_id}))
            } else {

              return res.status(201).send(JSON.stringify({msg: "Error: Incorrect 
username or password. "}));


            }


//Javascript for Signing in

$('#Sign-In').click(function() {

var password = $('#userpass').val();
var email = $('#usersign').val();



console.log('Before json');

var jsonString = {password: password, email: email};

$.ajax({
    
    url: 'http://localhost:5000'   "/log-in",
    type:"get",
    data: jsonString,
    success: function(response){
        var test1 = "";
        alert(response);

        var data = JSON.parse(response);
        if(data.msg === "SUCCESS! Your user ID is: "){
            console.log(data.user)
            createUserTable(data.user);
            getElementById("Sign-in");    
        } else {
            console.log(data.msg);
        }
    },
    
    error: function(err) {
        var test2 = "";
        alert(err);
    }
});
})
function getElementById() {
location.href = "systemlayout";
}

function createUserTable(data) { 
var tableHTML = " ";
console.log("Test");
for(var i=0; i < data.length; i  ){
    tableHTML  = "<tr>";
    tableHTML  = "<td>"   data[i].user_id   "</td>";
    tableHTML  = "<td>"   data[i].password   "</td>"
    tableHTML  = "</tr>";
}

$('#userContainer').html(tableHTML);


}

Here is my page after I attempt to sign in with a correct username/password

And here is the page where I redirect signed in users.

My question is, how do I display that a user is signed in? Does it have to do with the "createUserTable" I made in the sign in Javascript, or is that wrong? How do I make it so the user can sign out? And finally, is the code I posted for signing in OK? I know this is a long question, but if anyone could help me out, I'd greatly appreciate it, as I've been stuck on this for a while.

CodePudding user response：

I believe you are looking for an authentication logic implementation.

It seems like you use express for backend and render the frontend in the backend server.

createUserTable only creates the visual form for login, it has nothing to do with the authentication system.

If you simply want to display a signed-in page after pressing sign in button for mocking, then in the backend GET /log-in endpoint, after where you authenticate the user, redirect user to the signed-in page or the corresponding html string.

If you are implementing a stateful app that the backend persistently stores the user session status (ie the system knows whether a user signs in), you'll have to store information like the logged in time, expiry date, ip address etc in a database, and send a cookie token to the frontend so that user can request service (eg sign out) with the token, depending on the security and performance requirements.

I'd suggest you to refer to some tutorials with the tools you are using for a quick beginner implementation. Here's one from Jason Watmore blog