Angular Quickstart Sample Code for Integrating with Okta using the Redirect Model

This repository contains a sample of integrating with Okta for authentication using the redirect model in an Angular app.

The sample uses the Okta Angular SDK and Okta Auth JavaScript SDK. Read more about getting started with Okta and authentication best practices on the Okta Developer Portal.

This code sample demonstrates

• Configuring Okta
• Sign-in and sign-out
• Protecting routes
• Displaying user profile information from the ID Token
• Adding an interceptor for adding the Access Token to HTTP calls

Getting started

To run this example, run the following commands:

git clone https://github.com/okta-samples/okta-angular-quickstart.git
cd okta-angular-quickstart
npm ci

Create an OIDC application in Okta

Create a free developer account with the following command using the Okta CLI:

okta register

If you already have a developer account, use okta login to integrate it with the Okta CLI.

Provide the required information. Once you register, create a client application in Okta with the following command:

okta apps create

You will be prompted to select the following options:

• Type of Application: 2: SPA
• Redirect URI: http://localhost:4200/login/callback
• Logout Redirect URI: http://localhost:4200

The application configuration will be printed to your screen:

Okta application configuration:
Issuer:    https://<OKTA_DOMAIN>.okta.com/oauth2/default
Client ID: <CLIENT_ID>

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

Update src/app/app.module.ts with your Okta settings.

const oktaAuth = new OktaAuth({
  clientId: '{yourClientID}',
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  redirectUri: window.location.origin + '/login/callback',
  scopes: ['openid', 'offline_access']
});

Start the app by running

npm start

Spec files have been updated to demonstrate how to configure the TestBed and provide a spy in place of Okta services.

Run tests by

npm run test

Helpful resources

• Learn about Authentication, OAuth 2.0, and OpenID Connect
• Get started with Angular
• Angular developer guide

Help

Please visit our Okta Developer Forums.