Flangular - A Flask based Angularjs application with authentication

The Authentication

To let users authenticate with the system we create a User ORM class with that we can verify user credentials. Then we create a route to let users authenticate:

@app.route('/login', methods=('POST',))
def login():
    user = User.login(request.form['email'], request.form['password'])
    if user is not None:
        g.user = user
        return make_response(redirect_back('index'))

    flash('Could not log in.')
    return render_template('login.html')

When a user has successfully authenticated then he is stored on the g object for the rest of the request.

The User class can generate authentication tokens. Theses tokens are encrypted and save to pass as cookie to the browser. But the tokens are only valid for a limited time span. If this time span exceeds the session times out. For an in detail explanation see Miguel's Blog. So we need to refresh the tokens after each request to let the session not expire when the user is active.

To do so we add an application global after_request hook where we refresh the token and append it as a cookie:

@app.after_request
def after_request(resp):
    user = g.get('user', None)
    if user is not None:
        # refresh token
        token = user.generate_auth_token()
        resp.set_cookie('XSRF-TOKEN', token.decode('ascii'));

    return resp

You may have recognized the special cookie name XSRF-TOKEN. We will use Angular's $http service on the client side. This service is actually pretty handy because it looks for a cookie with that name. If it detects such a cookie $http will append a special HTTP header to its XHR requests: X-XSRF-TOKEN which then contains our auth token. Nice!

That's already pretty much everything that's needed. We now only need to verify the token either from the X-XSRF-TOKEN header to be CSRF save or just from the cookie to serve static content:

def user_valid(cookie=False):
    if cookie:
        token = request.cookies.get('XSRF-TOKEN')
    else:
        token = request.headers.get('X-XSRF-TOKEN')

    if token is None:
        return None

    user = User.verify_auth_token(token)
    g.user = user
    return user

This could be turned into a decorator but parameterized decorators are pretty messy so I left it as it is.

As log out mechanism we simply use the login form. If a logged in user requests the login form he will be automatically logged out by deleting the cookie:

@app.route('/login', methods=('GET',))
def login_form():
    resp = make_response(render_template(
            'login.html', next=get_redirect_target()))

    # Reset session information to log user out, since the login page functions
    # also as logout page.
    g.user = None
    resp.set_cookie('XSRF-TOKEN', '', expires=0);
    return resp

Limiting the Access

Now that we have our authentication in place we can start to limit the user's access based on if they are logged in or not. Let's start with our directory layout from above. We need to limit access to our private directory to serve our private application code only to authenticated users. Like already mentioned we have to use the cookie based, not CSRF save method. That's actually not a problem since CSRF attacks do only make sense to trigger some kind of action in the targeted application which is not the case by just downloading static content.

So let's use our user_valid(...) function to protect the private folder:

@app.route('/priv/<path:filename>')
def private_static(filename):
    if user_valid(cookie=True):
        return send_from_directory(PRIVATE_FOLDER, filename)
    else:
        abort(401)

To restrict access to our Flask-Restless API we subclass our base model class and add a before_request hook. This way all published models can simply subclass our model class and override the before_request hook if they need to:

class Model(db.Model):
    # ...
    @classmethod
    def before_request(cls):
        if not core.user_valid(cookie=False):
            abort(401)

That was the server part. Now we can log in and out and have everything restricted like desired.

The List View

So far so good but let's wrap this into our own service to be a little more convenient. I'd like some kind of collection with methods for pagination attached. An object which can be placed in scope and paginated without further interaction required. For implementation detail see the collection service implemented in private/flangular.js in the GitHub Repository.

function listController($scope, collection) {
    $scope.model = collection('computer');
    $scope.model.load();
}

This model can now be used in the template to render a paginated table. We use UI-Bootstrap for the paginator which can now be easily wired together:

<pagination total-items="model.count"
            ng-change="model.load()"
            ng-model="model.currentPage">
</pagination>

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Processor</th>
      <th>RAM</th>
      <th>Power</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="row in model.objects" ng-click="edit(row.id)">
      <td>{{ row.id }}</td>
      <td>{{ row.processor }}</td>
      <td>{{ row.ram }}</td>
      <td>{{ row.power }}</td>
    </tr>
  </tbody>
</table>

The Detail View

For manipulating single instances we create another service to provide us with convenient instance methods save and remove: We call it instance.

One could think about adding these methods to the instances already when querying them for the collection but since we are using UI-Router for navigation, instances have to be queried based on the URL parameter anyway.

We just take the instance object from the XHR call and attach the methods:

GET /api/computer/2

{
  "id": 2,
  "power": "0.3 W",
  "processor": "ARM Cortex M3",
  "ram": "8 KiB"
}

How does it look like?

function detailController($scope, $stateParams, instance) {
    $scope.model = instance('computer');
    $scope.model.$select($stateParams.id);
}

The simplified detail form template:

<form novalidate>
    <input type="text" ng-model="model.processor">
    <input type="text" ng-model="model.ram">
    <input type="text" ng-model="model.power">
</form>