Handling OAuth Callback in Embedded Web Component Without Iframe (Okta + React Routing)

Question

I have a service written in Vite, and for authentication, I use Okta (with the library "@auth0/auth0-react": "^2.2.4"). Some pages work without requiring the user to be logged in, while others require authentication. Everything functions as expected.

We need to embed our service into other websites. Due to company restrictions, this must be done without using an iframe. Therefore, we decided to use web components with Shadow DOM. We developed a working solution, and when the embedded page doesn’t require authentication, everything works fine.

If the host website doesn’t use routing (for example, a React app without a router) and the page requires authentication, it also works fine. However, issues arise when the host website has routing (which most websites do). In this case, it fails because, after the user is redirected from Okta back to the host website, the host tries to handle the /callback route. Since the host website doesn’t have a route matching /callback, it breaks.

The question is: how can we handle this situation?

I tried adding a /callback route on the host website that navigates back to the main page containing the embedded service. However, this didn’t solve the problem. When I attempt to interact with the embedded service, it immediately redirects me to the Okta login. Okta recognizes that I’m already logged in and redirects me back to the host website, creating an infinite redirect loop.

Interestingly, if I first log in to my standalone service and then refresh the page on the host website, everything works fine. I was thinking about using postMessage and tried to send messages to my web component, but I don't know how to use that data.

I need to find a solution to either:

1. Pass the callback directly to the web component, or
2. Allow the web component to detect whether the user is authenticated on the host website.