Bubble.io x Circle.so Single Sign-On - (forum or community software)

maria3 · 2021-01-13T15:36:47.236Z

Thanks for this! Super helpful! I was pulling my hair out getting an error {“statusCode”:400,“message”:"Invalid client_id: XXXXXXXXXXXXXXX} message, which seemed to magically resolve when I published to live. Is there something going on here where the integration won’t work in the development version?

Also – might be worth putting a little asterisk not to disable sign-on via circle until AFTER you have the SSO working (I locked myself out because I turned that off before the integration was working, then couldn’t sign in to change the circle settings I needed to to get it to work!)

joe5 · 2021-01-15T21:39:48.513Z

great idea Maria! Just updated the tutorial doc with this!

As for the first issue - I am not sure it’ll be able to be run until your new SSO settings are published to the live app. So that’s correct! and is an annoying quirk

gbenchanoch · 2021-06-28T19:51:24.843Z

Hi! Has anyone successfully integrated Circle as a page within their Bubble app by utilizing this SSO process? Also, are there negative effects in terms of SEO for utilizing this third party option?

joe5 · 2021-06-29T00:49:51.053Z

Hey there! Have you used their embed option? If they’re logged in on the bubble side it should display their user info on the Circle side if you’re embedding inside your own bubble site.

SEO downsides would be a good question for the Circle team!

gbenchanoch · 2021-06-29T14:57:35.068Z

Hi! I just managed to embed the entire community onto a page. Now I just need to figure out how to limit space access based on Bubble user type. Thanks @joe5 !

gbenchanoch · 2021-07-12T20:45:52.784Z

Hello again!

I set up the SSO but it just won’t work. Is the SSO supposed to automatically create Circle accounts for anyone that signs up for my bubble app? Will it log them in once they are logged in to my bubble app? I have walked through the set up process 3 times and have found no errors. Any help would be appreciated!

EDIT:

It randomly started working 6 hours later… However, users are now asked to fill out profile information despite filling out their full name and automatically being assigned an avatar.

gbenchanoch · 2021-07-17T01:22:18.534Z

Is it possible to add the circle community to the Bubble site map manually to capitalize on the community links for SEO?

kngf222 · 2021-07-19T01:08:54.432Z

Did you figure this out? I want to allow all users to view public spaces on Circle.so, but only my paying Bubble members to see the private spaces on Circle.so. This would be super awesome if this SSO option recognized the account type/if the user is paying or not (I have a field that says “paying” and it is a text field, it will be either “yes” or “no”), that way the onboarding to Circle.so is just that much smoother.

gbenchanoch · 2021-07-19T05:39:10.801Z

I was able to add users to specific spaces based on bubble data conditions by utilizing the circle API.

Here is the API doc: https://api.circle.so/

Here are the steps I took:

Create an API key in circle. Create a new API in the bubble API connector plugin and add this as a Shared Header for all Calls parameter titled “Authorization” and paste your key as [Token “your key”]
Run the Community Index call to get your community ID (needed for all other calls) write this ID down.

It is a GET call with the following url: {{host}}/api/v1/communities

Note that {{host}} should be your circle return URI. For my it is https://community.”my domain”.com since I set up a custom domain.

Run the API Space Index call to get the IDs for all of your spaces.

It is a GET call with the following url: {{host}}/api/v1/spaces?community_id={{REPLACE THIS WITH YOUR COMMUNINTY ID FROM STEP 2}} (don’t keep the {{}} either)

For the closed spaces, write down the IDs and you will use them later to add members. I find it best to click the “Show raw data” button at the bottom of the results when you first initialize the call to have a nice text to copy and save in Word.

Set any spaces that you want to be open to all users as automatically joined in your Circle settings. No need to add members to these spaces via the API.

Set up the Add Member to Space call as an “action”

This is a POST call with the following URL: {{host}}/api/v1/space_members

add the following parameters:

email (use any Circle member email for initializing) UNCHECK private.
space_id (pick any of your spaces IDs for initializing) UNCHECK private.
community_id (set to your community ID from step 2 and leave it as private)

This is the action you will use to add members to specific spaces. It will appear in your Bubble workflows since it is an “action” and you can set the email and space_id dynamically because you unchecked the “private” button.

There are a few other useful calls. I am setting members tags via the API. I am also inviting members upon sign up via the API so that I automatically have their names and emails (no need for another Circle sign up). I thought this was done automatically via SSO, but it isn’t.

I hope this helps!

kngf222 · 2021-07-19T06:26:22.422Z

Wow thanks for the detailed instructions! I’ll give it a try and start implementing it now. If I come up with any issues, I’ll let you know. Again, thanks so much, you have no idea how helpful this is!

kngf222 · 2021-07-19T09:05:53.438Z

Thanks for the awesome instructions! This was my first time working with the API Connector in Bubble.io and I got it to work on the backend when initializing which was exciting. I added another API call called “Create Member” (i.e. inviting a member) and realized I can just add the member to the space_id in that call instead of using a separate “add member to space” call. So, when I onboard my users, they will be created as a member in Circle while being added to private spaces. If I ever create a page in the future on my main domain on Bubble that has a list of all the spaces (including private ones) and I have some need to use the “Add Member to Space” call, then that’s when I will use it.

I have a question on how you did member tags. Are you able to add multiple tags at once or only one tag? I’m not really sure how to add more than once at a time. I added 3 keys called “member_tag_id” but in the action, it only shows one entry area (although it didn’t get upset or show an error when I had multiple tag IDs for the dynamic data).

Also, did you have any issues inviting members upon signing up? As you’ll see below, I received an error code when in Dev mode (haven’t tried in live mode).

Also, I am running this in Dev mode and received this error when trying to add create/invite a new member (which also encompasses the adding of the user to a Space as mentioned above). Is this occurring because I am trying this in Dev mode, because it’s only been 15 minutes, or some other reason?

image2038×863 48.8 KB

gbenchanoch · 2021-07-19T12:56:17.598Z

You are very welcome I was also planning to add members to spaces upon invite, but I found that it just didn’t work. Member tags only takes a single ID so you have to use multiple workflows if you want to add multiple tags. I’m glad you were able to get this working! My only two concerns right now are that Circle is not setting the avatars of my users and how to have my Circle links help my Bubble SEO.

kngf222 · 2021-07-19T17:53:45.734Z

I think the issue is that I am not on the professional or enterprise plan yet. I have a call scheduled with a person at Circle in 30 minutes so I was going to wait until after that to pay for Circle.so. I hope that is the issue.

Are you on either of these Circle.so payment plans ?

gbenchanoch · 2021-07-19T18:23:02.919Z

Yes - the Bubble SSO requires the professional plan.

kngf222 · 2021-07-19T19:05:47.556Z

Great just finished the call and paid for Professional so now it should work.

kngf222 · 2021-07-21T02:47:10.354Z

Unfortunately, I am still encountering the 500 Error even after being on the Professional Circle.so plan for over 24 hours (you mentioned yours started working after 6 hours) when trying to do the SSO login integration and still receiving the 500 Error for the API call “Invite Member”. I have no clue what the issue is and the circle.so support team says I have set everything up correctly for the SSO login. Would you be able to take a look at these screenshots and see if I have set anything up incorrectly for the SSO login integration for Circle x Bubble.io?

image857×1180 15.8 KB

Circle.so screenshot of SSO settings page821×1260 32.6 KB

SSO Login workflow1113×555 17.6 KB

gbenchanoch · 2021-07-21T03:09:27.791Z

The Invite Member API call is something you need to set up in your API connector. Have you done that? You can DM me if you’d like

josh24 · 2021-08-05T02:24:43.168Z

Hey, thanks for the write up.

All seems to be working well, except for combining this with Google social login. I only have social logins enabled for my Bubble app, so this presents a bit of a challenge depending on the social provider. It’s more of a Bubble SSO issue, but thought it was worth raising.

When using Bubble SSO with Google social login, Bubble will generate a dynamic redirect URI like https://yourdomain.com/login?on_login=xxxxxx

It appears Google doesn’t accept anything dynamic when setting the redirect URI. ie. the xxx will change for each user session which causes a mismatch error.

Has anyone been able to get Bubble SSO to work with Google social login?

Cheers,
Josh

joe.sharpish · 2021-09-12T14:10:38.670Z

would be interested to know this too

emile.elie · 2024-01-15T21:17:51.402Z

Thanks @joe5 for the tutorial
It works great

I don’t understand the step where you put a condition on URL param
on_login, and add “is NOT empty”
You don’t detail what you do next. I can see on the screen you open an external website in step2 and on the other one you don’t do it.
I guess you open a website which would be the link to the Circle community.
But on my side I don’t seem to need this step. It does the thing by itself.

On my side it also works with Google Social login, so maybe what says @josh24 has been fixed.