I am developing a feature which uses the same Okta session but on two different domains. I login to Okta on one domain, an iframe to another domain loads where a user would be prompted for their Okta login using the Okta Sign-In Widget. I want to bypass the sign in on the second domain and I am able to do that by using postMessage to the iframe with the first domain’s okta tokens and then receiving them on the login page of the second domain.
On the login page, I listen for the message from the first domain, and then use oktaAuth.tokenManager.setTokens(tokens)
to set the tokens in the iframe. The problem is, once I set the Okta tokens, I want to redirect the user to a separate page. I do this with react-router-dom’s useHistory push(path)
method. Doing this after setting the tokens gives me the following error:
TypeError: Cannot read property 'remove' of undefined
I get this because when the Login component unmounts, I remove the widget using widget.remove()
. After looking around, I found the cause of this to be because I am attempting to remove the widget before it has fully rendered and therefore when widget.remove()
is run, portions of it are not declared and are undefined.
A solution to this is to add a timeout around the history.push()
setTimeout(() => {
history.push(path);
}, 100);
but I don’t like this solution. I have also tried performing this path change in an oktaAuth.authStateManager.subscribe()
method, but that too is called too quickly and a timeout would still be needed.
Has anyone come across this before or has any recommendations I can try? I am using React, react-router-dom, okta-react, and okta-signin-widget. Thanks!