Multiple Client IDs in SPA

Questions
1

We are building an SPA where there are multiple cards(UI) and each card on click is a different route. Now the each route needs to be protected by okta but each route has a specific set of users, so we created a dedicated client id(Application in OKTA) for each route. Now we are stuck and facing following issues.
i. Security component in react okta package allows only one set of okta credentials.
ii.When the user clicks the cards, we want different redirect URIs for each card but we have only one implicit callback.

I am sure we are not using a right design patter. Any help will be highly appreciated.

2

you can go down to auth-js https://github.com/okta/okta-auth-js and use it to do your calls to Okta, instead of react.

As for different redirect URI - I don’t think I understand the problem. Each application may have it’s own callback, or all of them may have the same one, which point back to your SPA. If you do your own Okta API calls you can save the card id in state parameter during the call, as it’s coming back from Okta after successful authn/authz

3

Thanks for the response.
We have a landing page …where everybody in the org will have access…
now this page has say 2 cards(UI) C1 and C2. The user clicks C1 now this must trigger another okta flow(we have created three clientids for Landing Page, C1 and C2) and once he goes through the Okta challenge he must be routed to a particular Route in application. This is becuase C1 and C2 has different security requirements. Does that make sense? For some reason I am feeling we are using okta in an incorrect way? Feel free to correct us if we are on the wrong path.

4

it’s hard to judge your design not knowing what requirements are, so I’ll skip your last comment about you using okta right or wrong…

as for the first part:

  1. user won’t be challenged by Okta, as user is already authenticated by Okta after you landed on your start page (you said it’s also a protected application)
  2. if you are trying to protect your routes for different users, it’s easier to achieve by assigning users to different groups in Okta (groupA, groupB), then include this information in id_token when you land on your landing page, and use the token inside your SPA, for your application routes to check the token for the groups the user belongs to and inform them if they are not allowed to access this page