Goal: Embed a Retool application into our existing React app, use a custom auth flow that exchanges SSO generated JWTs for internal authorization system PATs to authorise further requests to our internal HTTP APIs
We have an enterprise account, and are in the process of embedding some retool dashboards into our existing React webapp.
We have a Resource in retool which uses a custom auth flow to trigger sso jwt refresh, and to do the exchange for internal PAT.
This works correctly when using the dashboard directly in retool, however fails when a user uses the app via a single-use Embed link.
Steps:
created REST API Resource with custom auth flow
for testing purposes, set the Auth Trigger to Every query run
Validate that the exchange works login and custom token exchange work by using the Test auth workflow and Test auth refresh workflow buttons
create a new Retool app
add a new query that uses that Resource.
add a component to the app that uses the query, and dispalys some information form the response to confirm success
At this point, as an owner/editor of the app, all works as expected
credential exchange for our internal PAT works as long as the user has an existing retool SSO session
if the user then separately refreshes their retool SSO session by visiting retool directly then the embeded dashboard starts working again
If Auth trigger is set to run on a timeout, it never runs, and all retool queries fail with a message along the lines of sso last refreshed <lots of seconds> ago
this behaviour is consistent for an auth flow using OAuth2 (generic) or the OIDC setup documented here
Potentially relevant:
Retool SSO Trigger Login Automatically is enabled
Run this custom auth workflow without prompting the user is enabled for both auth custom flows
we use Auth0 as our IdP
our Retool sso is set up to use a different Auth0 application that our parent app
It looks like this post makes it explicit that we cannot use Retool Embed with shared SSO:
Could someone confirm that this is what's happening to us here?
If so, could you update the docs for Retool Embed to make it clear that SSO will not work? Setting up the BE to use Retool Embed was very quick and easy, but attempting to work out why it broke when the sso sesion expired was not fun.
Are we expecting the shared SSO when using the share/embed link to break in the future?
Hi @dbb! Welcome to the community. I appreciate the detailed documentation you've shared here - it helps a ton.
My understanding is that shared SSO should work without any issues in the sense that your React and Retool apps will share the same authentication state. To this end, the SSO_TRIGGER_LOGIN_AUTOMATICALLY environment variable tells Retool to first check for an existing auth context with Auth0 instead of kicking off a manual login process. This should hold true even when the parent and child authenticate with different applications, as long as they share the same IdP. From within Retool, you can access all session information with current_user.metadata.
We start running into issues whenever the embedded app initiates a login flow with Auth0, as outlined in the post that you shared. The quick fix is is to disable clickjacking protection in Auth0. You can find this toggle in the "Settings -> Advanced" menu.
Alternatively, you can offload the responsibility of refreshing the SSO session to your parent app and let the embedded Retool app focus on retrieving your internal PAT.
Depending on the security needs of your org, you can also define APIs in Auth0 and automatically get PATs when you initially authenticate.
Thanks for the reply, and the hints, Darren.
I'll see how the logins behave with clickjacking protection disabled when I'm back from leave.
That might help with using the RetoolEmbed route.
When we use the iframe embed link that's generated by the share button in the retool edit interface, the OIDC based auth flow works (and manually adding the user to the appropriate retool permission groups), although it fails the first time. Re-logging into the parent application then allows the embedded retool app to work.
We haven't experimented much with using the data input in the ReactRetool component, or otherwise messaging between the parent window and the iframe embed.
Ideally we'd want the Retool application to be usable directly through Retool (primarily for editing, but also for internal users), as well as when embedded in our react app.
Presumably we'd need to make a parent window query inside the auth flow to look this up? Or is there some way that we could define a Magic Variable that could be pickup up by the api Resource?
Is there any detailed documentation on including data from the parent app in an auth flow?
Of course! I'm fairly confident that disabling the clickjacking protection on the Auth0 side will solve your immediate problem.
For further development, the specific pattern that I'm thinking about shouldn't require passing data into the Retool component. It should work something like this:
Parent app authenticates with Auth0, creating a new user session.
Child app authenticates with Auth0 on initial render, as specified by SSO_TRIGGER_LOGIN_AUTOMATICALLY environment variable. Note that different Auth0 apps share the same user session by default, so it will return information about the existing session without requiring user interaction.
Child app references the session data using the %USER_OAUTH2_ACCESS_TOKEN% or %USER_OAUTH2_ID_TOKEN% magic variables when configuring resource queries. See documentation here.
Child app can alternatively access the session data, including custom claims through current_user.metadata. This is where the Auth0 APIs resource that I mentioned previously can be useful.
One of the important steps here is that the parent app completes authentication before rendering the embedded Retool app! I can work on putting together a quick demo of this, if you'd be interested. Regardless, I hope this helps! Don't hesitate to follow up here if you have any questions.
I appreciate the detailed documentation you've shared here - it helps a ton.
