all articles

How to implement ‘Sign In with LinkedIn’ in Bubble app

Andrii Bas
Founder & CEO at Sommo
How to implement ‘Sign In with LinkedIn’ in Bubble app
Create 10x faster with Sommo
✓ 9+ years experience
✓ 100+ products developed
✓ no-code&code expertise
✓ in-house development
contact us
Create mobile app with Natively
✓ automated conversion
✓ for any website/web app
✓ mobile native features
✓ updates without release
try Natively

Giving your users an option to authorize with social providers (LinkedIn, Google, Facebook) can help you reduce churn, and greatly simplify the experience for your users. 

However, in Bubble it’s not that easy to implement “Sign In with LinkedIn’ feature. Even though Bubble has an official “LinkedIn” plugin, it simply didn’t work as of Sep 01, 2023. It’s very limited, and is not updated frequently. On top of that, LinkedIn changed their API from “Sign In with LinkedIn” to “Sign In with LinkedIn using OpenID Connect” and Permission Scopes, which made most previous plugins, guides and videos not relevant any more. 

In this guide I’ll show you a few simple steps on how to implement social authorization with LinkedIn in your Bubble app. In addition, you’ll have full control on extending it further and adding even more features from LinkedIn API. 

Check our detailed video guide on how to implement ‘Sign In with LinkedIn’ in Bubble app.

If you prefer text format, just continue reading.

1. Create LinkedIn app

Go to https://developer.linkedin.com/ , and create your LinkedIn App. You’ll also need to connect it with your LinkedIn Page, to have it verified. 

In your app “Products” tab, make sure to enable “Sign In with LinkedIn using OpenID Connect” product.

How to  create Linkedin app to implement ‘Sign In with LinkedIn’ in Bubble app

This product will give you access to the openid, profile, and email OAuth 2.0 scopes.

How to  create Linkedin app to implement ‘Sign In with LinkedIn’ in Bubble app

☝️ Note: in previous version of the API these scopes had names like ‘r_emailaddress’, or ‘r_liteprofile’. These scopes are deprecated and won’t work if you try to use them. Make sure to use the scopes you have enabled in your “Auth” tab in your LinkedIn app. 

2. Create API Connector endpoint

In the “API Connector” create new API, and in “Authentication” select “OAuth2 User-Agent Flow”. 

How to  create API connector endpoint to implement ‘Sign In with LinkedIn’ in Bubble app

For “App ID” and “App Secret” use corresponding “Client ID” and “Client Secret” from your LinkedIn app.

How to  create API connector endpoint to implement ‘Sign In with LinkedIn’ in Bubble app

Make sure to enable “Authentication goes in the header” and “Use a generic redirect URL”.

Copy your “Redirect URL”, and insert it back in your LinkedIn app in the “Authorized redirect URLs for your app”.

How to  create API connector endpoint to implement ‘Sign In with LinkedIn’ in Bubble app

☝️ Note: you don’t need to insert different URLs for /version-test. One single URL is enough.

Use the following values for other keys:

  1. Login dialog redirect: https://www.linkedin.com/oauth/v2/authorization
  2. Access token endpoint: https://www.linkedin.com/oauth/v2/accessToken 
  3. User profile endpoint: https://api.linkedin.com/v2/userinfo?projection=(sub,name,given_name,family_name,picture,locale,email,email_verified) 
  4. User ID key path: sub
  5. User email key path: email

☝️ Note: in previous versions the “User profile endpoint” was “/v2/me”. This one is no longer supported for the new apps, make sure NOT to use “/me” endpoint.

3. Create Login workflow

Create a “Sign In with LinkedIn” button. In the workflow, create an action “Signup/login with a social network”, and in the API select the name of the API you just created.

How to  create Login Workflow to implement ‘Sign In with LinkedIn’ in Bubble app

Hooray, now you have your Authorization flow implemented. When you complete successfully the login process, you’ll have the user created and authorized in your Bubble app. You can use all the same actions with this user, like “Make changes to current user”, or “Log the user out”.

How to  create Login Workflow to implement ‘Sign In with LinkedIn’ in Bubble app

☝️ Note: when you’ll create your LinkedIn API for the first time, you’ll have warnings that you need to authenticate the first session for the user. Just complete the sign in flow, and you’ll be good to go.

If you need to delete your current session on LinkedIn to go through the sign in again, go to the URL https://www.linkedin.com/mypreferences/d/data-sharing-for-permitted-services and Remove your app session.

How to  create Login Workflow to implement ‘Sign In with LinkedIn’ in Bubble app

4. Get user data

Just signing the user in is usually not enough. Most likely you’ll also want to fetch user name, profile picture, etc. 

“OAuth2 User-Agent Flow” API type gives you authorized user token. This token will be automatically used for other API requests in the same API. 

Create a new API named “Get profile”, as an Action, GET method, to the URL: https://api.linkedin.com/v2/userinfo?projection=[projection

‘projection’ value should be “(sub,name,given_name,family_name,picture,locale,email,email_verified)”

 ‘Sign In with LinkedIn’ in Bubble app: how to get user data

Then simply call this API after you “Signup/login with a social network”. And you’ll get a response with all available user data. Check here for “/userinfo” API details.

Conclusion

That’s it on how to implement “Sign In with LinkedIn” in your Bubble app. Hope you find it useful. Feel free to add more LinkedIn products to use other LinkedIn API. For example, add “Share on LinkedIn” product, with which you’ll get “w_member_social” scope and you’ll be able to post on LinkedIn on the user behalf.

Check out more of Bubble plugins and templates created by Sommo here.

If you need help bringing your own app to life — don’t hesitate to contact us.

Andrii Bas
Founder & CEO at Sommo

Related posts

​​Tech Guide to Bubble App Localization & Translation

Localization is a cost-effective way to conquer new markets, create a loyal audience, and increase sales. In this article we share our experience, technical tips, and tricks on Bubble app localization.

how-to
tech talks
bubble

​​Tech Guide to Bubble App Localization & Translation

Bubble and Serverless Firebase Functions for Nocoders

In today’s brief tutorial, we look on how to improve your bubble app’s performance and costs (WU usage) by writing your custom serverless backend functions.

bubble
tech talks

Bubble and Serverless Firebase Functions for Nocoders

Have an idea?
Let’s build your app 10x faster!

CONTACT US
Sommo development agency on ProductHunt
We are live on
!
Your support will help us a lot!