This module provides services and directives for AngularJS that will allow you to solve common user management tasks using Stormpath, such as login and signup.

Stormpath is a User Management API that reduces development time with instant-on, scalable user infrastructure. Stormpath's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.

• Getting Started
• Documentation
• Example
• Help
• Contributing
• License

Follow these steps to add Stormpath user authentication to your AngularJS app.

Don't have an app? Use our example app as a boilerplate - it has Stormpath already integrated! Starting from scratch? Our Yeoman Guide will walk you through the creation of a full-stack application.

1. Install UI-Router

The Stormpath module is only compatible with the UI-Router, so ensure that your application is using it.

2. Integrate Your Back-End

This module requires Stormpath on your back-end to work properly. At the moment we have a fully-featured integration for Express.js, express-stormpath.

For other frameworks, please see the Server Integration Guide.

For a quick setup, use our Stormpath SPA Development Server.

3. Download and Include the SDK

Download these two files:

• stormpath-sdk-angularjs.min.js
• stormpath-sdk-angularjs.tpls.min.js

Then include them in your index.html file:

<script src="stormpath-sdk-angularjs.min.js"></script>
<script src="stormpath-sdk-angularjs.tpls.min.js"></script>

Or install with bower: $ bower install --save stormpath-sdk-angularjs

4. Add the Module to Your App's Dependencies

Add the stormpath module and templates to your app's dependencies in app.js:

var app = angular.module('myApp', [..., 'stormpath', 'stormpath.templates']);

5. Configure the UI-Router

In your run() block in app.js, configure the login state and the default state after login:

app.run(function($stormpath){
  $stormpath.uiRouter({
    loginState: 'login',
    defaultPostLoginState: 'home'
  });
});

Set loginState to your login state. If you don't have one, create one. Set defaultPostLoginState to your default state after login.

6. Protect Your States

On all states that you want to protect, add:

sp: {
  authenticate: true
}

For example:

$stateProvider.state('secret', {
  url: '/secret',
  views: {...},
  sp: {
    authenticate: true
  }
});

7. Add States for Login and Signup

Create states and views for your login and signup page. Use the sp-login-form and sp-registration-form directives to inject the forms into your templates. E.g.

<div sp-login-form></div>

8. Add Login and Logout Links

Use the sp-logout directive to end the session:

<a ui-sref="main" sp-logout>Logout</a>

For the login link, just point the user to your login state:

<a ui-sref="login">Login</a>

9. Hide Elements When Logged In

Use the if-user directive:

<a ui-sref="main" sp-logout if-user>Logout</a>

10. Hide Elements When Logged Out

Use the if-not-user directive:

<a ui-sref="login" if-not-user>Login</a>

11. That's It!

You just added user authentication to your app with Stormpath. See the API Documentation for further information on how Stormpath can be used with your AngularJS app.

For all available directives and services, see the API Documentation.

If you are using Yeomon, please see our Yeoman Guide. It will walk you through the creation of an Angular application from scratch, using Yeoman.

See the example app in this repository for an example application that uses Yeoman as it's boilerplate.

For a simplified example that does not use a boilerplate system, please see this repository:

Stormpath Angular + Express Fullstack Sample Project

If you are hosting your API on a different domain than your Angular application, please see the CORS example app in this repository.

This module can be used with Browserify. Please add the following lines to your package.json file:

"browser": {
  "stormpath": "./node_modules/stormpath-sdk-angularjs/dist/stormpath-sdk-angularjs.js",
  "stormpath.templates": "./node_modules/stormpath-sdk-angularjs/dist/stormpath-sdk-angularjs.tpls.js"
}

You should also install the package angular-ui-router, as our library currently depends on it.

Then in your application you can use require to require our modules:

var app = angular.module('todoApp', [
  require('angular-ui-router'),
  require('stormpath'),
  require('stormpath.templates')
]);

If you have an issue while integrating this library, please make sure to look at the open issues on this repository and the Troubleshooting Document.

You may also contact us via email at [email protected] or visit our support center.

Found something you want to change? Please see the Contribution Guide, we love your input!

Apache 2.0, see LICENSE.