angular-oauth2 | AngularJS OAuth2 | OAuth library

Since this turned out longer than expected here's a tl;dr:

My Angular application is not sending the bearer token it receives from Azure AD to the API and thus the API returns a 401 response. The setup is based on a blog post explanation for how to implement it. The sample application mentioned in the blog post works with my Azure AD setup and correctly provides the token on API calls.

Long version:

I'm working on a relatively simple Angular based front-end with a Spring Boot back-end. Front-end and back-end communicate via a REST API. The application is deployed on Azure Spring Cloud. For user Authentication the application requests and receives a bearer token from Azure AD. It should then transmit this token with each REST request to the API.

I followed this blog post to setup the necessary changes. Azure AD does deliver a valid JWT token.

My problem is, that the token is not passed on to the back-end in the REST calls and thus authentication fails and a 401 status is returned.

Here are the relevant configurations I made on the front-end side (based on the descriptions in the blog post linked):

app.module.ts

I'm using OAuth 2.0 to retrieve a Token for my User in my Angular Application. I use the popular lib angular-oauth2-oidc for handling the OAuth Flow. So in my AppComponent I set up the oAuthService from angular-oauth2-oidc and then initiate the oAuth Flow in my Login Component by calling initCodeFlow(). The User is redirected to enter his credentials and afterwards he get's redirected to me and I recieve the token in the AppComponent and put it as next token into my DataService TokenSubject.

But now I want to make an API call with that token in the header in my MainPageComponent. So I subscribe in my MainPage to the TokenSubject and when I recieve the Token the code in the subscribe block get's executed.

But what if the token get's send to me quicker than the main page builds up? Then I'm not yet subscribed to the TokenSubject in the Main Page when the next Token value is emitted by the AppComponent. I'm not sure, but my main page sometimes did't open up and I think this is probably the reason.

What's the best way to make sure that the Main Page is subscribed to the TokenSubject, before I emit the TokenSubject?

My AppComponent:

I am using angular-oauth2-oidc in my project. The Openid (identity) provider uses self signed certificate. The Identity provider is not in our control. When we configure the identity url and try login from angular we always get an error.

I went through several questions like 1 , 2 but I don't know how to make my app work.

Problem: When I sign in 1st time, I do not get Bearer token and hence my SettingConfigService fails with 401, if I refresh the page, I get the token from this.oauth.getAccessToken() because now the token is in localstorage.

I am using oauth lib for login. Here is the modules and libs I have created.

App.module

I am attempting to integrate the angular-oauth2-oidc library with Auth0 and Github. Feel free to keep in mind I have selected all scopes(just to be safe), from the Auth0/Github UI side of things.

I am using the latest features that angular-oauth2-oidc has to offer.

1. For instance, I am using code flow i.e.:

I'm using angular-oauth2-oidc's Code Flow in an Angular application. It's working all good, however I cannot read the user claims.

I tried using this.oAuthService.getIdToken(), this.oAuthService.getAccessToken(), this.oauthService.getUserInfo() but I don't seem to get any valid JWT that can be decoded using regular methods.

In my backend API (.NET Core) I use the access_token to query the TokenIntrospection endpoint and I can see all the claims properly.

Relevant info:

I want to use the code flow with PKCE in my Angular SPA and for convenience I use this library: angular-oauth2-oidc

If you click on the link, it says that with this configuration you will use the code flow with PKCE:

My Authorization Client: Angular, Resource Server: Java Spring Boot, Authorization Server: Azure Active Directory

I am using oAuth2 to login via Angular via the PKCE Authorization Flow and then pass the token to the back end. I am able to access the token in my back end via the Authorization Beaer Header, but when I go to use that token to access Microsoft Graph API, I am getting an Invalid token exception.

com.microsoft.graph.http.GraphServiceException: Error code: InvalidAuthenticationToken Error message: CompactToken parsing failed with error code: 80049217

I am not sure why it is causing this error, because its valid and I can verify via https://jwt.io/ and access my other protected api in postman with the token.

AuthProvider.java

In this Minimal Reproductible Example I don't understand why the reducer has something (we can observe it in the ReduxDevTools) but the selector puts undefined in the component.

Could someone have keys to share about this behavior?

Here are the parts of the MRE:

• actions/index.ts