React MFE (Micro Front End) - API Auth


We are developing a new internal platform that consists of, at a high level, a React micro front end that will interact with a few APIs. We are using the Auth Code w/PKCE workflow using both the Id token and token to be passed along to the APIs for auth. My question is, what is best practice as far as Okta Auth Servers? Should we have a separate Auth Server for each API? If so, how does that work when we’re using this workflow? Would we need to re-authorize the front end user each time they hit a different API? I can see this getting messy.



Would you be elaborate a bit more on your use case and what you want to achieve?

1 Like

Sure. I’ll describe our architecture in a generic way.

We have a React front end that is actually 4 micro front ends, organized by domain. 1 of which is actually the main “container”. The other 3 I will call MFE A, MFE B, and MFE C. MFE A and B, and C each consume a separate API. So MFE A consumes API A and MFE B consumes API B, etc.

For user authentication to the application, we are using Authorization Flow w/PKCE. Users login with their email, password. We have configured the access_token, id_token, and refresh_token on the Authorization Server. Currently, we are using just 1 Auth Server. It has been proposed that we actually create a separate Auth Server for each API. So 3 Auth Servers, 1 each for API A, API B, and API C.

This complicates things since we are currently passing the access_token along to the APIs that was minted when the user initially logged on. If we configure each API to have its own Auth Server, then we will need 3 separate access_tokens to pass along to the APIs for authentication. When the user browses to each micro front end, they will need to authenticate with each Auth Server. Obviously, not ideal. We can’t use the Client Credentials flow for the APIs since our front end is considered “public” and could not reliably protect the client credentials for each API.

I’m not really sure this is feasible or ideal but wanted to get someone’s opinion on it. If I am still unclear please ask specific questions.