Recently started using Okta for A&A, but ran into some issues that I have been unable to resolve :
Trying to use Okta for OpenID connect authentication, along with Kong as an API gateway, using the OIDC plugin from Nokia.
Without disclosing too much info :
API is at https://api.example.com (served via Kong)
Frontend application is at fe subdomain of the same URL (didn’t supply full domain as new users can only post 5 links when creating a post…)
Backend services sit behind Kong at the given URL, and gets authentication via OIDC plugin on Kong.
Testing directly via browser works fine : https://api.example.com/test-application ← This redirects to Okta login, and then redirects back to the API call after successful login and retrieves the data as expected in browser.
Testing via react app doing a fetch does not : Fetch from the same URL in react gets a 302 to redirect from kong to okta. Then fails with the following error :
Access to fetch at ‘https%3A%2F%2Fexample.okta.com%2Foauth2%2Fmy-authorization-server%2Fv1%2Fauthorize%3Fresponse_type%3Dcode%26client_id%3DCLIENT_ID_REDACTED%26state%3DSTATE_REDACTED%26redirect_uri%3Dhttps%3A%2F%2Fapi.example.com%2Ftest-application%2F%26nonce%3DNONCE_DEDACTED%26scope%3Dopenid’ (redirected from ‘https://api.example.com/test-application’) from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
Suspect the issue is that the fetch is unable to redirect (since the whole application would have to redirect instead of just the current component). Any help / insight would be appreciated.
As a sidenote, I am trying to use Kong for the OIDC flow instead of the react plugin, as we would have many applications served via the same backend, and having one central point for the OIDC flow will simplify things in the long run.