alisaduncan / okta-angular-hash-strategy-example

Quick example using HashLocation strategy in Angular with Okta

Angular HashStrategy 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 with hash location strategy enabled.

NOTE

This code is not vetted or even tested. It's a quick sample and may contain bugs, errors, security issues, etc. Use it at your own risk. The author is not responsible for any issues that stem from using this code.

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.

Getting started

To run this example, run the following commands:

git clone https://github.com/alisaduncan/okta-angular-hash-strategy-example.git
cd okta-angular-hash-strategy-example
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>

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'
});

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.