How to implement Open ID SSO on Bubble?

Need help
1

Hello,

I am planning some project using Bubble. The app is to do sign-in and sign-up using a 3rd party OpenID SSO.
The workflow would be:

  1. Press Login Button
  2. Redirect to Sign-in Page of SSO
  3. Redirect back to app with token in URL.
  4. ? … that’s where I’m lost.

What’s the idea for implementing this?

Thanks

2

This depend of the service! If you use oAuth2 or a different auth process

3

Oauth2 that would be. The Authorization Provider will return a SAML token in the end right?

image
image927×555 125 KB

Once the user is redirected to the app with SAML token, that’s when I’m confused about what the action should be on Bubble.

4

Can you send a link to documentation?

5

You mean the SSO provider? There’s no formal documentation: I’m working with the team who built the SSO on the other side. They know about their SSO but they don’t know about Bubble. So they can’t advise me what to do once the URL is returned.

My Login button should be something like:
https://theauthprovider.com/connect/authorize?response_type=code&client_id=my.app&state=MYAPPxMYAPP&scope=openid%20profile%20offline_access&redirect_uri=https%3A%2F%2Fmyapp.bubbleapps.io%2Fversion-test%2F&code_challenge=hKcaXS1kfx5AWuIDcYdSpw4uEI4gW-HyVgFQOGD0WrE&code_challenge_method=S256

After user login to SSO it will return something like:
https://myapp.bubbleapps.io/version-test/?code=59DF34D42697718DE2B18EF38B1EBF4EF3CF0BDDECFBD35B628A8DC9E09D1AEE&scope=openid%20profile%20offline_access&state=MYAPPxMYAPP&session_state=cJeGUdEFlIxmmZagc5vS4AsVsfTjkiMGBqIDi2EzROc.96268F73CCCDC1696067D3CEA4DFDBBEF

Then the big question is what do I do with this URL and token.

6

The question is to know if you can use Bubble API Connector oAuth2 user flow instead or need to do thing manually. According to what I see yes, but it’s hard to know without the documentation.

7

I see what you mean. Let me investigate.
For my understanding: if I could use the API connector, then what replaces the typical “log in user” action that’s normally the conclusion of the login process using a local login?

8

Yes. You will use Login/Signup with social network
Using this, Bubble will create an user with the Auth from auth provider.
The auth provider need to follow oAuth2 process and have an endpoint for user currently authenticated and provide email and ID (but email can be use as ID too).

9

Hi, so we are using OIDC, and basically the workflow is:

  1. Click on login on bubble app.
  2. Redirect to SSO login page (openID)
  3. Login
  4. Redirect to Bubble app with Code and Session_State URL parameters
  5. Get Token and decode token to get user info
  6. Log in user on Bubble App
  7. Dump token in cache for other apps to use.

Now I can go all the way to step 4 but we have no idea how to handle 5 and 7 on bubble.

Similarly if the user already is logged in on another app, the workflow should be:

  1. Click on login on bubble app.
  2. Find valid token
  3. Login User

We looked at plugins but they only seem to work with public SSOs like Google, Twitter, but not with private ones.

We could go through backend API connectors and request login from backend but it wouldn’t be a true SSO.

Has anyone successfully implemented a private SSO on Bubble? Looking for a branch here.

10

OK so after a lot of research and effort, we made it work!

Here is how we make the SSO login using OpenID:

Ingredients
You will need:

  • The API Connector Plugin
  • The Seesion & Local Storage Plugin

SSO Workflow

  1. On page load check for an access token in the local storage.
    1.1 If token found in local storage, go to step 2.
    1.2 If token not found in local storage, go to step 4.
  2. Call SSO API to get user info using token.
  3. Check user info against user database:
    3.1 If user exists: login, (use global password) END
    3.2 If user doesn’t exist : signup, (use global password) END
  4. Click button to call SSO:
    4.1 User is redirected to SSO login page.
    4.2 User is types in username and personal password.
    4.3 User is redirected back to Bubble with a Code.
  5. Call SSO API to convert Code into access token.
  6. Store access token in local storage, then go to step 2.

How to build that up
1 Create your index page.
2. Create two SSO API calls:
2.1 A Get Access Token Call, requires Code Input and Redirect URL to your app.
2.2 A Get User Info Call, requires access token.
3. Create a reusable element to store all your SSO workflow (that’s easier to re-use).
4. Add workflow explained above into reusable element.

That’s pretty much it!

1 Like
11

This topic was automatically closed after 70 days. New replies are no longer allowed.