How to enable Social Login using Facebook, in your Bubble app
Make it easy for your customers to login in your Bubble app, using their existing Facebook account
Hi there,
I’m going to set up Social Login using Facebook for my SaaS house chore roster site, and I’ll write it up in this article, so that if you want to do something similar, you can get there quicker.
If you wanted an article about how to set this up with Google login, then see here, and with Twitter see here.
Why?
People are tired of managing passwords. I know I am. I have a password management system which works well, but sometimes I just want to click Signup with Facebook, and not think too much more about it. Of course, every bit of convenience is trading away a little privacy, but most people are used to this trade off by now, and not having to think of a password is a little bit less friction in your new customer sign up flow.
OK, lets get into it.
Prerequisites
A Bubble app
A Facebook account
The Docs
I’m using the Canvas templates from Airdev, which I’ve chosen to make it easier to quickly release a nice looking app, with a decent chance that it will also be responsive. This article will show you many canvas specific steps, but I’m confident that it will still be useful if you aren’t using Canvas. The main parts are just a Button, and some Facebook config.
The Canvas docs are here https://docs.airdev.co/canvas/ and at the top right is a search box, into which I typed : Social
This resulted in this:
which links to https://docs.airdev.co/canvas/canvas-functionality/reference/reusable-elements/signup-login so lets work through that. It looks like there is a reusable popup element in the header, which makes sense because you want to login/out from any page.
Locating this in my bubble app
The popup comes pre loaded with several Social Login buttons, but within a group that is hidden by default. This means that by default, the a new customer will be required to type in their email address plus a password of their choosing.
This works fine as is, due to all the workflow items you get for free when you use canvas templates.. you can see why I like them. I’m all about saving as much time as possible in getting to launch day.
What I’ll do next is locate the Facebook button and unhide it. A search for ‘facebook’ in the top left search field locates it and I want the (sign up) version to start with & we’ll get to the login one later
The button (Group Facebook button (sign up) is already visible by default, so we’ll check the parent folder.. yep, it’s Group other buttons (sign up) that we need to show:
Also check the other items in this group, to make sure they are hidden if you don’t need them.
So running your app now and choosing signup from the login page you’ll now see the Facebook button displayed.. yay
Lets set up the Workflow so that this button will do some work for us… but first.. the Plugin.
The Plugin
Lets see if there is a plugin for Facebook.
Plugins | Facebook
There are many, but lets start simple, and install the once called ‘Facebook’ that was created by Bubble.
Click Install & Click Done
The docs for this are here https://manual.bubble.io/core-resources/bubble-made-plugins/facebook
The settings page for the plugin displays the kind of configuration fields we’d expect for an OAuth identification and authentication process.
So, what is the OAuth thing?
“OAuth is an open standard for access delegation, commonly used as a way for Internet users to grant websites or applications access to their information on other websites but without giving them the passwords”
That’s all we really need to know at this point. A new customer will click on the Login with Facebook button, and bubble will just ask Facebook ‘is this person who they say they are”, and Facebook will be like “ yep, it checks out”, and then Bubble is like: “thanks, I’ll let them login to this application, and also create a user account for them in my database”
And your user is now all signed up to your app, and no user passwords were handed around anywhere. Also you’ll know the customers email address, which is super handy for keeping in touch with them. Make sure to check out my other article about How to enable Email Notifications for the users of your Bubble app
OK, back to the plugin: You’ll see that it wants some API keys
These keys you’ll need to generate as part of your Facebook account, and they will allow Bubble to authenticate with Facebook services on your behalf. This might be your own personal Facebook account, or a specific one you have set up for your various side projects.
Facebook Dev Stuff
Browse to https://developers.facebook.com/docs/facebook-login/ and click the Login button at the top right. Use your usual Facebook account credentials.
Note: If you don’t usually use Facebook personally, don’t worry.. this whole process is about making it easier for your customers to login :)
Next click on ‘Websites or mobile websites’
On the next page it mentions you these things:
The developer account will be how Facebook identifies you as a programmer/coder/nocoder/maker
The Facebook App is a container for your configuration related to this Bubble app you are building
The Javascript SDK is the ‘code’ that manages the interaction between your site and Facebook. But since we are cool nocoders, that part will already be done as part of the Facebook Plugin we already installed
Note: SDK = Software Development Kit
Click on the Facebook Developer Account link
Note: Since I’ve previously signed up for a Facebook developer account, clicking this link just takes me to the page. I can’t recall if a signup process is required here.. if so just jump through the hoops to apply for a developer account if required.
Click the Create App button
Here you have a choice to make, from this list of options:
None of those options sound like an exact match for just ‘Login’ but I’m choosing Consumer from this list then clicking Continue
On the next page choose a name for your ‘App’. Don’t get fancy here, just name it as boringly as possible so it’s easy to manage later. I’m choosing the domain name of my app: RosterBuddy.app
Fill in a contact email address and a Business Manager account if you have one.
Read the Terms and Policies documents.
Note: Yes it is super boring reading terms and policies documents. Make sure you open them and save them somewhere. Even accidentally breaking the terms of this agreement in the future can stop users logging in to your app, which doesn’t sound relaxing.
Click Create app, & then if you are not a Robot, click the I’m not a robot checkbox, then click Submit
Note: If you are a robot, then please consult your owner for permission first.
You will now be presented with some Tiles to choose from to enable ‘products’ for your ‘app’. On the Facebook Login tile, click Set Up
Docs for this product are here
On the next screen click Web
This will start a wizard where you tell Facebook about aspects of your site:
Site URL : I’m selecting the base url of my site here, https://rosterbuddy.app & clicking Save then Continue
For the next 3 sections just click Next, as we don’t need this code in our site as the functionality is already available via the Facebook Plugin we installed.
Facebook SDK
Check Login Status
Add the Facebook Login Button
Get the Keys
Within the Developer console at https://developers.facebook.com/apps make sure your app is selected
In the left hand menu, select Settings > Basic
Note that on this page there is an App ID and an App Secret
Yay! that’s what we need to configure the Facebook plugin our our Bubble app.
Make a note of both of these values in a secure password management tool. Be sure to name the entries and date them, as you may need to change(roll) then in the future.
While you are on this page, make a note that they want a link to the Privacy Policy and also the Terms of Service for your app. Fill this in now, as you’ll need to anyway to toggle this config out of the ‘In development’ mode later on.
Want access to more articles like this?
Did you know that some of my posts are published for paid members only? Access all past and future exclusive content by subscribing:
Complete these other sections
App Domains. Ensure you add your apps domain name to the App Domains field.
User Data Deletion. Include either a URL for GDRP page, or a URL to a page which contains information about how a customer could request their data be deleted. Go and make this page now, with nocode it’s easy.
an App Icon, of size between 512 x 512 and 1024 x 1024 pixels [ make a 512 version.. the image turns up quite small later]
App Purpose : select ‘Yourself or your own business’. We are just setting up our apps ability for client to authenticate
Click Save Changes
Finding this article useful? If so, consider sharing it:
Next we select another item from the left side menu of the facebook developer console:Facebook Login > Settings
In the field ‘Valid OAuth Redirect URIs’, type in the value that is presented in the Facebook Plugin config page in your app. Sadly you can’t copy/paste it from that page so just eyeball it, and type carefully :)
My example here
Lower down on that page there is a handy url checker too:
Important.. if you don’t configure this OAuth Redirect URI as above, you’ll get a misleading error message at run time of :
which isn’t an accurate error, as we previously DID add this the the App Domains field. I wasted a bit of time trying to resolve this one, but now you don’t have to :)
Configure the Plugin
So, back in your Bubble app, navigate to Plugins | Facebook so we can configure this plugin with the new key data
Put the App ID value into the field labelled App ID/ Key
Put the App Secret value into the field labelled App Secret
In the Scope dropdown, select Simple
Clear the ‘Include user profile URL’ checkbox
Enable the ‘Use a generic redirect URL’ checkbox
Click the Design Tab & Navigate to the page which contains your Sign up with Facebook button.. in my case this is the Reusable signup/login
Double click this item to show the properties dialogue, and click the Start/Edit workflow button
Add an action of Account > Signup/login with a social network
Select Facebook from the dropdown menu.
Note: Other social network providers will be listed if you have installed other plugins. See my other articles about Google and Twitter
And that’s it :)
Run your app and you should see the Signup with Facebook button.
Click it
If the user isn’t currently logged in to their Facebook account with their browser, they’ll be prompted to do so:
If they are already logged in, the’ll see this UI
Note : clicking the Edit this link, the user can then disable the ability to collect the email address. If your Bubble user database depends upon this, then you’ll need to build some logic to handle it.
ok, Clicking Continue as Marty, Bubble attempts to create a user record for me, which already exists [in my case] and I get the standard popup for duplicate users:
Note: This popup behaviour isn’t ideal, but we can at least make the message better. If an existing user clicks Signup instead of Login, then we want to point that out.. Lets go to Settings | Languages | and locate this message
and change it to recommend they login instead:
better:
OK, so how about for when the account doesn’t already exist.. i.e a brand new customer…
YAY.. user is logged in, account created in the users table, including the email address.
Job done.
Some improvements though, we could do with collecting and storing the First name and Last name.
Lets go back to the workflow:
Add an action to the existing workflow to populate the First & Last name
I deleted the user that was just created in order to retest, and everything works as expected, the user is signed up, data is stored in the user db, and the welcome flow kicks off
YUSS! & that’s it :)
So.. what’s left?
Everything works, so what was that toggle back in facebook called In development
Lets find out.. Clicking it we get this:
So it looks like for accessing more advanced features would require a Review. I’m making an assessment that since Login is thought of by Facebook as an approved permission already, then we probably can stay in ‘development mode’ and leave things in this simpler state. If this changes, I’ll come back and update this section.
Login with Facebook
One last thing… lets add a Login Button, for those people who signed up using Facebook, then return for more, which people will, because you are making a great app.
Add a button called Login with Facebook and follow the exact procedure as for the Signup action
Double click this item to show the properties dialogue, and click the Start/Edit workflow button
Add an action of Account > Signup/login with a social network
Select Facebook from the dropdown menu.
done.
so.. thanks for following along, I appreciate your time. If you want more tips about Bubble and SaaS then follow my on twitter @MartyLindsay_NZ