In this complete guide, I’ll teach you everything you need to know about adding a Google signup/login feature to your Bubble application.
The steps to creating a Google authentication feature within a Bubble include:
- Installing the plugin
- Creating a Google developer account
- Creating a consent screen
- Generating API keys
- Building the workflows
- Displaying Google account data in Bubble
Full Transcript of Tutorial
Within my Bubble editor, I’ve created a sample user registration page that I’ll be using throughout our tutorial today. On this page, it currently includes a series of input fields that allow a user to register an account using an email address.
What we’ll also add to this page is a button that will prompt a user to log in or sign up to our app with an existing Google account. In order to create this feature, we’ll first need to install the free Google authentication plugin.
1. Installing the plugin
If I open the plugin tab inside of my Bubble editor, I’ll type in the word Google. The plugin we’ll install today is just the standard Google plugin which is a free plugin built by Bubble. After installing this plugin, I can close my overall plugin library, then review the settings of my Google integration.
The first thing you’ll notice within the settings of my plugin is that we’re required to source a series of API keys to make this functional. These API keys will allow Google to communicate with our Bubble app when a user selects to log in through the Google account.
2. Creating a Google developer account
In order to source the API keys to make this plugin functional, we’ll need to open the Google developer console. If you don’t already have a Google developer account, you’ll need to create one before getting started.
Inside my developer dashboard, the first thing I’ll do is create a new project. Within my account, I already have a list of projects from previous tutorials that I’ve created, but today I’d just like to show you how to create a new project from scratch. This will allow you to follow the exact step-by-step instructions along the way.
When creating a new project, you’ll be required to give this a name. I’m just going to call this, “Building With Bubble Google Auth Test”. By all means, you can call this whatever you’d like. I’ll then choose to create this project. And once that project’s been created, I’m going to select this project, and that will now open this within my developer portal.
Within this project dashboard, you’ll see a list of all of the services and API documentation we need to activate in order to make our product functional.
What I’m interested in sourcing is the API key for the Google authentication service. To find this, I’ll just scroll down the left-hand menu under the product section. I’m then going to click on the ‘API and services’ option, from which, I’ll then select the ‘credentials’ tab.
Now, this is going to open up a dashboard that will display all of the API keys you have sourced for this particular project. Because we’ve just created a brand-new project, however, there is, of course, no APIs to display. This means we’ll need to create a new authentication API from scratch. To do this, we’ll just select the ‘create credentials’ button. Instead of adding just creating a standard API key, I’m going to create a zero auth client ID. This will allow us to create the Google authentication experience we’re after today.
What you’ll see now is that in order to create the authentication API, we’ll first need to configure the consent screen of our application.
3. Creating a consent screen
The consent screen is what Google will display when a user needs to log in through the Google service. Essentially, if someone’s currently on your registration page within your application, and then they click the sign in with Google button, they’re going to be redirected to a page that’s hosted by Google. On that page, it’ll allow the user to validate their own Google account that they’d like to log in with. And that is the consent screen that we’ll need to configure. So we’ll normally need to add the name of our application and sometimes even just a logo of the application that’s trying to get access to a user’s account.
To set up this consent screen, I’ll first need to select what type of consent screen we’d like to use. In my example day, this will be an external option because I want users who aren’t within an internal organization to be able to log in to my app.
If you’re building, let’s say, an internal project management tool for teams, you might select the internal option. But if you’re building anything else like a social network, a marketplace, or any other application, you’re more than likely going to choose the external option.
I’ll then choose to create my consent screen. Now, what you’ll see is just a preview of what this consent screen’s going to look like, and we’ll also need to add the corresponding information that Google requires from us.
The first thing we’ll need to add is the name of the application. I’m going to call this “Building With Bubble”, as if it’s the actual application itself. You’ll then need to choose a support email. Then from here, I’m going to upload an app logo.
Once I’ve uploaded my logo, we’ll also just need to add some information about the domain of our application. The first thing I’ll need to add is just the URL to the homepage of my app. In most cases, this is normally the index page within your Bubble editor. If I open up my editor and choose to open the index page, I’m then going to choose to preview this page. Within this preview, I’ll copy the URL from my browser, then I’ll paste this within my Google developer console.
After pasting my URL, I’ll need to make one minor adjustment to the way in which it’s formatted. In this case, I’ll need to remove the parameter which opens up the debugger within our Bubble app. That’s just something we use internally within Bubble, but I won’t need this within the actual registered URL for the homepage of my app.
From here, we’re then going to add a link to our privacy policy. If you don’t yet have a dedicated page set up for a privacy policy, there’s no need to stress. What you can do is just paste in the same URL, then after your root domain, you can add a forward slash, followed by the word ‘policy’. This will then verify with Google that you do have a page that is dedicated to a privacy policy.
I’m then going to paste the link one last time for the terms of service link. Within this field, I’ll paste in the root domain of my app, followed by a forward slash, then the word ‘TOS’.
If I then scroll down the page, I’ll just need to authorize the domain itself as it’s printed above. So it’s just ‘bubbleapps.io’, because that is where the preview of our application is currently being hosted.
Finally, I’m also going to add my email address into the ‘developer contact information’ field.
Perfect. And now, I can choose to save and continue.
At this point, I won’t need to add any scopes to my application, so I’m just going to save and continue once again.
One thing I would just like to point out now is that Google allows you to pre-approve a list of test users who can actually log in through the Google authentication while your project is in development mode. So because our Bubble application is still currently being hosted on the Bubble domain, the application isn’t actually in live mode.
Traditionally, once you are ready to publish your application, you’ll host it on a custom domain, and that will allow it to become live. Because we’re currently viewing our application within the development mode, we’re just going to need to approve which users can log into their Gmail account.
As you can see, we can add up to 100 people to this pre-approved list. I would recommend at least adding your own email address to this list. What you’ll if you don’t add any pre-approved test users now, is that when you later go to try and use the Google authentication login, it won’t actually work because the account you’re trying to log into isn’t added to the pre-approved list.
Of course, once you actually publish your application into live mode, you won’t need to worry about this. You’ll only need to do this while you’re actually developing your application.
After verifying my test email address, I’ll need to navigate back to my Google developer dashboard. After taking the time to set up our consent screen, we can finally set up the API keys to make the Google plugin functional.
4. Generating API keys
If we once again head over to the credentials tab in our dashboard, we can select the button to ‘create new credentials’. From here, we’ll once again select my own auth client ID. What you’ll now see is that we have the option to start the process of fetching our API keys.
When generating our API keys, we’ll first need to validate what type of application we’ll be building today. From the menu provided, we’ll select the web application option.
When it comes to the name of this application, I’m just going to call this the same name that I had before, which was ‘Building With Bubble’. Then, the very last thing I’ll need to do is add an authorized redirect URI.
If you remember before, I mentioned that on the registration page within our application, we were going to add a ‘sign-up with Google’ button on this page. When a user clicks this button, they’re going to be redirected to a login page hosted by Google. Once Google has validated their account, however, the user will then be redirected to the domain in our app that we select.
That is the purpose of adding a redirect URL here. It’s just the link that Google will send a user back to once they’ve validated their account. Now the link for this will be the actual link to our registration page. So I’ll run a preview of this page within my Bubble application so I can fetch this URL and paste it into this field.
One thing I’d just like to note is that you will just need to remove the debugger URL parameter once again. Once we’ve then added that URL, we can choose to create our authentication API keys.
From here, it will display our API keys that will connect our Google account with the Bubble editor.
I’m going to start by copying our client ID. Once I’ve copied a version of this to my clipboard, I’ll jump back into our Bubble editor, open up our plugin tab, then paste that into the development field, as well as our live field.
I would normally recommend creating a separate authentication key for your live environment, because once you publish your application on a custom domain, the redirect URL is obviously going to be different from the URL on our development page.
For the sake of our tutorial today, I won’t actually be able to run the workflows unless I add an API key into both of these fields, so I’m also just going to add my dev keys into the live fields for now. As I’d previously mentioned, be sure to create a separate set of API keys for your live version once you publish it on a custom domain.
From here, what I’ll need to do is then grab my app’s secret keys. I can fetch these by opening up my developer console, and copying across my client secret key. Once I have a version of this API key, I’ll paste it into the relevant fields within my plugin settings page.
5. Building the workflows
After configuring our API keys, we can now build the workflows that will make our whole Google login feature functional.
On your user registration page, it’s possible to simply add a standard button element to trigger this workflow. Today, however, I’m going to show you how it’s possible to create a custom button that looks like the traditional ‘sign-in with Google’ button you’re familiar with.
When it comes to creating buttons, group elements work as a perfect alternative as they actually have the same behavior and triggers as standard buttons.
After adding a small group element to my page, I’ll choose to remove the default style of this group. I’ll then set the background color to be a flat color, and I personally have a blue color code here that resembles the real-world button. If you’d like that color code, it’s #05A2F0.
While I’m updating the style of my button, I’m also going to change the roundness of the border to five.
I’ll then also add a text element into this group. This text will display the words ‘sign-in with Google’.
Then, the very last element I’ll need to do is just add to this button is a Google icon. Thankfully, this is a relatively straightforward process. By adding an icon element to my page, I can search through the list of default icons available in the library. If I search for the word ‘Google’, I can quickly source a Google icon for my button.
When it comes to this icon, I’ll also remove the style of this and set the color of the icon to be white.
Now, when a user clicks this custom button, I’d like to create a workflow that allows someone to sign-up or log in through their Google account. To do this, I’ll open my workflow tab and create a trigger that runs every time someone clicks on my button.
Within this workflow, I can select the action to ‘sign-up/log in with a social network’. From here, I’ll be prompted to choose an authentication provider, which in our case today, is going to be Google.
Now, it’s at this step in our workflow that a user’s going to be redirected to the Google authentication page. Once a user is redirected back, however, we can add any additional steps to this workflow we’d like. In my example today, once a user has registered an account, I’d like to redirect them through to a dedicated settings page.
I’ll select to add an additional step into my workflow. From this, I’ll choose the navigation option. The event I’d like to run is the ‘go to page’ action. For the destination page, I’ll set this to be my dedicated settings page, which is where I’d like to display the data of the user’s Google account that we can pull through our API key.
6. Displaying Google account data in Bubble
On my settings page, I have a series of blank input fields. Within these fields, I’d like to display a user’s information pulled from their verified Google account.
In the name field, the way I can do that is by adding some initial content. For this initial content, I’ll select to display the ‘current user’, from which, you’ll then see a menu to pull data from their Google account.
I’ll then choose to display the user’s full first name, followed by their last name. If I’d like, I can also display a user’s profile photo saved within their existing Google account. To fetch this data, I’ll add a picture uploader element to my page, then give this a dynamic data source.
For the data source of this picture uploader element, I’ll insert data and reference the ‘current user’s Google account information’. The information I’d like to display, is, of course, their profile image.
And just like that, this is how simple it is to display a user’s information from their Google account in Bubble. Let’s jump on over to our registration page now and take a preview of what this whole experience looks like.
Over in the preview of my application, I’m viewing my registration page. One thing I’d like to point out though is that if we’re previewing this page, we’re just going to need to make sure that we actually remove the debugger URL parameter just because if we were to choose to log in to our Google account and we were sent from the URL that contains our debugger string, it’s not going to match with the URL that we’ve added in the actual developer console itself. So I’m going to remove that parameter and then reload the page.
Once the page is reloaded, I’m going to select our sign-up with Google button, which will then redirect us to our Google account. From here, I can select to log in with my account, which has been pre-approved within my developer console. After logging in, I’ll then be redirected back through to my Bubble application once it’s validated my account.
After being redirected to my Bubble app, it’s going to successfully display my Google account data within the input fields on my settings page.