LinkedIn Authentication

Article author
Duncan Hamra

This article will show you how to add a "Continue with LinkedIn" button to your signup, login, and profile forms. Part one is a 3-minute video with step-by-step instructions to connect your Memberstack and LinkedIn accounts. Part two will show you how to set up the front end. 

Important: If you are receiving an error when trying to connect LinkedIn that resembles the follow then you need to make sure you are copying and pasting the actual Client Secret and not the ****. 

{"error":"OPError: invalid_client (Client authentication failed)"}

Part 1: The Backend

Here's a link to LinkedIn's Developer site.

Part 2: The Frontend

sign_in_with_linked_in.jpg

If you're using Memberstack's pre-built sign-up, login, or profile UI, then you're already finished. Enabled social auth providers will automatically appear in the pre-built UI. 

If you'd like to add a social auth button to your Webflow project this section is for you.

Signup & Login Forms

I recommend copying one of our Webflow social auth buttons. They are 100% built in Webflow, already have the attributes you need, and are easy to customize:

A) Light Theme LinkedIn Button 

B) Dark Theme Linkedin Button

To create your own from scratch:

  1. Create a link block with the attribute data-ms-auth-provider="linkedin".
  2. Add the LinkedIn logo.
  3. Add your button text. We recommend something like "Continue with LinkedIn"

That's it for signup and login buttons. Profile buttons have a few additional elements.

Profile Forms

In this other tutorial, we'll create a UI for members to connect providers, view previously connected providers, and (optionally) disconnect providers. 

Social Auth Buttons in Profile Forms

Troubleshooting

Errors are usually caused by a miss-matched redirect URI. Click here to learn more. 

Was this article helpful?

Comments

3 comments

  • Comment author
    Illan Knafou

    It seems that this error occurs because LinkedIn has changed its OAuth 2.0 scopes names

    {"error":"OPError: unauthorized_scope_error (Scope "r_liteprofile" is not authorized for your application)"}
    1
  • Comment author
    Duncan Hamra
    • Edited

    Hi Illan Knafou 👋

    I just did some testing on my end, and it all appears to be working. Can you confirm that the scope r_liteprofile is authorized on your Linkedin account?

    It appears to have happed automatically for Tyler... what does it look like on your end? Video for ref

    0
  • Comment author
    Illan Knafou
    • Edited

    Hey Duncan Hamra , thank you for your quick reply!

    By doing the same tricks as Tyler, I have this:

    openidUse your name and photo
    profileUse your name and photo
    emailUse the primary email address associated with your LinkedIn account
     
    Instead of r_emailadress and r_liteprofile
     
    I think that's because Linkedin recently changed its authentication method from Sign in with LinkedIn to Sign in with LinkedIn using OpenID Connect. 
    0

Please sign in to leave a comment.