Okta Angular SDK
This library currently supports:
This library is tested against the latest version of Angular (currently 6), and is currently known to be compatable with Angular 4, 5, and 6.
- If you do not already have a Developer Edition Account, you can create one at https://developer.okta.com/signup/.
- An Okta Application, configured for Singe-Page App (SPA) mode. This is done from the Okta Developer Console and you can find instructions here. When following the wizard, use the default properties. They are are designed to work with our sample applications.
- Angular Quickstart
- If you don't have an Angular app, or are new to Angular, please start with this guide. It will walk you through the creation of an Angular app, creating routes, and other application development essentials.
- Okta Sample Application
- A fully functional sample application.
- Okta Angular Quickstart
- Helpful resource for integrating an existing Angular application into Okta.
This library is available through npm. To install it, simply add it to your project:
npm install --save @okta/okta-angular
okta-angular works directly with
@angular/router and provides the additional components and services:
OktaAuthModule- Allows you to supply your OpenID Connect client configuration.
OktaAuthGuard- A navigation guard using CanActivate to grant access to a page only after successful authentication.
OktaCallbackComponent- Handles the implicit flow callback by parsing tokens from the URL and storing them automatically.
OktaLoginRedirectComponent- Redirects users to the Okta Hosted Login Page for authentication.
OktaAuthService- Highest-level service containing the
OktaAuthModule is the initializer for your OpenID Connect client configuration. It accepts the following properties:
issuer(required): The OpenID Connect
clientId(required): The OpenID Connect
redirectUri(required): Where the callback is hosted
scope(optional): Reserved for custom claims to be returned in the tokens
responseType(optional): Desired token grant types
onAuthRequired(optional): Accepts a callback to make a decision when authentication is required. If not supplied,
okta-angularwill redirect directly to Okta for authentication.
Routes are protected by the
OktaAuthGuard, which verifies there is a valid
accessToken stored. To ensure the user has been authenticated before accessing your route, add the
canActivate guard to one of your routes:
If a user does not have a valid session, they will be redirected to the Okta Login Page for authentication. Once authenticated, they will be redirected back to your application's protected page.
In order to handle the redirect back from Okta, you need to capture the token values from the URL. You'll use
/implicit/callback as the callback URL, and specify the default
OktaCallbackComponent and declare it in your
By default, the
OktaLoginRedirect component redirects users to your Okta organization for login. Simply import and add it to your
appRoutes to offset authentication to Okta entirely:
Using a custom login-page
okta-angular SDK supports the session token redirect flow for custom login pages. For more information, see the basic Okta Sign-in Widget functionality.
To handle the session-token redirect flow, you can modify the unauthentication callback functionality by adding a
data attribute directly to your
Alternatively, set this behavior globally by adding it to your configuration object:
In your components, your can take advantage of all of
okta-angular's features by importing the
OktaAuthService. The example below shows connecting two buttons to handle login and logout:
Performs a full page redirect to Okta based on the initial configuration. This method accepts a
fromUri parameter to push the user to after successful authentication.
The optional parameter
additionalParams is mapped to the AuthJS OpenID Connect Options. This will override any existing configuration. As an example, if you have an Okta
sessionToken, you can bypass the full-page redirect by passing in this token. This is recommended when using the Okta Sign-In Widget. Simply pass in a
sessionToken into the
loginRedirect method follows:
Returns a promise that resolves
true if there is a valid access token or ID token.
An observable that returns true/false when the authenticate state changes. This will happen after a successful login via
oktaAuth.handleAuthentication() or logout via
Returns a promise that will resolve with the result of the OpenID Connect
/userinfo endpoint if an access token is provided, or returns the claims of the ID token if no access token is available. The returned claims depend on the requested response type, requested scope, and authorization server policies. For more information see documentation for the UserInfo endpoint, ID Token Claims, and Customizing Your Authorization Server.
Returns a promise that returns the access token string from storage (if it exists).
Returns a promise that returns the ID token string from storage (if it exists).
Parses the tokens returned as hash fragments in the OAuth 2.0 Redirect URI, then redirects to the URL specified when calling
loginRedirect. Returns a promise that will be resolved when complete.
Terminates the user's session in Okta and clears all stored tokens. Accepts an optional
uri parameter to push the user to after logout.
Used to capture the current URL state before a redirect occurs. Used primarily for custom
canActivate navigation guards.
Returns the stored URI and query parameters stored when the
setFromUri was used.
- Clone the repo:
git clone email@example.com:okta/okta-oidc-js.git
- Navigate into the
- Install dependencies:
- Navigate into the sample and install all
cd test/e2e/harness && npm install
- Navigate into the sample and install all
- Make your changes to
||Start the sample app using the SDK|
||Run integration tests|
||Run eslint linting tests|