Stormpath is Joining Okta
We're available to answer all questions at email@example.com.
Stormpath Angular SDK
Angular Components for integrating with Stormpath's API
Table of contents
Angular SDK for Stormpath's API. If you're looking for AngularJS support, please see stormpath-sdk-angularjs.
Install through npm:
npm install --save angular-stormpath
Then use it in your app like so:
If you're using a version of Angular < 2.3, extending AuthPortComponent won't work for you. As an alternative, you can inject the
Stormpath service into your component, subscribe to
stormpath.user$ and implement
You may also find it useful to view the demo source.
To override the endpoint prefix or URIs for the various endpoints, you can modify the defaults in StormpathConfiguration.
For example, to override the endpoint prefix and
/me URI in demo.module.ts, change it to the following:
If your Angular app is on a different domain than your endpoints, OAuth will be used for login/logout. The access token will be stored in localStorage under the name
stormpath:token and it will be automatically added as an
Authorization header when you send HTTP requests to your
If you'd like to add this header to additional URLs, you'll need to add them as follows:
To override templates, you can use the
customTemplate attribute on a component. Below is an example of app.component.ts with a custom
NOTE: One problem with this approach is you'll need to copy all the referenced variables in the template into your component. Another option is to extend the existing Stormpath component and override its
template variable in
@Component. This is the recommended solution if you're using Angular 2.3+.
Access Token Storage
To change the storage mechanism for authentication tokens from localStorage (the default), to cookies, change the class for the 'tokenStore' provider.
Below is a list of direct links to each component. You can use the HTML defined in their
template variable as a starting point for your customizations.
Usage without a module bundler
<script src="node_modules/dist/umd/stormpath-sdk-angular/stormpath-sdk-angular.js"></script> <script> // everything is exported Stormpath namespace </script>
All documentation is auto-generated from the source via typedoc and can be viewed at https://docs.stormpath.com/angular/api.
Prepare your environment
- Install Node.js and npm
- Install local dev dependencies:
npm installwhile current directory is this repo
npm start to start a development server on port 8000 with auto reload + tests.
npm test to run tests once or
npm run test:watch to continually run tests.
Using npm link
If you want to use
npm link to use this module in another Angular project, follow the steps below:
- Build this project using
npm run build:dist.
npm linkin this project's directory.
npm link angular-stormpathin the
rm -rf node_modules/angular-stormpath/node_modulesin
- Manually install dependencies required by
npm install ng2-webstorage angular2-cookie --save
You'll know if this doesn't work because you'll see an error message like the following:
Type 'Observable<boolean | Account>' is not assignable to type 'Observable<boolean | Account>'. ' Property 'source' is protected but type 'Observable<T>' is not a class derived from 'Observable<T>'.
When this happens, you can use the ol' fashioned copy and paste method. If you have
stormpath-sdk-angular in an adjacent directory, the commands below should work on your project that has
angular-stormpath already installed. You will need to run
npm run build:dist every time you change code in this project.
rm -rf node_modules/angular-stormpath/dist cp -r ../stormpath-sdk-angular/dist node_modules/angular-stormpath/. cp ../stormpath-sdk-angular/package.json node_modules/angular-stormpath/.
Bump the version in package.json (once the module hits 1.0 this will become automatic).
npm run release
For more information, see generator-angular-library. It was used to create this project.
Apache-2.0 © Stormpath