diff --git a/.vscode/settings.json b/.vscode/settings.json
index 2d463ecb..9764f51c 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -32,5 +32,14 @@
"latex",
"plaintext",
"markdown"
- ]
+ ],
+ "files.exclude": {
+ "**/.git": true,
+ "**/.svn": true,
+ "**/.hg": true,
+ "**/CVS": true,
+ "**/.DS_Store": true,
+ "**/Thumbs.db": true
+ },
+ "hide-files.files": []
}
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9d86ee1a..20e816db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,17 +1,7 @@
# Changelog
-All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
-
-## [16.1.0](https://github.com/manfredsteyer/angular-oauth2-oidc/compare/v10.0.3...v16.1.0) (2023-12-16)
-
-
### Features
-* introduce DateTimeProvider ([0c0a4a7](https://github.com/manfredsteyer/angular-oauth2-oidc/commit/0c0a4a7a2574c8c134fa839f7ccdee06273a0676))
-* **logout:** postLogoutRedirectUri should not default to redirectUri ([ff7d1d9](https://github.com/manfredsteyer/angular-oauth2-oidc/commit/ff7d1d915aa19f87bcb1c2d18ac3eb280db78d3b))
-* provide standalone api ([e38c99c](https://github.com/manfredsteyer/angular-oauth2-oidc/commit/e38c99c5f70f23fad892328e2a6f01f1e813af4c))
-* support JWT response on userinfo endpoint ([da16494](https://github.com/manfredsteyer/angular-oauth2-oidc/commit/da1649499376863b0ebf884748176f3b38d91899))
-* update for angular 13 ([d95d7da](https://github.com/manfredsteyer/angular-oauth2-oidc/commit/d95d7da788e2c1390346c66de62dc31f10d2b852))
* update project to Angular 16 ([b999024](https://github.com/manfredsteyer/angular-oauth2-oidc/commit/b999024b1bb7fdb40f07810a75add60f47fe5f08))
diff --git a/README.md b/README.md
index 3d5dcd7d..32c5364c 100644
--- a/README.md
+++ b/README.md
@@ -28,7 +28,9 @@ For using this library with **Azure Active Directory** (**Azure AD**), we recomm
Also, the Okta community created some guidelines on how to use this lib with Okta. See the links at the end of this page for more information.
-**Angular 15 & 16**: Use 15.x versions of this library (**should also work with older Angular versions!**).
+**Angular 16**: Use 16.x versions of this library (**should also work with older Angular versions!**).
+
+**Angular 15**: Use 15.x versions of this library (**should also work with older Angular versions!**).
**Angular 14**: Use 14.x versions of this library (**should also work with older Angular versions!**).
diff --git a/docs/additional-documentation/adapt-id_token-validation.html b/docs/additional-documentation/adapt-id_token-validation.html
index 35eb57d5..87e77f21 100644
--- a/docs/additional-documentation/adapt-id_token-validation.html
+++ b/docs/additional-documentation/adapt-id_token-validation.html
@@ -9,11 +9,11 @@
-
+
-
You can hook in an implementation of the interface TokenValidator to validate the signature of the received id_token and its at_hash property. This packages provides two implementations:
JwksValidationHandler
@@ -61,7 +63,7 @@
Configure/ Adapt id_token Validatio
[...]
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
In cases where no ValidationHandler is defined, you receive a warning on the console. This means that the library wants you to explicitly decide on this.
-
Dependency Injection
+
Dependency Injection
You can also setup a ValidationHandler by leveraging dependency injection:
As this lib follows the OAuth2 and OpenId Connect specs, it should work with all compliant authorizations servers.
However, experience shows that some authorizations servers come with some special behavior or settings. Hence, we must respect this when using this lib.
To use this lib with Auth0, open your Auth0 account and configure:
An app
An API
Configure the app to use refresh token rotation and the grant types authorization code and refresh token. For grant types, see the advanced settings at the end of the settings page.
-
Configuration
+
Configuration
Provide a configuration like this:
import { AuthConfig } from 'angular-oauth2-oidc';
@@ -78,20 +80,20 @@
Configuration
// Your API's name
audience: 'http://www.angular.at/api'
},
-};
Getting, Using, and Refreshing a Token
+};
Getting, Using, and Refreshing a Token
This should work as shown in the other examples in this documentation and in the readme file.
-
Logging out
+
Logging out
Auth0's logout endpoint expects the parameters client_id and returnTo:
For using this library with Azure Active Directory (Azure AD), we recommend an additional look to this blog post and the example linked at the end of this blog post.
There is a callback onTokenReceived, that is called after a successful login. In this case, the lib received the access_token as
well as the id_token, if it was requested. If there is an id_token, the lib validated it.
This library uses sessionStorage as the default storage provider. You can customize this by using localStorage or your own storage solution.
-
Using localStorage
+
Using localStorage
If you want to use localStorage instead of sessionStorage, you can add a provider to your AppModule. This works as follows:
import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';
@@ -81,12 +83,12 @@
Using localStorage
]
})
export class AppModule {
-}
Custom storage solution
+}
Custom storage solution
If you want to use a custom storage solution, you can extend the OAuthStorage class. Documentation can be found here. Then add it as a provider, just like in the localStorage example above.
Configure Library for Implicit Flow (without discovery document)
+
+
+
+
Configure Library for Implicit Flow (without discovery document)
When you don't have a discovery document, you have to configure more properties manually:
Please note that the following sample uses the original config API. For information about the new config API have a look to the project's README above.
The library informs you about its tasks and state using events.
This is an Observable<OAuthEvent> which publishes a stream of events as they occur in the service.
You can log these events to the console for debugging information.
First, try to use the loadDiscoveryDocumentAndLogin method instead of loadDiscoveryDocumentAndTryLogin. If you need more control, the following could be interesting for you.
this.oauthService
.loadDiscoveryDocumentAndTryLogin(/* { your LoginOptions }*/) // checks to see if the current url contains id token and access token
@@ -83,7 +85,7 @@
Refreshing a Token using Code Flow (not Implicit Flow!)
+
+
+
+
Refreshing a Token using Code Flow (not Implicit Flow!)
When using code flow, you can get an refresh_token. While the original standard DOES NOT allow this for SPAs, the mentioned OAuth 2.0 Security Best Current Practice document proposes to ease this limitation. However, it specifies a list of requirements one should take care about before using refresh_tokens. Please make sure you respect those requirements.
Please also note, that you have to request the offline_access scope to get a refresh token.
To refresh your token, just call the refreshToken method:
-
this.oauthService.refreshToken();
Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow)
+
this.oauthService.refreshToken();
Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow)
To automatically refresh a token when/ some time before it expires, just call the following method after configuring the OAuthService:
this.oauthService.setupAutomaticSilentRefresh();
By default, this event is fired after 75% of the token's life time is over. You can adjust this factor by setting the property timeoutFactor to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third.
If you are leveraging the LocationStrategy which the Router is using by default, you can skip this section.
When using the HashStrategy for Routing, the Router will override the received hash fragment with the tokens when it performs it initial navigation. This prevents the library from reading them. To avoid this, disable initial navigation when setting up the routes for your root module:
export let AppRouterModule = RouterModule.forRoot(APP_ROUTES, {
@@ -62,7 +64,7 @@
Beginning with version 2.1, you can receive a notification when the user signs out with the identity provider.
This is implemented as defined by the OpenID Connect Session Management 1.0 spec.
When this option is activated, the library also automatically ends your local session. This means, the current tokens
are deleted by calling logOut. In addition to that, the library sends a session_terminated event, you can register
for to perform a custom action.
Please note that this option can only be used when also the identity provider in question supports it.
-
Configuration
+
Configuration
To activate the session checks that leads to the mentioned notifications, set the configuration property
sessionChecksEnabled:
import { AuthConfig } from 'angular-oauth2-oidc';
@@ -70,17 +72,17 @@
Please note that the lib performs a token refresh when the session changes to get the newest information about the current session. When using implicit flow, this means you have to configure silent refresh; when using code flow you either need silent refresh or a refresh token.
If using refresh tokens, your Auth Server needs to bind them to the current session's lifetime. Unfortunately, the used version of Identity Server 4, shown in the docs and in the example applications, does not support this at the moment.
-
Events
+
Events
To get notified, you can hook up for the event session_terminated:
this.oauthService.events.pipe(filter(e => e.type === 'session_terminated')).subscribe(e => {
console.debug('Your session has been terminated!');
})
Refreshing when using Implicit Flow (Implicit Flow and Code Flow)
+
+
+
+
Refreshing when using Implicit Flow (Implicit Flow and Code Flow)
Notes for Code Flow: You can also use this strategy for refreshing tokens when using code flow. However, please note, the strategy described within Token Refresh is far easier in this case.
To refresh your tokens when using implicit flow you can use a silent refresh. This is a well-known solution that compensates the fact that implicit flow does not allow for issuing a refresh token. It uses a hidden iframe to get another token from the auth server. When the user is there still logged in (by using a cookie) it will respond without user interaction and provide new tokens.
To use this approach, setup a redirect uri for the silent refresh.
When there is an error in the iframe that prevents the communication with the main application, silentRefresh will give you a timeout. To configure the timespan for this, you can set the property silentRefreshTimeout (msec). The default value is 20.000 (20 seconds).
-
Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow)
+
Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow)
To automatically refresh a token when/ some time before it expires, just call the following method after configuring the OAuthService:
this.oauthService.setupAutomaticSilentRefresh();
By default, this event is fired after 75% of the token's life time is over. You can adjust this factor by setting the property timeoutFactor to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third.
Refreshing a Token using Code Flow (not Implicit Flow!)
+
+
+
+
Refreshing a Token using Code Flow (not Implicit Flow!)
When using code flow, you can get an refresh_token. While the original standard DOES NOT allow this for SPAs, the mentioned OAuth 2.0 Security Best Current Practice document proposes to ease this limitation. However, it specifies a list of requirements one should take care about before using refresh_tokens. Please make sure you respect those requirements.
Please also note, that you have to request the offline_access scope to get a refresh token.
To refresh your token, just call the refreshToken method:
-
this.oauthService.refreshToken();
Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow)
+
this.oauthService.refreshToken();
Automatically refreshing a token when/ before it expires (Code Flow and Implicit Flow)
To automatically refresh a token when/ some time before it expires, just call the following method after configuring the OAuthService:
this.oauthService.setupAutomaticSilentRefresh();
By default, this event is fired after 75% of the token's life time is over. You can adjust this factor by setting the property timeoutFactor to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third.
The configuration parameter strictDiscoveryDocumentValidation is set true by default. This ensures that all of the endpoints provided via the ID Provider discovery document share the same base URL as the issuer parameter.
Several ID Providers (i.e. Google OpenID, WS02-IS, PingOne) provide different domains or path params for various endpoints in the discovery document. These providers may still adhere to the OpenID Connect Provider Configuration specification, but will fail to pass this library's discovery document validation.
To use this library with an ID Provider that does not maintain a consistent base URL across the discovery document endpoints, set the strictDiscoveryDocumentValidation parameter to false in your configuration:
This section shows how to implement login leveraging implicit flow. This is the OAuth2/OIDC flow which was originally intended for Single Page Application.
Meanwhile using Code Flow instead is a best practice and with OAuth 2.1 implicit flow will be deprecated*.
import { AuthConfig } from 'angular-oauth2-oidc';
@@ -88,7 +90,7 @@
Configuring for Implicit Flow
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.loadDiscoveryDocumentAndTryLogin();
}
-}
Implementing a Login Form
+}
Implementing a Login Form
After you've configured the library, you just have to call initImplicitFlow to login using OAuth2/ OIDC.
import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
@@ -135,7 +137,7 @@
This section shows how to use the password flow, which demands the user to directly enter his or her password into the client.
Please note that from an OAuth2/OIDC perspective, the code flow is better suited for logging into a SPA and the flow described here should only be used,
when a) there is a strong trust relations ship between the client and the auth server and when b) other flows are not possible.
Please also note that with OAuth 2.1, password flow will be deprecated.
-
Configure Library for Password Flow (using discovery document)
+
Configure Library for Password Flow (using discovery document)
To configure the library you just have to set some properties on startup. For this, the following sample uses the constructor of the AppComponent which is called before routing kicks in.
Please not, that this configuration is quite similar to the one for the implcit flow.
@Component({ ... })
@@ -88,7 +90,7 @@
Configure
}
-}
Configure Library for Password Flow (without discovery document)
+}
Configure Library for Password Flow (without discovery document)
In cases where you don't have an OIDC based discovery document you have to configure some more properties manually:
Fetching an Access Token by providing the current user's credentials
+}
Fetching an Access Token by providing the current user's credentials
this.oauthService.fetchTokenUsingPasswordFlow('max', 'geheim').then((resp) => {
// Loading data about the user
@@ -135,14 +137,14 @@
Configure
this.oauthService.fetchTokenUsingPasswordFlowAndLoadUserProfile('max', 'geheim').then(() => {
let claims = this.oAuthService.getIdentityClaims();
if (claims) console.debug('given_name', claims.given_name);
-});
Refreshing the current Access Token
+});
Refreshing the current Access Token
Using the password flow you MIGHT get a refresh token (which isn't the case with the implicit flow by design!). You can use this token later to get a new access token, e. g. after it expired.
Since 3.1 the library uses a default HttpInterceptor that takes care about transmitting the access_token to the resource server and about error handling for security related errors (HTTP status codes 401 and 403) received from the resource server. To put in on, just set sendAccessToken to true and set allowedUrls to an array with prefixes for the respective urls. Use lower case for the prefixes:
Feel free to write custom interceptors but keep in mind that injecting the OAuthService into them creates a circular dependency which leads to an error. The easiest way to prevent this is to use the OAuthStorage directly which also provides the access_token:
import { Injectable, Inject, Optional } from '@angular/core';
import { OAuthService, OAuthStorage } from 'angular-oauth2-oidc';
@@ -119,7 +121,7 @@
private state: Int32Array = new Int32Array(8); // hash state
private temp: Int32Array = new Int32Array(64); // temporary state
private buffer: Uint8Array = new Uint8Array(128); // buffer for data to hash
- private bufferLength: number = 0; // number of bytes in buffer
- private bytesHashed: number = 0; // number of total bytes hashed
+ private bufferLength = 0; // number of bytes in buffer
+ private bytesHashed = 0; // number of total bytes hashed
- finished: boolean = false; // indicates whether the hash was finalized
+ finished = false; // indicates whether the hash was finalized
constructor() {
this.reset();
@@ -891,7 +900,7 @@
private state: Int32Array = new Int32Array(8); // hash state
private temp: Int32Array = new Int32Array(64); // temporary state
private buffer: Uint8Array = new Uint8Array(128); // buffer for data to hash
- private bufferLength: number = 0; // number of bytes in buffer
- private bytesHashed: number = 0; // number of total bytes hashed
+ private bufferLength = 0; // number of bytes in buffer
+ private bytesHashed = 0; // number of total bytes hashed
- finished: boolean = false; // indicates whether the hash was finalized
+ finished = false; // indicates whether the hash was finalized
constructor() {
this.reset();
@@ -1067,7 +1072,7 @@
import { Injectable } from '@angular/core';
import { factory } from './js-sha256';
@@ -220,17 +228,15 @@
function decodeUTF8(s) {
if (typeof s !== 'string') throw new TypeError('expected string');
- var i,
- d = s,
+ const d = s,
b = new Uint8Array(d.length);
- for (i = 0; i < d.length; i++) b[i] = d.charCodeAt(i);
+ for (let i = 0; i < d.length; i++) b[i] = d.charCodeAt(i);
return b;
}
function encodeUTF8(arr) {
- var i,
- s = [];
- for (i = 0; i < arr.length; i++) s.push(String.fromCharCode(arr[i]));
+ const s = [];
+ for (let i = 0; i < arr.length; i++) s.push(String.fromCharCode(arr[i]));
return s.join('');
}
@@ -257,7 +263,7 @@
toHashString2(byteArray: number[]) {
let result = '';
- for (let e of byteArray) {
+ for (const e of byteArray) {
result += String.fromCharCode(e);
}
return result;
@@ -266,7 +272,7 @@
toHashString(buffer: ArrayBuffer) {
const byteArray = new Uint8Array(buffer);
let result = '';
- for (let e of byteArray) {
+ for (const e of byteArray) {
result += String.fromCharCode(e);
}
return result;
@@ -299,14 +305,15 @@