Stormpath is Joining Okta
We're available to answer all questions at email@example.com.
Stormpath AngularJS SDK
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.
- Install or Download the Stormpath Angular SDK
If you are using Bower or NPM, you can install this module with the respective command:
npm install stormpath-sdk-angularjs --save
bower install stormpath-sdk-angularjs --save
If you are not using a package manager, you can download the latest source from our Github CDN by using these links:
Then include them in your index.html file:
- Add the Module to Your App's Dependencies
stormpath module and templates to your app's dependencies in app.js:
var app = angular;
- Configure Stormpath
The Angular SDK leverages the Stormpath Client API for its authentication needs. Login to your Stormpath Tenant, and find your Client API domain (inside your application's policy section). Add your Client API domain as the
ENDPOINT_PREFIX setting, via your
You will need to tell Stormpath where your front-end application is running, by adding its domain to the list of Authorized Origin URIs on your Stormpath Application. This can be done from the Stormpath Admin Console. For example, if you are developing on a local sever that runs your front-end app at
http://localhost:3000, you need to add that URI to the list
If this is not done, you will see the error
Origin 'http://localhost:3000' is therefore not allowed access. in the browser error log.
If you will be using social login, you will also need to add this URI to the list of Authorized Callback URIs, otherwise you will see the error
Specified redirect_uri is not in the application's configured authorized callback uri's. when you attempt social login.
- Configure Routing
In your app's
run() block, configure the login state and the default state after login.
loginState to your login state. If you don't have one, create one.
defaultPostLoginState to your default state after login.
Insert the Login and Registration FormsThese forms will read their configuration from the Client API and allow you to login or register for your application. You should now be able to use these forms to login to your application.
Add Login and Logout Links
sp-logout directive to end the session:
For the login link, just point the user to your login state:
- Hide Elements When Logged In
- Hide Elements When Logged Out
- Protect Your States
On all states that you want to protect, add:
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.
Looking for social login? Simply configure the directories in your Stormpath tenant, and the buttons will automatically appear in the login form. For more reading, please see the Social Login Product Guide.
- Making Authenticated Requests
Once you are able to successfully authenticate (log in) from your application, you will want to authorize access to API endpoints on your server. The Angular SDK provides methods for getting the current authenticated access token, and using it to authenticate requests.
Imagine you have an API on your server, such as
http://localhost:3000/api/subscription, and you want to authorize requests to this endpoint and know who the user is.
If you want to manually construct a request, using the
$http library, you can use our access token getter to add the access token to the request:
If you don't want to manually add the access token to every request, you can white-list URLs by expression and the Angular SDK will automatically add this token to all requests that have a matching URL:
- Authorizing Requests Server-Side
Once your app has made the request with the access token, your server will need to read the token and make an authorization decision. We provide SDKs for your backend server that make this easy. Please follow one of the following links for a language-specific or framework-specific guide:
Spring Boot developers should make use of our Spring Boot plugin, and see the Token Management Documentation.
Laravel developers can use our Stormpath-Laravel or Stormpath-Lumen libraries and their respective
stormpath.auth middleware to authenticate requests, please see the User Data section of the documentation for each library.
Don't see your environment listed? Not a problem! Our access tokens are simple JWTs, that can be validated with most generic JWT validation libraries. Our product guide can walk you through the process, Validating an Access Token.
Need more assistance? Feel free to contact our support channel, details are below.
For all available directives and services, see the API Documentation.
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:
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
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;
We're here to help if you get stuck. There are several ways that you an get in touch with a member of our team:
- Send an email to firstname.lastname@example.org
- Open a Github Issue on this repository.
- Join us on our Slack channel: https://talkstormpath.shipit.xyz/
Found something you want to change? Please see the Contribution Guide, we love your input!
Apache 2.0, see LICENSE.