How to Use Stormpath in Angular.js

Sign up for Stormpath: https://api.stormpath.com/register
More from Stormpath: https://stormpath.com/blog

Single Page Apps bring a unique set of concerns to authentication and user management. Robert Damphousse, lead Javascript engineer at Stormpath, will show you how to use Stormpath to secure an Angular.js app with any backend: Java, Node, PHP, .NET and more!

Robert will deep dive into Angular.js authentication best practices and an extended technical example. Join us!

Topics Covered:
- Authentication in Single Page Apps (SPA)
- Using JWTs instead of Session IDs
- Secure Cookie storage
- Cross-Origin Resource Sharing
- Where does Stormpath fit in your architecture?
- End-to-end example with Angular.js + Express.js
- Password-based registration and login
- How to secure your API endpoints
- Implement User Authorization
- Design for a frictionless User Experience

Transcript

1. How to Use Stormpath in Angular.js Robert Damphousse @robertjd_ Lead Front-End Developer, Stormpath
2. About Stormpath • User Management API for Developers • Password security • Authentication and Authorization • LDAP Cloud Sync • Instant-on, scalable, and highly available • Free for developers
3. Talk Overview • Authentication in Single Page Apps (SPAs) • JWTs instead of Session IDs • Securing cookies • Where does Stormpath fit in your architecture? • End-to-end example with Angular.js + Express.js
4. SPAs – What’s different? • Data resources are treated differently than application resources (HTML/CSS/JS assets are separated from data resources) • Forces you to build a proper API, likely a REST + JSON API • User Experience (UX) gets a spotlight
5. SPAs – What’s the same? • Browser JavaScript is an untrusted environment! • Your server is responsible for resource authentication and authorization • You CAN use Cookies for authentication
6. SPAs – Authentication Strategies • Session identifiers – opaque string in a cookie. You CAN use this strategy • Access Tokens are better – JWT
7. JSON Web Tokens (JWT) • Used to persist authentication assertions • Signed, structured • Should be stored in cookies, not local storage
8. JSON Web Tokens (JWT) { "typ":"JWT", "alg":"HS256" } { "iss": "http://trustyapp.com/”, "exp": 1300819380, "sub": "users/8983462", "scope": "self api/buy" } tß´—™à%O˜v+nî…SZu¯µ€U…8H× Header Body (‘Claims’) Cryptographic Signature
9. Why Cookies? • Automatically supplied on every request • HttpOnly flag prevents the JS environment from accessing the cookie • Secure flag ensures the cookie is only transmitted over HTTPS • Can restrict by subdomain and path
10. Why Not Local Storage? • Exposed to JS environment, whereas HttpOnly cookies are not. • Can’t restrict visibility by path, only subdomain • https://www.owasp.org/index.php/HTML5_ Security_Cheat_Sheet#Storage_APIs
11. Securing Cookies • Use the HttpOnly and Secure flags. • Need to protect against Cross-Site Request Forgery (CSRF) attacks • https://www.owasp.org/index.php/Cross- Site_Request_Forgery_(CSRF)
12. Stormpath, Angular & Your Architecture
13. Your Server Stormpath SDK User’s Web Browser (SPA) Stormpath Angular SDK Stormpath HTTP API Architecture Overview Token Authentication (JWT) Stormpath API Key Authentication
14. Integration Example Express.JS Backend
15. End-to-End Walkthrough: http://docs.stormpath.com/angularjs/guide/ API Documentation: https://docs.stormpath.com/angularjs/sdk/#/api Example Application (inside the repo): https://github.com/stormpath/ stormpath-sdk-angularjs Online Guide & Docs:
16. Server-Side: • Create the Stormpath Middleware • Attach the default route handlers • Use specific middleware for API Authentication Stormpath, Angular & Your Architecture
17. Server-Side: Create the Middleware ! var app = express(); var stormpathSdk = require('stormpath-sdk-express'); var spMiddleware = stormpathSdk.createMiddleware();
18. Server-Side: Attach default route handlers ! spMiddleware.attachDefaults(app);
19. Server-Side: Use API Authentication ! app.use('/api/*', spMiddleware.authenticate);
20. Client-Side: • Add the Stormpath Angular SDK to your Angular application • Configure UI Router integration • Use directives for built-in forms • Use UI Router config for view authorization Stormpath, Angular & Your Architecture
21. Client-Side: Add the SDK Dependencies Stormpath, Angular & Your Architecture angular.module('MyApplication', [ 'ngCookies', 'ngResource', 'ngSanitize', 'ui.router', 'stormpath', 'stormpath.templates' ])
22. Client-Side: UI Router Integration angular.module('MyApplication') .config(function ($urlRouterProvider, $locationProvider) { $urlRouterProvider.otherwise('/'); $locationProvider.html5Mode(true); }) .run(function($stormpath){ $stormpath.uiRouter({ loginState: 'login', defaultPostLoginState: 'main' }); });
23. Client-Side: Built-in Form Directives <div sp-login-form></div>
24. Client-Side: Built-in Form Directives <div sp-registration-form post-login-state="main”></div>
25. Client-Side: Auth Directives Classic Use Case: Menu bar changes when logged in Logged In: Not Logged In:
26. Client-Side: Auth Directives <li if-not-user> <a ui-sref="login">Login</a> </li> <li if-user> <a ui-sref="main" sp-logout>Logout</a> </li> “If User” and “If Not User”
27. Client-Side: View Authentication angular.module('MyApplication') .config(function ($stateProvider) { $stateProvider .state('profile', { url: '/profile', templateUrl: 'app/profile/profile.html', controller: 'ProfileCtrl', sp: { authenticate: true, } }); });
28. Client-Side: View Authorization angular.module('MyApplication') .config(function ($stateProvider) { $stateProvider .state('profile', { url: '/profile', templateUrl: 'app/profile/profile.html', controller: 'ProfileCtrl', sp: { authorize: { group: ‘admins’ } } }); });
29. Client-Side: Behind the Scenes.. • On login: Stormpath Express SDK sends a JWT to Angular, stored in a secure cookie • Browser automatically supplies JWT cookie on all requets • /me route is served by SDK, so that Angular can know context about current user
30. Recap.. • Stormpath SDK on your server and in your SPA • JWTs are used instead of sessions • Angular SDK provides directives for forms and authentication state • Angular SDK will work with any backend • User data is stored and secured behind the Stormpath API
31. Stormpath for Authentication & User Management Stormpath can handle authentication and authorization for your API, SPA or mobile app, as well as a range of advanced user features • Single Sign-On Across Your Apps • API Authentication & Key Management • Token Based Authentication • Oauth Workflows • JWTs Implementations in your Library of choice: https://docs.stormpath.com/home/
32. Get started with your free Stormpath developer account! https://api.stormpath.com/register Questions? support@stormpath.com