Okta Angular + Okta Redirect Model Example

This example shows you how to use the Okta Angular Library to login a user to an Angular application. The login is achieved through the PKCE Flow, where the user is redirected to the Okta-Hosted login page. After the user authenticates they are redirected back to the application with an ID Token and Access Token.

This example is built with Angular CLI.

Prerequisites

Before running this sample, you will need the following:

• The Okta CLI Tool
• An Okta Developer Account (create one using okta register, or configure an existing one with okta login)

Get the Code

Grab and configure this project using okta start angular.

NOTE: If you'd like to use the Okta Sign-In Widget instead of redirect to Okta, use okta start angular --branch widget.

Follow the instructions printed to the console.

Enable Refresh Token

Sign into your Okta Developer Edition account to add a required setting to your Angular Okta app to avoid third-party cookies. Navigate to Applications > Applications and select "okta-angular-sample" application to edit. Find the General Settings and press Edit. Enable Refresh Token in the Grant type section. Save your changes.

Run the Example

To run this application, install its dependencies:

npm install

With variables set, start the app server:

ng serve

Now navigate to http://localhost:4200 in your browser.

If you see a home page that prompts you to login, then things are working! Clicking the Log in button will redirect you to the Okta hosted sign-in page.

You can sign in with the same account that you created when signing up for your Developer Org, or you can use a known username and password from your Okta Directory.

Note: If you are currently using the Okta Admin Console, you already have a Single Sign-On (SSO) session for your Org. You will be automatically logged into your application as the same user that is using the Admin Console. You may want to use an incognito tab to test the flow from a blank slate.

Integrating The Resource Server

If you were able to successfully login in the previous section you can continue with the resource server example. Please download and run one of these sample applications in another terminal:

• Node/Express Resource Server Example
• Java/Spring MVC Resource Server Example
• ASP.NET and ASP.NET Core Resource Server Examples

Once you have the resource server running (it will run on port 8000) you can visit the /messages page within the Angular application to see the authentication flow. The Angular application will use its stored access token to authenticate itself with the resource server, you will see this as the Authorization: Bearer <access_token> header on the request if you inspect the network traffic in the browser.