User authentication without back-end

Question

I have a simple Backbone.js app with User model with different roles and I use json-server to emulate some backend basics. I need to make a basic authentication -- i.e. I need my User to be able to login and save his session somewhere (for that he wouldn't need to sign in each time he refreshes his browser). I've got a db.json file where I already have some users:

{
    "users": [
        {
            "login": "admin",
            "password": "password",
            "role": "admin",
            "id": 1
        }
    ]
}

and here is my User model:

var User = Backbone.Model.extend({
    defaults: {
        login: "",
        password: "",
        role: ""
    },
    // Updated
    url: function () {
        return "http://localhost:3000/users?login=" + 
                   this.attributes.login + "&password=" + this.attributes.password;
    }
});

I don't get quite good how could I manage authentication (i.e. entering login and password in form and storing the user session without proper backend). I thought about making a token field in my User model and filling in in each time user signs in and saving it in cookies, but I don't get how could I do that either way. I would be very grateful if someone could help me with this task.

ADDDED This is my login function in my view:

signIn: function () {
    var login = $('#js-login').val();
    var password = $('#js-password').val();

    if (login && password) {
        var currentUser = new User({
            login: login,
            password: password
        });
        currentUser.fetch({
            success: function () {
                console.log(currentUser.toJSON());
            },
            error: function (err) {
                console.log(err);
            }
        });
    }
}

But instead of finding a user from my json-server it just creates a new user with all empty attributes except of values of #js-login and #js-password input fields

ADDED I guess I should find my users by the query in url above in my collection, but I don't actually get how I would manage that

Repo with my project

Answer 1

This is simplified flow for your app:

• Each time user open your website, check his cookies.

  • If cookies contain user info (saved username, password), check match with the info in your DB. If matched, go to home page. Otherwise, clear cookies, go to login page

  • If cookies not contain user info, go to login page

• In login page, after user success logged in, save user info to cookies for next time check.

You can use some mechanism to encode user info (tokens, encryption...) to secure info stored in cookies/sessions. But store authentication DB in client is really weak security point. Sample code below:

Model:

var User = Backbone.Model.extend({
    url: function () {
        return "users?login" + this.attributes.login + "&password=" + this.attributes.password;
    },

    isAdmin: function () {
        return (this.get("role") == "admin");
    }
});

In your view:

// Load username password from cookie (just simple example)
var username = $.cookie("username"),
    password = $.cookie("password");

if (username && password) {
    var userModel = new User({
        login: username,
        password: password
    });
    userModel.fetch({
        success: function () {
            if (userModel.isAdmin) {
                // e.g. go to admin page
            } else {
                // e.g. go to normal user page
            }

            // Save to cookie/session here
        },
        error: function () {
            // Go to login page
        }
    });
} else {
    // Go to login page
}

About cookie, you can refer How do I set/unset cookie with jQuery?

About getting username/password input form, you can just use simple jquery selector (very easy to google for it, e.g. https://www.formget.com/jquery-login-form/)