## 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 br ## 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](/assets/linkedin-login-1.a7ff56501ee1087a2f2aa2da107b3fe2cd2d2f300f6cc79baf9107e0ef03a81c.eef3c02a.png) ## 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](https://developer.linkedin.com/). 2. Click **My Apps** at the top right, then select **Create app**. ![LinkedIn-Login-2](/assets/linkedin-login-2.36ac4b28379023e3625458209706c2ec49da0d912f544eb23173db544b0fdb41.eef3c02a.png) ### 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](/assets/linkedin-login-3.48d3fbd5b04bb1d7bf9df1d16e012cddb10c40ad330f991941af8f9c6a66e9b0.eef3c02a.png) 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](/assets/linkedin-login-4.b1d803ed6f07e68fe14afd61d9686bae50f7c9d0ed91240004dd3a6443258cb9.eef3c02a.png) 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](/assets/linkedin-login-5.2d5cca4a7452e03d633a30f2126cca2db87d7aa9592ad77b10c42cf74baf8a25.eef3c02a.png) ![LinkedIn-Login-6](/assets/linkedin-login-6.80cc3a1def7f7ee8cdbb5d1e9b61bf1f28c9909ef793520133bdfc25bc1375b5.eef3c02a.png) 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](/assets/linkedin-login-7.53a4d1d4a910d44e55f703055314eb5d12b00fd42b679e7d28d15c9fa6b15a54.eef3c02a.png) 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](/assets/linkedin-login-8.2fbc284ec088a797bcc098d538fa94cb0048accc7585bf53ec50cf5fdaa3cb9e.eef3c02a.png) ## 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.