Redirect issue with signInWithRedirect in react App embedded within ASP.NET MVC application


We have the following applications
a) We have ASP.NET MVC 4 application
b) We have react application embedded inside ASP.NET MVC page (in the razor view)

We have the .NET MVC app integrated with Okta and login works with it. We get access token and id token for .NET webapp. We needed the embedded react app to get the access token. here we had 2 options

  1. have react app call a service GetAccessToken on .NET MVC app to get access token
  2. have react app login itself with hosted Okta to get access token.

We know #1 above works and can be used. We wanted to delve into whether we can do the access token without sharing it from the .NET MVC app. So for #2 we did the following:
(i) we configured react app as SPA app in Okta (we used the code from samples-js-react/okta-hosted-login at master · okta/samples-js-react · GitHub as starting point)

(ii) we then added javascript code to trigger react login if .NET MVC app is authenticated
if (isLoggedIn && !authState.isAuthenticated)

(iii) we then added javascript code to trigger react logout if .NET MVC app is logged out

so now the login flow is as follows

.NET MVC App → redirects to okta hosted login → .NET MVC call back post login → triggers redirect to okta hosted login for react app → returns to react app call back (we understand there is double redirection here)

The issue however is that we are not seeing the redirect happenig as we configured in this embedded scenario.

const login = async () => {

This above code works to redirect properly when it is tested in isolated react app with hosted Okta login page. However when we test it in the embedded app, the redirection is not happening as expected. Could you please let us know how we can make it redirect to destination page of our choice dynamically.