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.
This product will give you access to the openid, profile, and email OAuth 2.0 scopes.
☝️ 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”.
For “App ID” and “App Secret” use corresponding “Client ID” and “Client Secret” from your LinkedIn 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”.
☝️ Note: you don’t need to insert different URLs for /version-test. One single URL is enough.
Use the following values for other keys:
- Login dialog redirect: https://www.linkedin.com/oauth/v2/authorization
- Access token endpoint: https://www.linkedin.com/oauth/v2/accessToken
- User profile endpoint: https://api.linkedin.com/v2/userinfo?projection=(sub,name,given_name,family_name,picture,locale,email,email_verified)
- User ID key path: sub
- 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.
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”.
☝️ 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.
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)”
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.
%20(1).webp){kind=spacer}
