By the end of this guide, you’ll know exactly how to add your own Facebook login system into your Bubble app without writing a single line of code. I’ll walk you through every single step of the process, from setting up your own Facebook developer account, connecting that account to your Bubble application through a set of API keys, and building out your own custom Facebook login button within your Bubble application.
Then of course, how you can build out the workflows to make this entire experience functional, from which we’re then going to display users Facebook information inside of your own Bubble app.
Note: This experience will not only cover how you can register new user accounts through a Facebook login, but of course how you can allow users to log into your app once they’ve already created an account.
Then finally, I’m also going to explain how someone can also log out of your app. Look, there’s so much that I want to cover here. I feel like I’ve said enough. So let’s just grab our Bubble editor and we can dive right into.
The steps to adding a Facebook login feature into your Bubble app include:
- Installing the Facebook plugin
- Creating a Facebook developer account
- Creating an app in Facebook
- Sourcing Facebook API keys
- Designing the Facebook login button
- Building the workflows
- Displaying a users Facebook profile information
Full Transcript of Tutorial
1. Installing the Facebook plugin
The first thing I want to cover on my list today is the process of installing a free plugin which is going to allow us to create our Facebook login experience. So we’re going to jump into a Bubble application here. Now, this is just a test editor that I’ve created for the purpose of our tutorial today. And so the only thing I’ve done to this application up to this point is just created somewhat of a user registration page.
But one thing you might notice on this page is that there’s currently no option to add a Facebook login, and that is of course, exactly what I’m going to be teaching you. So I’m going to show you how we can build that from scratch. But for the sake of our tutorial, I’ve just jumped ahead and I built out a typical user registration interface.
Although, to be honest, we’re not going to be using these fields throughout our tutorial. I just wanted to create this so it builds out a sense of an actual user login experience. But as I mentioned at this point of our tutorial, we’re going to need to install a plugin. So we’re going to head over to our plug-in tab here.
Now, you can ignore all of these existing plug-ins I have. These aren’t relevant to this particular tutorial. What I am interested in doing is opening up our plug-in library here and just typing in the word ‘Facebook’, from which you’ll then see that there is a free Facebook login plugin, which is built by Bubble.
I’m going to choose to install this. I can then close my plugin library. And one of the first things you’ll notice once you install the plugin is that you’ll need to connect a series of API keys into this plugin. So essentially, API keys just allow your application to speak with your Facebook developer account.
So it just means that when someone signs into Facebook through your application, your app will communicate to Facebook and say, ‘hey, this person’s trying to log in, can I validate who they are?’, and can I please have some information about that account from which Facebook will then return the information that you need.
And so what we’re going to do is take the time to not only source our API keys here, but set up everything we need in the back. Before we can then go and build out all of the workflows within our actual Bubble application. So we’re going to take care of a lot of the unsexy work to begin with before we can go and build out the cool experience where someone can actually sign up or log in using their Facebook account.
2. Creating a Facebook developer account
And so what you’ll need to do right now is create your own Facebook developer account. Now I’ve already jumped ahead and created one, but if you’re new to this entire experience, all you’ll need to do is just Google search, ‘Facebook developers’, or you can head to developers.facebook.com. Then once you’ve signed up for a developer’s account, which will link to your own Facebook account, you’ll need to head up to the ‘My Apps’ tab in the top menu.
From here, it’s then going to show you a list of all of the applications you’ve created inside of Facebook. Now, at this point in time, I have in fact created a few different applications, so that’s why you can see my three options here. But of course, for the sake of our tutorial today, I’m interested in showing you how we can create a brand new application from scratch, and then of course, configure all of these settings so we can integrate this with our own Bubble app.
3. Creating an app in Facebook
So what we’re going to do is head over to the ‘create app’ button here, and now the first thing you’ll need to do is select the type of app that you would like to create. So what you’ll need to do is select the option that’s relevant to your own business use case, and if you’re still stuck on which option to select.
I personally just always choose the consumer option, just because it gives you access to features like the Facebook login as it mentions here. Well, they’re going to scroll down and select the ‘next’ button, and then from here what you’ll need to do is add in the name of your application. In my example, I’m going to call this a ‘new test app’, then I’m then going to choose to create this app in my dashboard. Then once we’ve created our app, we’re going to be redirected through to a dashboard where we can manage this particular app. And within this dashboard you’ll see a list of products that you can select from. And of course, in this case, today we’re going to be setting up the Facebook login.
So we’re going to select to set this up here. Then we’ll need to select what type of application we are going to be building this login experience for. And in this case, it’s going to be a web product. Now, even if you are building a Bubble app, that’s going to be counted as an Android or iOS format, you’ll still need to select the web option here because Bubble actually allows you to build web apps.
But in order to publish them into any app store, you will essentially just be wrapping that app in a format for those, so at the crux of your app, it will always be a web app here. So I’m going to select the web option. Then what we’ll need to do is add in the URL of our website. And in order to fetch that, we’re just going to jump back into our Bubble editor, open up our design tab here, and we’re just going to run a preview of any page inside of your app.
What I’m interested in doing is just grabbing the root domain of your application. So this is going to be the name of your app that you’ve created in Bubble, followed by the ‘.bubbleapps.io’, and then it’ll have a ‘/version-test’ because we’re currently viewing this in development mode.
And so what I’d like to do is just copy that section of our URL. I’m not interested in copying any other part of our URL string here, so not the page name or anything like that, it’s just going to be the root domain itself.
From here, we’re then going to jump back into Facebook and we’re going to add this in our site URL and choose to save that. We’ll then also need to select ‘continue’.
And now we’re going to skip through all of these additional options because this explains how you can add in a Facebook login experience using code – which of course is not relevant to us. We’re all about that no-code lifestyle here, so this is of course of no interest to us. So we’re just going to select ‘next’.
Scrolling down, select next again, next one last time, and then that is everything we’ll need to go through there. Then from here, we’re just going to need to configure a couple of additional settings. So we’re going to head over to the Facebook login menu here and select on the settings tab.
It’s then going to redirect us through to this page, and we’re not going to change any of the toggle settings here. We’re going to leave all of those as they are. But one thing we will need to do is scroll on down to this section where it wants us to validate and 0auth redirect.
And so what it means by this is that let’s say someone is previewing your registration page inside a Bubble.
In a moment, we’re going to create a button, which when clicked will allow someone to log into their Facebook account. And so when that button is clicked, it’s actually going to redirect someone through to a temporary Facebook page, which will just allow that user to verify that they do want to share their Facebook information with your app.
And so that’s what it means by this 0auth redirect here. This is essentially just a list of approved URLs that someone can come from. And so what we’re going to do is jump into the preview of our Bubble app.
So at this point, you’ll need to create a registration page in your app like I’ve done here. Then, you’ll need to run a preview of this so that way you can grab this entire URL.
So not only does this include the URL of our Bubble app, but it also includes the actual page name that we are viewing. And this is, of course, the page name that someone’s going to be redirected from.
We’re then going to copy this whole URL here.
We’re going to jump back into our Facebook developer account. We’re then going to paste this link in. I’ll select enter, so that way it now approves this link here. But one thing I should just point out is that this link, as it stands, currently has the URL parameter. This is our debugger, so you can see at the bottom of our screen here, the debugger is currently active.
And when you’re running a preview of this application, you’re not always going to want the debugger to be on. Sometimes you might want to just remove this URL parameter, reload the page, and just actually remove the debugger itself. And so what we’re going to do is we’re going to make another copy of this URL without the debugger in it.
I’m then going to jump into my Facebook developer account, and paste in this version of the URL. And the reason why I’ve approved both of these URLs is that regardless of if the debugger is on or the debugger is not, your users will be able to successfully login through Facebook regardless of which page they come from.
So please take the time to ensure you do this as well. It’s super easy to make the mistake of just grabbing your URL string without the debugger and adding that in as the only approved URL.
And then when you’ll need to preview your app, the debugger is active on your URL. And because this isn’t an exact match to the URL that you’ve approved, Facebook doesn’t recognize that someone is coming from an approved source.
And so you’ll see an error message whenever someone tries to log in. So please, before you comment on this video and say, ‘hey, my login doesn’t work’, double-check that you’ve approved both of these URL types, because nine times out of ten, that’s what’s going to cause this.
From here, we’re then going to just scroll on down through our settings here, right down to the bottom where we have a redirect, URL validator.
And so what does this mean? This is essentially just the page in your Bubble app that someone is going to be redirected back to once they’ve successfully logged in through the Facebook experience.
The page will want someone to land back on is a course going to be the registration page that we had previously created.
So I’m going to make a copy of this link. I’m going to add this in. I will just run a quick check of this and you’ll see that you get an error message here. And the best way I found to solve this is just by saving changes to your app, the page will then reload. And because we’ve saved changes, these URLs here have now been approved, so we can scroll on down and just paste in the same URL. I’ll check this now and you’ll see that it is valid.
Now, you won’t need to add in the two different versions of your URL here. You’re just going to select one link that someone’s going to be sent back to, so if you use the link without the debugger, it just means that when someone’s sent back to this page, the debugger will not be active, and that’s the exact experience we want to create.
And then just going to save these changes one last time.
4. Sourcing Facebook API keys
So right now you can see we’re making some great progress, but before we go ahead and build out the whole experience in our own Bubble app, there’s still just a short list of housekeeping we’ll need to take care of within our Facebook developer account, and that is just around the actual settings of our application itself.
Now, if we jump back into our developer account on the left-hand menu, we’re going to open up our settings tab here, and we’re just going to open up the basic settings. Now, this is where you’ll see all of the details of your application. So you can see the name of your app.
You’ll also be able to see the app ID, which we’re going to be using in a moment.
But there’s a few particular fields here that I’m interested in updating. So before you can publish your Facebook login experience, you’re required to add in a privacy policy URL as well as a terms of service URL.
Now, if I open up my Bubble editor, what I’ve done is just jumped ahead and I’ve already created a page called ‘terms of service’ as well as one called ‘privacy policy’. So if I was to open up my privacy policy page, you can see there’s nothing on this page. Of course, if you wanted to add some text on that, you could do so, but for the sake of our tutorial, I’m just going to run a quick preview of this page.
Now, the reason why I’ve created this page is because I need to copy the URL of this page. I’m going to copy this without the debugger on the URL string. I’m going to jump into my Facebook developer account, and I’m going to paste this into my privacy policy URL field. And then I’m going to do the exact same thing for our terms of service.
If I jump back into my Bubble editor, I’ll open up my terms of service page, which at this point in time is just blank. I’ll run a preview of this and then I’ll copy the link to this page. I will paste that into my terms of service URL field. It is as simple as that. The other thing I might like to do is just upload a custom app icon so when someone is redirected through to the Facebook login experience, this is just going to display the icon of my app on that, just so the branding looks nice and consistent.
So I’m just going to select on this and upload an image from my local device. Then from here, I’m going to choose to save the changes that we’ve just made. The page will refresh, and that’s all of the changes we’ll need to make on this page. The very last thing we’ll need to do is just copy across our API keys here into our Facebook login plugin that we had previously added to our app.
So if we jump back into Bubble and open up our plugins tab, you may remember that I had mentioned that there’s some fields here to add in our API keys. So this is where we’re going to copy and paste the values from our Facebook developer portal. And you’ll see there’s two options here. There’s the development mode and then there’s the live mode.
And so while you’re running a preview of your application, you’re going to need to add in your development keys, and you’ll see we’re required to just add in our app ID as well as our app secret key. So in order to fetch those, we’re going to jump into our Facebook developer account. We’re going to copy across our app Id.
I’ll jump back into Bubble. I’ll paste this into the app ID field. Then I’ll need to grab my app, secret Keys. So I’m going to jump back into Facebook. I will reveal my apps secret key. I will make a copy of that. I’ll jump back into Bubble here, and I will paste this into the relevant field. And now that is how you can source your development keys.
Now throughout my tutorial today, I’m only going to need to use my development keys because I of course, I’m not going to publish my application. I’m just going to take a preview of it in development mode. But if you ever wanted to source your live API keys, you’ll just need to jump back into your Facebook developer account.
And then all you need to do is just toggle your app mode across to the live version and then copy across the app ID and your new app, secret key, and you just have to paste those into the relevant fields in your plugin. But from here, that is everything we’ll need to configure when it comes to our Facebook plugin and our Facebook account.
5. Designing the Facebook login button
Now at this point in our tutorial, we can get to the fun stuff and we can start actually building out the interface and workflows to make our Facebook login experience fully functional.
So I’m going to jump over into my design tab. I’ll open up the registration page that I had previously built out. Now, when it comes to creating a button that allows someone to log into their Facebook account, you have a couple of different.
When you add a button into Bubble, one thing you might notice is that you’re unable to actually add an icon into this. It only allows you to add text. Now that’s fine if you wanna say something like log in with Facebook. But today I’m here to show you how to create the best experience for your end users.
What we’re going to do is actually create a custom button that adds the Facebook logo into it. So we’re going to delete this button here. And of course, what’s another way that you can create a button – by the use of groups. So if you’re not familiar with a group, you can add elements into it and you can trigger a workflow whenever it is clicked.
So we’re going to head to our containers menu here. We’re going to add a group element into my existing group here. And before I do anything, I’m just going to update the name of this group to be called ‘Group Login’. I’m then going to remove the style of this because I’d like to give it a flat background color.
And for the color of this group’s background, I want this to be the same blue that Facebook uses. So if you’d like that color code, it’s #3B5998.
And then also just going to choose to update the roundest of my borders to be ten. And then finally, I’ll jump over to the layout tab because I’d like to update the container layout of this group.
Inside of this group, I’m going to add two elements. There’s going to be a Facebook logo as well as some text, and these are going to be positioned side by side, so horizontally within my group, which means I’m going to need to set the container layout to be a row.
We’re then going to jump on down to my width and unselect that this should be a fixed width.
I’m going to set the minimum width as zero. Leaving the maximum width is infinite – which just means this group is going to take up as little or as much space as it can within the overall group it sits within.
Now look, today, I’m not going to jump too much into the whole responseive design, because the main objective is just showing you how to build out the workflows themselves.
So within this group, I’m going to add two elements. The first thing I’d like to add is going to be an icon, and then next to icon, I’m going to add a Facebook logo.
I’ll select this one here. I’m just going to remove the style of this because I’d like to set the icon color to be white.
I’d then also like to jump to my layout tab because I’ll need to increase the size of this. I’m going to make this 50 pixels by 50 pixels, and I’m going to leave this as a fixed value, so that way it is always 50 by 50. Now, beside this, I’m going to add in a text element, and this is just going to say ‘log in with Facebook’.
I’m then also just going to remove the style of this. I’d like to bold this font, make the font color white, and I could make the font size something like 18. I’ll then jump over to my layout tab. When it comes to the width of this text element, I’m going to unselect that this should be a fixed width. I’ll set the minimum width, the zero. I’ll also tick this option to fit the width of this element to the content within it, which just means it’s going to collapse perfectly around the text inside of it. Then I’ll do the same thing for my height. If I set the minimum height to zero. It’s going to collapse around the height of the text inside of it, which is perfect.
I’m then just going to add a left margin of 10, so that way this text isn’t touching our Facebook logo. And then finally, I’m going to vertically align this within my blue group. I’ll click on my Facebook icon and do the exact same thing. So I’m going to vertically align it and then of course, I’ll want these elements to be in the center of this group.
I’m going to select on the overall blue group. From here, I’ll update its container alignment – which just determines where these elements are going to be positioned horizontally in this group. In this case, I’d like to make them centered.
I’m then going to head to my minimum height. I’m going to set that to be zero, and because we have this option selected by default to fit the height of this element to the content within it, it’s going to collapse nicely around our icon and our text.
The last thing I’d like to do is just add in some margins around this group. I’m going to add in 20 pixels of margin at the bottom, 20 pixels of margin on the left, and 20 pixels of margin on the right. And that’s just going to ensure it won’t touch the borders of any other elements around it there.
Now that is how we can build out our login with Facebook button. But of course, from here we’re going to need to build out the workflows that actually make this.
6. Building the workflows
When someone clicks in with this, we’re going to build out a single workflow that’s going to allow them to either sign up or log in with Facebook. The one workflow is going to take care of both options. So I’m going to select on my overall group here, and I’m going to start a workflow whenever it is clicked.
And inside of this workflow. It’s a very straightforward process. I’m going to head to my account option, and I’m going to choose the ‘sign up/log in with a social network’ option. And of course, in this case, the social network is Facebook. And the reason why Bubble can see that we want to login with Facebook is because we’ve already installed the plugin.
And so at this point in time, whenever this step in our workflow is reached, the user would be redirected through to the dedicated Facebook login page. And then once they’ve finished logging in, they’re going to return back to our page, and any additional steps in this workflow will continue to run. And so once someone’s logged in, what I’d actually like to do is send them through to a settings page. By all means, you can send someone through to whatever page you want in your application, but today, I’ve just built out a settings page where I’m then going to display all of this user’s information from their Facebook account. So what I’m going to do is I’m going to add an additional step into my workflow.
I’m going to select from the navigation event and choose the ‘go to page’ action. The destination page will just be my settings page (you can select that to be whatever page you want).
And so from here, what I’d love to do is just take a quick preview of how this is all going to function. So I’m going to jump back into my design tab here.
I’m going to run a preview of my app and It’s going to reload my registration page. I’m then going to choose to log in with Facebook. It’s then going to redirect me through to a Facebook login page where you can see that my application and all of its details have added into our Facebook. Is requesting access to my own Facebook account, and it’s mentioning that it’s going to pull my name, my profile photo, and my email address, which I’m completely fine with.
I’m then going to continue as my Facebook account. It will verify that, and it’s then going to redirect me back to my Bubble application, from which, the remaining steps in my workflow are going to run.
7. Displaying a users Facebook profile information
And now at this point on my settings page, you can see that I have some input fields here where I want to display some information about a person’s account. So I’m going to want to pull the information from their Facebook account. And so what I’d love to now do is show you how we can actually display that information.
But before we do that, I just wanna quickly jump into my notion. And see where we are in the overall bill today. So at this point, we’ve taken the time to update the additional settings within our Facebook developer account. We’ve built out the Facebook login button as well as built out the workflows to power that.
So if we jump into our Bubble editor, I’m just going to open up my settings page Now, as I’ve shown you before, I have some input fields on this page.
And these are currently blank, whereas what I’d like to do is actually display the information from someone’s Facebook account. So within the initial content fields of my input forms, I’m going to select to insert dynamic data and in order to pull the user’s Facebook account information. I’m going to reference the ‘current user’, so that is the person who has logged in viewing their settings page.
I’m going to scroll on down to the Facebook option here, and then you’ll see a list of all of the information you can reference from this person’s Facebook account. So in this case, I’m going to pull their first name. I’ll then add a space because I’d like to then display their last name. So I’m going to once again insert dynamic data and pull the ‘current user, their Facebook information, their last name’ – it’s as simple as that.
Then for the email address, I’m going to insert dynamic data and reference the ‘current user’. I’ll scroll them down to the Facebook option and I’ll display the email address. And then finally, for the profile photo for the dynamic image, I will insert dynamic data and reference the ‘current user, their Facebook photo’.
Easy.
Then, if I jump back into the preview of my settings page here, I’m just going to refresh the page and what you’ll now see is that our application is pulling the information from my Facebook account. I can see my name, my email address, and my own profile photo are all there.
Now that is of course how we can log someone into their Facebook account as well as display their information. But the very last thing I wanna walk you through is how we can actually log someone out of their Facebook account. And this whole process couldn’t get any easier.
We’re going to jump back into our Bubble editor, and I’m going to select on my logout button here.
So the only thing you’ll need to do is just add a button element onto your page and just have this display, the word logout. We’re then going to choose to start a workflow whenever this button is clicked. And within this workflow, it couldn’t be any more straightforward. We’re just going to head to our account option and just choose to ‘log the user out’.
Another thing I might like to do is then redirect the user back to our login page. So I’m just going to add one additional step in my workflow. I’ll select from the navigation event, choose the ‘go to page’ action, and just send someone back through to my Facebook login page.
It truly is as simple as that. Let’s jump back over into the preview of our application here and refresh the page. Then, over on this page, I’m going to click the logout button. That workflow will run and it’s going to log us out of our Bubble account, which of course was logged in through Facebook. And then finally it’s going to redirect us back through to our original registration page, and just like that, that is the last thing I wanted to cover within this tutorial.