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 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.