Bubble app as <iframe>: (A) How to auth? Bearer token? & (B) How to pass parameters from the <iframe>?

I am creating a Bubble app that will be called from an <iframe>.

(A) How can I authenticate this <iframe> call? Can I require a Bearer token from the <iframe>? If so, how to set up on the Bubble side?

(B) How can pass and receive parameters from the <iframe>?

Can you explain to me what the function of your bubble app will be?

Depending on your answer, you might want to setup some kind of NONCE token or just have a User sign up.

1 Like

The user will already be authenticated by the site calling the Bubble <iframe>.

A) How do I authenticate the caller of the iframe? e.g. pass a Bearer token? If so, how to confirm/process that on the Bubble side?

B) How do I pass parameters into the bubble iframe? e.g. user info

You can’t pass a bearer token but you can pass a nonce token.

If a User is already authenticated (by having an account and signed in) what is the purpose of such token?

If you need to send to bubble from the host of the iFrame, you would need to figure out how to send data from your host. But if a User interacts with your iFrame like an app itself, I don’t see a reason in sending data to Bubble, since the user is technically, actively interacting with Bubbles and your apps server.

I guess I don’t understand how/what you mean by “nonce token”. I have looked it up (Cryptographic nonce - Wikipedia), but it seems abstract–is there an applied way to refer to this?

The user is authenticated on Site A. (The site that calls the iframe.)

The Bubble app is Site B. (Displayed to user on Site A as a sub-component of a larger app.)

I would like the user to be able to securely interact with Site B (via bubble iframe) without having to re-auth.

The solution I see is: generate a bubble user token that would be stored (through API) in the Site A DB.
Then in the request add the user token. It takes into account the privacy rules that you have setup, so if the user can’t access the data, he will not be able to see it in the iFrame.
It will depend on how the DB interact between both sites

Is this secure?

I am concerned that somebody could spoof this…by making a fake Site A.

The user is login to Site A, so I do not see your concern about a fake site A

I see. That’s super easy then. Do you have capability to make api calls on site A? if so, I can help you create a bubble bearer token for the user where that’s all you’d call and interact as that user in bubble.

@doug.burden

Are you asking if SiteA can make an API call to another site?

Or, if an API call can be made into Site A?

SSO to authenticate the Bubble user from your App DB/auth. Your app should be the SSO provider. When the iframe open, Bubble will authenticate the user with the SSO. If the user is already logged in to your site A, it will be authenticated in site B (Bubble)

Can site A make calls out

@doug.burden Yes

Yes, @doug.burden , this is perfect.

I would love your help.

How can we connect?

Hello how are you? I have the same doubt.

Were you able to implement any solutions? It worked? Could you share?

You could post a message to the parent window instruct the main window to go to the google login effectively leaving the iframe and have the redirect be back to your app

You would not be using the social login feature in this case but handling the token management yourself.

Hi, could you explain a bit more? how this would work,
I am loading a iframe(containing my bubble app) on an external website. I want to authenticate users with google o auth or normal email, inside the iframe itself.
How would I do that with SSO?