How to logout from embedded app on a different domain?

I have a portal with many apps using the same menu as a module. On that menu, i have placed a "Logout" button, which has a click-event handler, running a script -> utils.openUrl('https://portal.[domain].de/logout');

The URL is static and works, if the portal is running under the same domain.

Now i have some partners who want to put the portal login page on their own website, embedding as iframe (understood from the docs that this is one of the ways to embed an application)

So they open up by going to portal.partner1.com and they see login screen from retool portal and can login.

However, if they click to logout, due to the "utils.openUrl('https://portal.[domain].de/logout')" click event, the are redirected to this domain, instead of being redirected to portal.partner1.com/login

So, what is the best approach to keep the logout url dynamic, using an iframe to get the current URL of where the iframe lives?

Hello @whynot!

Thank you for the great example outline. Currently for your use case, there would be two ways for a retool iframe to be able to access information such as a URL from the website it is embedded in.

One option is to run a 'Parent Window Query' as outlined in our docs here.

You will have to build out code in the website where the iframe is embedded to grab the URL. Such as let currentURL = window.location.href;

You can also pass in the currentURL as a prop to the HTML/JSX/React component where the iframe lives in the website's code as you would with traditional JSX components. There are a number of resources online on passing data to child components. There is less support/documentation for this with retool unfortunately.

Once the retool app/iframe has access to the URL you can make the route passed in to utils.openUrl() dynamic using {{ }} to grab the current web page's URL which you received via the Parent Window Query.

With the URL stored in the app as either a javascript variable or in the app's state, it should be accessible to pass into the place where you have [domain] in your examples.

It should then be dynamic and reusable!

Not sure about how you would best handle the URL ending in either /logout or /login :sweat_smile: You would likely need another variable to control that an interpolate out with {{}} possibly a boolean.

1 Like