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 from heavy server side application development (php and python), I have really enjoyed the new different design approach with a thick client side MVC but am confused on how best to restrict the app to authenticated users who log in.

I prefer to have the app itself behind a login and would also like to implement other types of logins eventually (openid, fb connect, etc) in addition to the site's native login. I am unclear how this is done and have been searching - however unsuccessful in finding information that made it clear to me.

In the big picture, what is the current best practice for registering users and requiring them to login to use your single page app?

Once a user is logged in, how are the api requests authenticated? Can I store a session but how do I detect for this session in the API calls or is there a token I have to pass in every single API call? Any answers to this would be much appreciated!

Malaya

What did you do finally? Please choose an answer if one of the existing answers solved or add your own solution? – Fugacity

Answer 1

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).

Beanery

Answer 2

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

Supraorbital

I do something similar to what is linked. I have a model that deals solely with authentication (login/logout), verify that on the server-side then send back a response. The success or error callback then sends out an event that my app and views are listening to. On the return from the server, I send an encrypted cookie session which I then use with each call to verify that they are authenticated. – Stramonium

@orangewarp: What you've described sounds a lot (if not exactly) like what we need. We're using knockout.js, not backbone.js. Is there any way you could provide more details on how you implemented your solution? Maybe some example code? Thanks! – Derna

Answer 3

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=/";

Bateman