JQuery Mobile - User Login Best Practice

Question

I'm building a mobile interface with JQuery Mobile for an already existing web app which requires user authentication, and I cannot settle on the best approach for implementing a login process.

I'm not so concerned about the server side authentication, but rather how to implement it on the user side.

After some experimenting, it seems that the options are:

1. Standard form submit with POST\redirect:
   -Disable automatic ajax with data-ajax="false"
   -User submits, check credentials at server, then send redirect to app on success or back to login page on failure.

2. Ajax method with $.mobile.changePage
   -Send username/passwd via Ajax
   -Based on response, either add front page of app with $.mobile.changePage or display error message

3. Ajax method with window.location.replace
   -Similar to option 2, except use window.location.replace to add front page of app

4. Ajax method with POST; redirect only on failed login
   -Keep ajax enabled for form submissions.
   -On the server side, combine your user authentication function with the entry page of your app in such a way that it only executes if the form fields are set.
   -On successful login, return front page of the app.
   -On failed login, redirect back to the login page.
   -If the form values are not set, check if the user is properly logged in and then return the standard output page. If not logged in, redirect back to login.

Some considerations:
-It must use POST to avoid attaching login data to URL
-Maintaining correct back button functionality so that navigation is user friendly appears to be kind of tricky.
-I'd like to make the process flow as easily as possible with as few page reloads as possible

Any ideas?

EDIT:
I found a 4th method, which may be the best approach. It avoids the back button functionality issues resulting from the POST/redirect method. If the user authenticates on the first attempt, the smooth page transition is maintained the entire time. If not, the page transition flow will be continuously maintained after successful a login. Furthermore, all of JQM's built in error handling features remain available.

Answer 1

I know this question is more than a year old, but here are my two cents. What I did is a JQuery Mobile form that looks like:

<form method="PUT" action="api/auth" data-ajax="false">
    <label for="login_username">Username:</label><br>
    <input type="text" name="login_username" id="login_username" /><br>
    <label for="login_password">Password:</label><br>
    <input type="password" name="login_password" id="login_password" /><br>
    <button id="login_submit" type="submit" data-theme="a">Submit</button>
</form>

Then a function to intercept the "Submit" button click:

$(document).ready(function() {
    $("#login_submit").click(function(event) {
        event.preventDefault();
        var credentials = { type: 'EMAIL', username: $('#login_username').val(), password: $('#login_password').val() };
        $.ajax({
            type: "PUT",
            url: "api/auth",
            cache: false,
            data: JSON.stringify(credentials),
            contentType: "application/json; charset=utf-8",
            success: function(data) {
                //validate the response here, set variables... whatever needed
                    //and if credentials are valid, forward to the next page
                $.mobile.changePage($('#main_menu'));
                    //or show an error message
            },
            error: function() { // server couldn't be reached or other error }
        });
    });
});

Of course this should go over HTTPS. In my case, I am validating with a server side REST service. You can make it return 403 if the credentials are wrong, for example. Then, you forward using $.mobile.changePage() to a page within the same DOM or to another URL.

Answer 2

Basically that's according to the need.

Standard form submit( Point 1) is a very clear cut way, but if login is failed, need to reload the page so, multiple requests( one for login-check, another for page-load) are made & also, need to populate back input data.

Some advantages for AJAX r-

• If connection is closed or network failure, we can show proper error- keeping the page design intact. In case of standard submit- it will show connection error- in which point user may need to restart the mobile-app.

• In future use, if we force user to login to view content of a page, AJAX can simply do that trick, quickly. So we can put that login-box every-where & log in user without interrupting current state.