Social login OAuth with LinkedIn
Tags: javascript, linkedin, webdev, auth
Published: 2022-07-24 17:49:35

With LinkedIn's user base expanding, an increasing number of software-based businesses will seek to include Linkedin as a social login to increase user registration. It will draw an increasing number of customers to the business' service.

Here is a user-friendly tutorial for developers on how to integrate LinkedIn OAuth into your project.

## 1. Set LinkedIn Developer Account
Go to [`https://developer.linkedin.com/`](https://developer.linkedin.com/) and click on `Create React App`

![home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omfx8gc5z7kgfa33i7kj.png)

Before filling out the form make sure you have a company page and you have proper permission to use that page in your app because the app will be verified by the Page Admin.
Fill all the details and click on the `Create App` in the bottom right.

![app description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/itdm2wpxkneifhrt6ydi.png)

## 2. Verify your app
After filling up the form you will be redirected to your app dashboard which looks like this:

![app dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qcfsgz8wve4d9h6z9yl8.png)

Go to the `Settings` section and click on the `Verify` button.

![verify-app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0ejiidp4qsfif2vmbar.png)

A pop-up will appear which will ask you to `Generate URL` which will give you a link which is needed to be sent to your Page Admin.

![Generate URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jc4a4ajc9du8572tzl21.png) 

When the page admin will open this link, the page will appear as below and the Page Admin will need to click on `Verify`.

![verification by page admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo1xujm69rrj667d8u8n.png)
 
Now the app dashboard will look like this with the date of verification.

![app is verified](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf7hljeai1joa7cnqc2t.png)
 
## 3. Add LinkedIn Sign service to your service
 
Now in this step, you need to go to the `Products` section  and click on the card which says `Sign In with LinkedIn`

![developer products](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85fl77phbv3roqq4cyzi.png)
 
After agreeing to the Terms and Service, the card will be shown under the `Added Products` on the same page

## 4. Create auth token
Now we need to create an access token to be able to integrate it into your login/sign-up screen.
So now you need to go to the `OAuth 2.0 tools` page on the right side section of `Auth`.

![auth section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sw3w2fxzryi7zwc7hbrc.png)

And click on the `Create Token` button.

![generate tokens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xprjrx85ruf9wort0os9.png)

Now a page will show where you need to select scopes. Make sure to check `r_emailaddress` and `r_liteprofile` and then check the confirmation box and select the `Request access token`.

![generate token permissions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l01jwpyi36ofm26sum0j.png)
 
And now a sample login box will appear where you have to select the `Allow` button.

![sample login](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7ewmh9o3lctv4pg1l2q.png) 

After that, you will have your access token which we will be going to test out in postman in the next step.

![access token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/epgdci0gb8e7t9m6to84.png)
 
## 5. Test Access Token from Postman

This is the final step of this tutorial.
First, copy the `Access Token` and open the Postman app. 
Past `https://api.linkedin.com/v2/me` in the request URL field and set the method as `GET`. (You can learn more about the LinkedIn Sign-In Methods [here](https://docs.microsoft.com/en-gb/linkedin/consumer/integrations/self-serve/sign-in-with-linkedin))
In the `Authorization` tab, set the authorization type as `OAuth 2.0` paste the access token in the relevant field and click on the `Send` button next to the request URL field.

![postman test access token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2bdpfnn1kwbde1r91rw.png)
 
If you are getting your first name and last name that means your access token is working properly.

I appreciate you spending the time, very much. I wish you had more grasp of the LinkedIn sign-in process after reading this post. I highly recommend reading over the official documentation [here](https://docs.microsoft.com/en-gb/linkedin/consumer/integrations/self-serve/sign-in-with-linkedin).

_Feel free to correct my mistakes and let me know how to improve them. You can connect with me on [LinkedIn](https://www.linkedin.com/in/ashutoshdash1999/) and [Twitter](https://twitter.com/ashutoshdash99)._