This guide will teach you everything you need to know about creating a LinkedIn sign-up/login experience using Bubble’s no-code platform.
The steps to adding LinkedIn authentication into a Bubble app include:
- Installing the Bubble plugin
- Creating a LinkedIn developer account
- Generating API keys
- Building the workflows
- Displaying LinkedIn account data
Full Transcript of Tutorial
1. Installing the Bubble plugin
In my Bubble editor, I’ve created a sample registration page that I’ll be using throughout our guide today. As you see, I’ve added a few input fields on my page, as well as an additional button that we’ll be using to trigger a workflow. Of course, within that workflow, we’ll be allowing a user to register or log in to an account through LinkedIn. In order to create that experience, the first thing we’ll need to do is actually install the free LinkedIn plugin.
If we open the Bubble plugin library, we’ll search for the word “LinkedIn”. The plugin we’ll need to install is the free LinkedIn plugin created by Bubble. After installing this plugin, I’ll close the plugin library and view my plugin settings.
The first thing you’ll notice within the plugin settings is that we’re required to add a series of API keys to make the plugin functional.
The API keys will allow LinkedIn to communicate with our Bubble application to make our whole experience functional.
2. Creating a LinkedIn developer account
In order to source these API keys, we’re just going to need to head over to the LinkedIn Developer portal. You can access this developer portal here.
If you don’t already have a LinkedIn Developer account, you’ll see a registration button in the top-right-hand corner that will prompt you to create a developer account. This will be linked to your own personal LinkedIn account, but don’t worry, anything you create within the LinkedIn Developer account won’t be visible to your public LinkedIn profile. It’s all behind the scenes.
After you’ve created an account, we’re just going to select the option to create a new application. On the next page, we’ll just be required to add some details of the application itself.
Today, I’ll be calling my app “Building With Bubble Test”. Feel free to call your app whatever you would like. What you will need to do though is also link your application to a LinkedIn page that you already manage. In this case, I’m going to link it with my Building With Bubble LinkedIn page.
After selecting your linked page, you’ll then be required to add a link to the privacy policy to your application.
If you don’t yet have a dedicated page, there’s no need to worry. All you need to do is just add in the domain of your application, followed by ‘/privacy’ syntax.
After adding in my privacy policy, I’ll then upload a logo to my application, then finally, accept the terms and conditions of the new app that I’m creating.
3. Generating API keys
After creating my app, it’s going to redirect me to the dashboard for this product. On this dashboard, we’ll select the option to enable the third-party authentication feature.
Once I’ve enabled that product, I can jump over to the auth tab to source some information. On this page, I will copy the client ID from my LinkedIn developer account and paste this within the relevant field in my plugin settings.
One thing I’d also like to point out is that because we’re currently working on the development version of our application, I’ll need to paste this client ID into the development field provided.
If you were to publish your application at a later point, however, you’ll actually be required to create another client ID for the live field.
From here, I’ll then need to reopen my LinkedIn developer account and copy across my API keys. You’ll see two API keys here; your development and secret key. You’ll simply need to copy these across to the relevant field within your LinkedIn plugin settings.
Just like that, this is all I’ll need to do when it comes to creating an integration between LinkedIn and my Bubble application.
4. Building the workflows
If I open up our Bubble editor once again, I can now create a workflow whenever a user clicks the sign-up button on our registration page.
Within this workflow, instead of registering an account and storing the values of the input fields on my page, I’m instead going to redirect a user to my LinkedIn authentication page. In order to do this, I’ll select the option to ‘signup/log the user in with a social network’. After selecting this, I’ll then see the option to select the LinkedIn plugin we’ve previously installed.
At this point in our workflow, if a user selects to sign-up/login with a LinkedIn account, our application will redirect them to a LinkedIn login page to verify their account.
Once a user has then successfully verified their account with LinkedIn, they’ll then be redirected back to a page within our application. To determine which page in our app a user will be sent back to, we can open our LinkedIn Developer dashboard and select the option to add an authorized redirect URL.
This is the URL of the page within your Bubble app that a user will be redirected to once they’ve successfully authenticated their LinkedIn account. In order to add a URL, we’re just going to select the edit button here, then we’ll choose to add a redirect URL.
To source this URL, you just need to jump into your Bubble application and run a preview of your registration page, from which, I’ll then copy the page’s URL string.
After copying the URL, I’ll jump back over to my LinkedIn Developer portal and paste that into the relevant field. One thing I will just note though is that because this is the test version of our URL, it’s currently just the name of my application, followed by the ‘bubbleapps.io’ string, as well as the text that identifies that this is the test version of my product.
Traditionally, you’ll also find the URL of your Bubble app will also contain a string to activate the Bubble debugger. What I’m going to do is remove that from the URL structure, then I’ll choose to update this URL.
Now, remember how I’d previously mentioned that we could link two different versions of our application to one set of API keys for both our development and live versions? This is where you can also create that experience.
If I was to open up this pencil icon you could also add another verified redirect URL. And if you’re hosting your application on a custom domain, you could paste in that separate value. For the meantime though, I’m going to delete that as I’m content with just my development URL. Now, this whole registration process should be functional within our Bubble app.
Before we take a preview at how it functions, I’d just like to show you how we can actually display the information of a LinkedIn user within our application.
5. Displaying LinkedIn account data
If I jump back over to my Bubble editor and open my existing workflow, after I’ve registered a user’s account, they’re going to be redirected back to our resignation page. But from here, I can add in whatever additional steps I’d like to make this workflow functional. In my case, I might redirect them through to a settings page in my application, where I’d just like the user to verify the details that we pulled from their LinkedIn account.
So I’m going to add an additional step to my workflow, choose from a navigation event, select the ‘go to page’ option. The destination page will just be the settings page I have already created.
Because I don’t have a content type stored on that page, I won’t need to send any data through to it. If I was to then also open up my settings page, I’d just like to show you how I’ve structured the data that I’m displaying.
When I open my design tab, you’ll just see that I have a few inputs on this page. What I’d like to do is just display some initial content so that way I can showcase the details that I’ve just pulled from a user’s LinkedIn account.
You might see here that I’ve already added it to my input fields, but I’ll just take the time to show you how to do this again. I’m just going to remove all of this initial content.
Now, let’s say I’d like to display the user’s full name that we pull from their LinkedIn account. I’d like to display the initial content of the current user. You’ll then see an option to integrate their LinkedIn data. From here, you can see a list of all the data that can be displayed. In this case, I want to display the user’s first name, and then of course I’d like to display their last name after that.
I’m going to add a space after the user’s first name, then I’ll insert dynamic data once again and display the ‘current user’, their ‘LinkedIn data’, their ‘last name’ from that.
When it comes to displaying a user’s profile photo, I’ve also added a picture uploader element to my page. You can have an image element if you’d like, as well, and for the dynamic data, I’m just displaying the current user’s LinkedIn profile picture.
Let’s jump on over to our registration page now and take a preview of what this whole experience looks like within our Bubble development environment.
Over in the preview of my application, one quick thing I’d just like to note is that because within our LinkedIn Development portal here, we’ve set the authorized URL to be the application domain without the debugger URL string, if you’re previewing your application, I would recommend just making sure you remove that before you choose to sign in with LinkedIn. If you don’t, you might find that the URL strings don’t actually match, so it might not allow you to sign in.
From here, I’m just going to select from the additional URL from over here and remove that. I will then enter that in and refresh my page. I can now select to sign up for my application with a LinkedIn account. This is then going to redirect us to the LinkedIn authentication portal, in which I can choose to log in to my account.
Once I’ve successfully logged into my account, I’m just going to allow permission to the app that I’m signing in to. Now, LinkedIn will redirect me back through to my initial Bubble page, in which my workflow would also kick in and send me through to my user settings page.
What you’ll now see is the initial content within my input fields is fetching both the name and my profile photo from my registered LinkedIn account. And just like that, you can see how easy it is to integrate your own LinkedIn authentication experience into Bubble and then begin to display a user’s LinkedIn data within your own application.