---
title: "Flexible Authentication Configurations in Angular Applications Using Okta"
description: "This tutorial shows how to configure Okta authentication in an Angular standalone application, comparing values embedded in the app, build-time environment files, and runtime-loaded configuration. It scaffolds an Angular 17 project, creates an Okta OAuth 2.0/OpenID Connect single-page client, installs @okta/okta-angular 6.3 and @okta/okta-auth-js 7.5, and wires routes, guards, claims, and an authorization-header interceptor. Runtime configuration is served from src/api/config.json and loaded during startup through APP_INITIALIZER, using HttpBackend so the authentication interceptor does not intercept the configuration request; the resulting properties populate OktaAuthConfigService. The sample verifies sign-in, profile access, protected routes, and sign-out, while noting that the original Okta CLI instructions are deprecated and no longer work exactly as written after May 2025."
---

# Flexible Authentication Configurations in Angular Applications Using Okta

[Okta](https://yomu.fyi/company/okta) · Alisa Duncan · Feb 28, 2024

**Type:** Tutorial

## Summary

This tutorial shows how to configure Okta authentication in an Angular standalone application, comparing values embedded in the app, build-time environment files, and runtime-loaded configuration. It scaffolds an Angular 17 project, creates an Okta OAuth 2.0/OpenID Connect single-page client, installs @okta/okta-angular 6.3 and @okta/okta-auth-js 7.5, and wires routes, guards, claims, and an authorization-header interceptor. Runtime configuration is served from src/api/config.json and loaded during startup through APP\_INITIALIZER, using HttpBackend so the authentication interceptor does not intercept the configuration request; the resulting properties populate OktaAuthConfigService. The sample verifies sign-in, profile access, protected routes, and sign-out, while noting that the original Okta CLI instructions are deprecated and no longer work exactly as written after May 2025.

## Context

The post targets developers familiar with Angular and uses standalone components, functional interceptors, and Angular CLI 17 defaults. Its listed prerequisites include Node.js v18 or greater, Angular CLI, a capable web browser, and an IDE or terminal.

## Approach / What changed

The application first configures Okta directly, then moves authentication settings into src/api/config.json. An APP\_INITIALIZER calls the endpoint at startup, using a separate HttpClient created with HttpBackend, and passes the loaded values to OktaAuthConfigService before the application uses Okta authentication.

## Takeaways

- Angular configuration can be embedded in application code, supplied through build-time environment files, or loaded at runtime; runtime loading allows values to change without rebuilding and redeploying the application.
- The runtime initializer uses HttpBackend to create its HttpClient, preventing the authentication interceptor from intercepting the request that retrieves config.json.
- The sample enables the Refresh Token grant type, uses openid, offline\_access, and profile scopes, and protects routes with OktaAuthGuard while handling the login callback.

## FAQ

### Why does the runtime initializer use HttpBackend instead of an injected HttpClient?

It creates a separate HttpClient so the authentication interceptor skips the configuration request. The initializer then loads config.json and passes the response to OktaAuthConfigService.

### How does the Angular development server expose config.json?

The src/api directory must be added to the assets list in the build configuration in angular.json. This makes the file available at the application’s /api/config.json path.

### Can the same runtime configuration pattern be used with Angular NgModules?

Yes. Although the sample uses a standalone application, the post says to provide APP\_INITIALIZER in the AppModule providers array for an NgModule-based application.

**Tags:** [Angular](https://yomu.fyi/topic/angular), [OAuth 2.0](https://yomu.fyi/topic/oauth-2-0), [OpenID Connect](https://yomu.fyi/topic/openid-connect)

- Source: [Okta](https://developer.okta.com/blog/2024/02/28/okta-authentication-angular)
- Source URL: https://developer.okta.com/blog/2024/02/28/okta-authentication-angular
- Ingested by Yomu: 2026-09-17T14:12:51.285Z

[Read original post](https://developer.okta.com/blog/2024/02/28/okta-authentication-angular)