Authentication for users on a Single Page App?

Question

I have developed a single page app prototype that is using Backbone on the front end and going to consume from a thin RESTful API on the server for it\'s data.

Coming f

Answer 1

We're using Angular.js and also, have a separate page for the login. The separate page loads a separate single page (and secure) application, that calls the server using http XHR request, sending username and password. If the server authenticated the credentials, the javascript code sets a cookie. this cookie could be read from the 'other side', meaning, the non-secure application. In the cookie we only put the user name and of course, no password or other secured information. then we can show something like 'Not Lior? Logout' on the non-secure app.

Only thing to note is to override Angular's cookie mechanism to set an indefinite expiration and, most importantly, root path:

$document[0].cookie = 'username=' + escape($scope.userName) + ";expires=Thu, 01 Jan 2970 00:00:00 GMT; Path=/";

Answer 2

The most RESTful way I have seen is based on the OAuth client credentials flow, basically a /token endpoint that you post username/password to which returns an access token for this session. Every ajax request after that appends an Authorization bearer header with the token. You can store the token in a global variable to just keep it around until the page is refreshed/closed, use local storage to keep users logged in between sessions, or javascript cookies. If you don't like the idea of tokens then you can just use the old cookie approach which is automatically send with any ajax request anyway.

As for facebook/google etc I normally follow the stackoverflow approach where I associate external userlogins to an account. Then use a fairly normal server based oauth dance (although you can replace all requests to the server with ajax requests with slight modifications, I just find it doesn't really make much difference as you need redirects between you and the server anyway). I normally issue an encrypted cookie for a facebook login, which I then convert into a token using a similar method as above (just send the cookie with the request instead of username/password).

Answer 3

We use django cookie-based authentication and have a separate page for the login and the single-page-app. Works pretty well for our use case. We have used a Backbone-based session management system that I described here: backbone.js - handling if a user is logged in or not