Add Step-up Authentication Using Angular and NestJS Example

This repository contains a working example of adding step-up authentication to protect an Angular route using the Okta Angular SDK. It also contains example code of protecting an API route in NestJS and Angular code required to handle step-up authentication challenge error response. Please read Add Step-up Authentication Using Angular and NestJS for a detailed guide through.

Prerequisites

Node 18 or greater
Okta CLI
Your favorite IDE
A web browser with good debugging capabilities
Terminal window
Git

Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.

Getting Started
Links
Help
License

Getting Started

To run this example, run the following commands:

git clone https://github.com/oktadev/okta-angular-nestjs-stepup-auth-example.git stepup-auth
cd stepup-auth
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 packages/frontend-angular/src/app.config.ts with your Okta settings.

{
  issuer: "https://{yourOktaDomain}/oauth2/default",
  clientId: "{yourClientId}"
}

Start the app by running

npm start

If you want to run the completed project, check out the completed branch.

git checkout completed

Search for {yourOktaDomain} and {yourClientId}. Update all occurrences. You will update two places with the Okta domain.

Scaffold the project

This project is an Angular frontend and NestJS backend in a Lerna monorepo. You can recreate this app using the commands below. I will not include any code added to the scaffolded files.

npx lerna@8.1 init
mkdir packages && cd packages

npx @angular/cli@17.2 new frontend-angular --routing --skip-git --skip-install --skip-tests --style scss --ssr false
cd frontend-angular
npx @angular/cli generate component profile --inline-template --inline-style
npx @angular/cli generate component messages --inline-template --inline-style
cd ..

npx @nestjs/cli@10.3 new api --skip-git --skip-install --package-manager npm
cd api
npx @nestjs/cli generate controller messages --no-spec --flat
npx @nestjs/cli generate guard stepup --no-spec --flat
cd ../..

npm i @okta/okta-angular@6.3 @okta/okta-auth-js@7.5 -w frontend-angular 
npm i @okta/jwt-verifier@3.0 -w api

Open the project in an IDE. Create a proxy for Angular to call the API without enabling CORS.

Open packages/api/tsconfig.json and add the property to enable ES Module interoperability:

"esModuleInterop": true

Open packages/api/package.json and change the start script to "nest start --watch".

Open package.json and add the following npm scripts:

"scripts": {
    "lerna": "lerna",
    "start": "lerna run start"
},

Links

This example uses the following open source libraries from Okta:

Help

Please post any questions as comments on the blog post, or visit our Okta Developer Forums.

License

Apache 2.0, see LICENSE.