Angular 9 - nrwl.io Monorepo

Questions
1

Hello,
I am having trouble implementing Okta in a production application. This Angular 9 application is installed in a nrwl.io monorepo.
I am able to sign in via Okta’s hosted sign on. After a successful logon, I can see the token in local storage. When I attempt to call an API, ‘oktaAuthService.isAuthenticated()’ returns false despite the existence of the token. The targeted api receives a request with a null ‘HeaderAuthorization’.
I have successfully implemented Okta in an Angular 9 application and verified I am getting an auth token on http headers as I should outside of the monorepo.
Do you know of any issues utilizing Okta within a nrwl.io monorepo?

2

Are you using async/await with this call? For example:

export class AppComponent implements OnInit {
  isAuthenticated: boolean;

  constructor(public oktaAuth: OktaAuthService) {
  }

  async ngOnInit() {
    this.isAuthenticated = await this.oktaAuth.isAuthenticated();
    this.oktaAuth.$authenticationState.subscribe(
      (isAuthenticated: boolean)  => this.isAuthenticated = isAuthenticated
    );
  }
}
3

I am indeed using async/await. But the examples I have seen do not subscribe to ‘authenticateState’ in the ngOnInit function, instead my call was in the constructor. I moved the call to ngOnInit hoping it might make a difference. It did not unfortunately and honestly I did not see how it could but I have been trying for several days so took the shot.
Thank you for checking!

4

It seems as if Okta does not see the localStorage. As soon as I login via the hosted sign on, Okta reports isAuthenticated = false.

5

I have been reviewing the state of things. I now realize when I authenticate with the app outside of the monorepo I see the following keys in localStorage.

  • okta-pcke-storage
  • okta-cache-storage
  • okta-token-storage

When I authenticate the application in the nrwl repo, I see the following keys in localStorage.

  • okta-pcke-storage
  • okta-cache-storage

So the crux of the issue is the okta-token-storage key / value is not making it to localStorage when I authenticate in the monorepo. And that is why ‘OktaAuthorizationService.isAuthencated’ returns false.
Sorry I did not see the missing key earlier!
I am hoping this clarification leads to a solution. Thank you for trying!

6

@mraible - This morning I’ve tried a few things without luck. I decided to login to Okta via an Angular application that I receive a token. And then login to Okta via an Angular application (nrwl / nx monorepo) that I do not receive a token. I then captured both ‘System Api Logs’ to see if there are any differences. There are differences between what is occurring on the server when these application authorize.
My authorization module init follows. I am using the default authorization server in both applications.

OktaAuthModule.initAuth({
issuer: ‘https://dev-379609.oktapreview.com/oauth2/default’,
redirectUri: ‘http://localhost:4200/implicit/callback’,
clientId: ‘’,
pkce: true
}),

The two logs follow. These events include my verification as admin so I can view the logs.

Successful token receipt:

severity event_type display_message
INFO user.session.start User login to Okta
INFO system.sms.send_factor_verify_message Send second factor auth SMS
INFO app.oauth2.as.authorize.code OAuth2 authorization code request
INFO app.oauth2.as.token.grant.access_token OAuth2 access token is granted
INFO app.oauth2.as.token.grant.id_token OAuth2 id token is granted
INFO user.authentication.sso User single sign on to app
INFO policy.evaluate_sign_on Evaluation of sign-on policy

Unsuccesful Token Receipt:

severity event_type display_message
INFO system.sms.send_factor_verify_message Send second factor auth SMS
INFO user.authentication.auth_via_mfa Authentication of user via MFA
INFO app.oauth2.as.authorize.code OAuth2 authorization code request
INFO policy.evaluate_sign_on Evaluation of sign-on policy
INFO user.session.start User login to Okta
INFO user.session.access_admin_app User accessing Okta admin app

@mraible - please let me know if you see anything that makes sense as to why I am receiving a token in one instance but not the other. I have repeatedly reviewed the code. I am essentially doing the same between the two (I believe).
Thank you!

7

I’m sorry, I don’t know what the problem could be. I’ve never used a nrwl.io monorepo before. I’m fairly confident that if you configured two separate Angular CLI apps to talk to Okta (with different client IDs), you could have SSO between them since they’re using the same authorization server. I’m not sure why this doesn’t work in your setup.

8

I know it’s hard to understand via forum posts. I am actually using the same client id for both as one of the apps is just a proof of concept.
Maybe that’s a concern using two apps on the same ClientId. I thought it was only a reference to configuration. I will setup another ClientId just to rule out that fact I am using a single for two apps. Despite one of them being a throw away POC.

9

@mraible,
For the record that was not it. I created a new client id on the authorization server. I still did not receive a token.
I will look for feedback on the support ticket.
Thank you!
Don

10

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.