My embeded Retool app appears for a sec and then displays login screen

App Building
1

Hey,

I am working on embeding Retool app inside Zendesk. But before that I wanted to test things out on localhost, so I created this simple, plain html page

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <iframe
      src="{embed url}"
      width="100%"
      height="800px"
    ></iframe>
  </body>
</html>

and opened this file in the browser. The app appears for a moment, I can see components and the content. The app just display my user information and I can see that I was logged correctly. But then after a brief moment it displays login page.

After refreshing the page, app does not loaded anymore. I can only see "Error: unauthorized" text for a moment and then login screen.

What can be wrong here? I am pretty sure I tested this setup a month ago or so and it was working fine.

2

Hi Michal!

Happy to help here. By any chance, does your Retool app have any user-specific info (like current_user), note components or image components with images from Retool Storage? If so, those won't allow a public app to work.

Also, here is our doc on embedding apps (and Public Apps) in case it's helpful!

3

Hey @victoria thanks for the response.

Indeed my app is using current_user, but I am a bit confused about this public apps. My app is not public. It is internal app, which I want to access embedded somewhere else. That's why we used Retool Embed, created secure embedded url on the backend connected with that user.

I am not sure what is the point of creating this embedded url for given user and then not being able to access user information on the retool app.

4

Ah, gotcha! You should definitely be able to use current_user with an Embedded app.

https://docs.retool.com/apps/external/quickstarts/embed#control-access-and-app-behavior-with-metadata

To confirm, have you been able to successfully use Retool Embed with any other apps (e.g. an empty app with a text or button component)? I want to make sure we're investigating the right stage of your applications!

I have seen an Unauthorized error show up because the user was using an API token without the Embed scope (or trying to use a prod token on a dev instance). Just to double check, do you see the App:Embed scope when generating an access token for your app?

5

Yeah, the access token was generated with App: Embed scope. I did some changes to my app:

  • removed key value component which was displaying current_user info
  • removed header which was also using current_user to determine links visibility

After above changes the app is loading. I later added some components and used queries to load data.

So it looks using current_user is the problem. But this should be allowed.

6

Glad you're unblocked for now - thank you for sharing. It definitely should be allowed! And it looks like it's working when I test current_user in an Embed app.

Did you see any errors in your browser console when you were getting the "Error: unauthorized" error in the app? And how were you using current_user (e.g. {{current_user.lastName}})?

7

I had key-value compoent displaing current_user and also I had a shared module, a header with navigation that was using current user's groups to display certain links or not.

8

Curious if there has been any movement on fixing this issue? We're running into the same thing when using current_user.sid to toggle UI features depending on if the user is a guest or editor.

9

Hey @Aslan_Goldenhour @Michal_Mlozniak! Taking this one over. I'm unable to reproduce the issue, referencing the current_user object (and it's properties) doesn't cause any login issues in my embedded app. Mind sharing some more details on how you are utilizing this so I can test some more? Thanks!

10

Hmmm. Thanks for the note and investigation. I'll see if I can get to the (more accurate) root issue and will revert from there.