Last updated

LinkedIn login

Adding LinkedIn social login to your login page enables users to sign in to your website or application using their existing LinkedIn account. This creates a faster, more convenient login process by eliminating the need for a separate username and password.


To enable LinkedIn social login for your login page, follow these steps:

  • Enable LinkedIn as a social login in the builder.
  • Create a LinkedIn Application and set up credentials.

Prerequisites

Required SDK versions to configure LinkedIn Login:

@frontegg/react@6.0.26

@frontegg/vue@3.0.18

@frontegg/angular@6.18.0

@frontegg/nextjs@8.0.12



Enabling LinkedIn login in builder

  1. Open the Frontegg portal.
  2. Click on the Login Box button.
  3. In the left panel, toggle LinkedIn to on.
  4. Click Review to Publish, then Publish to Dev.

LinkedIn-Login-1


Creating a LinkedIn application

To configure LinkedIn login, you’ll need to create an app in your LinkedIn developer account.

  1. Log in to LinkedIn Developer.
  2. Click My Apps at the top right, then select Create app.

LinkedIn-Login-2

Step 1: Register an application

  1. Name your application.
  2. Select your company’s LinkedIn page (required).
  3. Optionally, set a link to your privacy policy.
  4. Upload your company’s logo.

LinkedIn-Login-3

  1. Accept the terms of service, then click Create app.

Your application is now created.

Step 2: Configure the LinkedIn app

  1. Under the Products tab, enable Sign in with LinkedIn Using OpenID Connect to allow login with LinkedIn.

LinkedIn-Login-4

  1. Go to the Auth tab, then under OAuth 2.0, add your environment login redirect URL to Allowed Redirect URLs:
    • For hosted login, use https://{{YOUR-FRONTEGG-DOMAIN}}/oauth/account/social/success.
    • For embedded login, use https://{{YOUR-APPLICATION-URL}}/account/social/success.

LinkedIn-Login-5

LinkedIn-Login-6

  1. Save your Client ID and Client Secret from the Application Credentials section. You’ll need them for the next step.

Configuring LinkedIn in Frontegg

  1. Open the Frontegg portal.
  2. Navigate to [ENVIRONMENT] ➜ Configurations ➜ Authentication ➜ Social logins and select Manage on the LinkedIn card.

LinkedIn-Login-7

  1. Choose Custom and enter your LinkedIn Client ID and Client Secret.
  2. Add your Redirect URL to specify where users should be directed after login.
  3. Save your changes.

LinkedIn-Login-8


Customizing authentication scopes for LinkedIn

Scopes let you specify the type of information your application can access from users once granted permission. LinkedIn requires these OAuth 2.0 scopes for a successful login:

  • openid
  • profile
  • email

To add additional custom scopes, navigate to [ENVIRONMENT] → Configurations ➜ Authentication → Social logins → Custom → Scopes on the Frontegg portal.


Testing the LinkedIn Integration

  1. Go to your application.
  2. Try signing in or signing up using LinkedIn.

Your LinkedIn social login should now be active, allowing users to log in with their LinkedIn credentials.