This document discusses authentication and authorization architecture in browser applications. It covers authenticating and authorizing clients to protect them from outsiders and each other. It discusses using cookies versus tokens to maintain state and different authentication providers like Passport. It also discusses authorizing by role, resource, or custom and setting up API routes and restricting access by object or post-query filtering. The client side uses Angular to handle login and check authorization status before accessing resources. Templates can show/hide elements based on authorization.

1. 5 Authentication
Authorization
Architecture
in Browser Applications
Yuri Takhteyev, rangle.io
http://yto.io
@qaramazov
+

2. Authenticate,
Authorize

3. Protecting
clients from:
outsiders
each other
themselves

4. Display and capture
Authentication
Business logic
Storage
Interaction logic
Interaction logic
AuthorizationServer
Client

5. Display and capture
Authentication
Business logic
Storage
Interaction logic
Authorization
Business logic
Authentication
Authorization
Authorization

6. Display and capture
Business logic
Storage
Interaction logic
Authorization
Business logic
Authentication
Authorization
Authorization :-(
Authorization :-)

7. Who am I?
Cookies
vs tokens
Maintaining
the state

8. Passport
Local
Social / OAuth

9. Many Faces of Authorization
By role or
activity
By resource
instance
Altogether
custom

10. Bottlenecks

12. Setting Up an API Route
var mapper = koast.makeMongoMapper(connection);
routes = [
['get', 'robots', user.any,
mapper.get('robots', [])
],
['put', 'robots/:robotNumber', user.any,
mapper.put('robots', ['robotNumber'])
]
];

13. Restricting Access by Object
mapper.queryDecorator = function(query, req,
res) {
query.owner = req.user.username;
};
mapper.queryDecorator = function(query, req,
res) {
query.clientId = req.user.clientId;
};

14. Post-Query Filtering
mapper.filter = function(result, req) {
if (req.method === 'GET' {
return canSee(data, req);
} else {
return canEdit(data, req);
}
};

15. Informing the Client
mapper.clientAuthorizer = function(result, req,
res) {
result.meta.can.edit =
canEdit(result.data, req);
};

16. The Client Side
angular.module('sampleKoastClientApp',
['koast'])
.controller('myCtrl', ['$scope', 'koast',
'$log',
function($scope, koast, $log) {
$scope.login = function(provider) {
koast.user.initiateOauthAuthentication(
provider);
};
...

17. The Client Side
...
koast.user.getStatusPromise()
.then(function() {
if (koast.user.isAuthenticated) {
return koast.getResource('robots')
.then(function(robots) {
$scope.robots = robots;
});
}
})
.then(null, $log.error);
}]);

18. The Template
<span ng-if="robot.can.edit">
<button>...</button>
</span>

19. Thank You.
Contact:
yuri@rangle.io
http://yto.io
@qaramazov
This presentation:
http://yto.io/auth
Koast:
http://yto.io/koast

20. Image Credits
by yewenyi
by striatic
by bible-history
by dunechaser
by nikhilverma
Distributed under
Creative Commons Attribution
Share-Alike License, v. 2.0
by psd