Skip to content

Quickstart sample code for an Angular app using Okta redirect model

Notifications You must be signed in to change notification settings

okta-samples/okta-angular-quickstart

Repository files navigation

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

Help

Please visit our Okta Developer Forums.

About

Quickstart sample code for an Angular app using Okta redirect model

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published