How to login both Auth servers - Org and Custom using OktaAuthService in Angular

In our app we need to get logged in to both Authorization Servers:

  1. Okta Org Server - to access Okta APIs for user management in our app (add / edit, etc).
  2. Custom Server - to protect our API/resources server.

With available OktaAuthService class for Angular we can authorize to one of them only. Though, we need to access APIs from both servers.

Please suggest a solution.

Thanks a lot,
Andy

As long as you have an active Okta session, you should be able to request tokens from both the org and custom authorization server.

It looks like each OktaAuth object has one issuer value. I wonder if you can try creating a second one with a different issuer value?

Hi Warren, thank you for reply.

Yes, OktaAuthService logs in to single server only, defined by ISSUER. And yes, I can create 2 instances of OktaAuthService, each with own ISSUER and actually that normally logs in to both server. Though, that requires me to popup window for 2nd login, otherwise its redirect replaces SPA. So, once logged in by 1st instance from SPA, I launch 2nd window and logging to 2nd OktaAuthServer, here I retrieve tokens and push them to parent window via Window.PostMessage(), after that this window closes.
Its minor inconvenience to experience 2nd window flip, though admin can live with it.

While working on this solution, I found couple interesting things in OktaAuthService component:

  1. Both / all instances of this component use same browser’s LocalStorage key (‘okta-token-storage’) to store just received tokens.
    So, last logged in instance - replaces access/id tokens in this storage, which breaks work of 1st instance. I workarounded that by storing tokens of 1st instance in app’s global var once it has logged in.

Do you consider this as a bug?
It can be easily fixed by appending okta-token-storage by unique ID of the instance.

  1. Out-of-topic question - likely a topic for new ticket.
    Does OktaAuthService support automatic token refresh? They expire, and there is no any method to refresh them. I also, did not find how to implement token refresh via Okta APIs for SPA app / PKCE.

Thanks a lot for your support,
Andy

For your 2nd instance of OktaAuth, can you try using the getWithoutPrompt method since you don’t need to prompt the user to login again?

You may also need to change the storage key for the 2nd instance of OktaAuth so it won’t overwrite the tokens as you described.

It looks like it supports automatic token refresh by just fetching a new set of tokens.

By default, the library will attempt to renew tokens before they expire. If you wish to to disable auto renewal of tokens, set autoRenew to false.
GitHub - okta/okta-auth-js: The official js wrapper around Okta's auth API
GitHub - okta/okta-auth-js: The official js wrapper around Okta's auth API