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.
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.
- Install UI-Router
The Stormpath module is only compatible with the UI-Router, so ensure that your application is using it.
- 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.
- Download and Include the SDK
Download these two files:
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
- 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']);- 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.
- 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
}
});- 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>- 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>- Hide Elements When Logged In
Use the if-user directive:
<a ui-sref="main" sp-logout if-user>Logout</a>- Hide Elements When Logged Out
Use the if-not-user directive:
<a ui-sref="login" if-not-user>Login</a>- 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.
Contact us via email at support@stormpath.com 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.