LinkedInSetup.md

Create LinkedIn App Auth

Note: Entire working code can be found here https://github.com/ManishPoduval/third-party-auth

1. LinkedIn Developers Setup

1.1 Create your app on LinkedIn

Visit https://www.linkedin.com/developers/apps and create a new app for your project

1.2 Register all the info for the app

*Note: For the app to be created you need to have a LinkedIn page set up as well. For educational purposes, I already have a page called Root Learn (E-learning) created. You can use that :) or create your own page

1.3 Verify your app

You will need verify you app first. It must be approved by the admin of the page that you've linked your app with

1.4 Use the clientId from your Auth section

Once that is done, you will have a Client ID and a Client Secret in the Auth section of your app. (You will need these later in code)

1.5 Add Authorized redirect URLs

For development purposes, we will use localhost here but eventually the URL will change to your domain name

*Note: Here we have used http://localhost:3000/linkedin but that url can be anything you want. LinkedIn will automatically redirect to that url once SignIn is successful

PS: localhost is used only for development purposes

1.6 Let LinkedIn Review your app

Go to the Products section of your app and select Sign In with LinkedIn

2. Express Code Setup

2.0 Install superagent

We'll use superagent to make API requests instead of axios . Only because I was lazy to convert all the code

npm i superagent

2.1 Set up env

Create a .env file in the root directory of your project and add these three variables with their corresponding values

LINKEDIN_CLIENT_ID=YOUR_CLIENT_ID
LINKEDIN_CLIENT_SECRET=YOUR_CLIENT_SECRET
LINKEDIN_REDIRECT_URI=http://localhost:3000/linkedin

Replace YOUR_CLIENT_ID and YOUR_CLIENT_SECRET with the one that you got in step 1.4

Note: The LINKEDIN_REDIRECT_URI value is the same as in step 1.5

2.2 Update Modal

This is just an example of how our modal must looks if we are handling third party auth.

For just LinkedIn we will need only the firstName , lastName linkedInId , image and email keys, else you can keep all the rest as well

const { Schema, model } = require("mongoose");

const userSchema = new Schema({
	username: {
		type: String,
	},
	firstName: String,
	lastName: String,
	email: String,
	image: String,
	linkedInId: String,
	googleId: String,
	facebookId: String,
	password: String,
});


const User = model("User", userSchema);
module.exports = User;`

2.3 Create Routes

We will create a POST route to /linkedin/info which will fetch all the info about the user for us from LinkedIn, create the user in the DB and return us that user json.

Use this code as a reference https://gist.github.com/ManishPoduval/1443f008630c5e24e4f0fae9d86922ec

Note: Don't forget to link the routes in your app.js middleware

3. React Code Setup

3.0 Install package (if you haven't)

We will use this package to setup Facebook login

Please run this in your client side terminal

npm i react-linkedin-login-oauth2

3.1 Create Button Component

Create a new component in your code to show the LinkedIn Button Use the code below as a reference

https://gist.github.com/ManishPoduval/dac5fd23cf1f322698641b6bddbaa2b3

Ensure that you use your own clientId when you use the <LinkedIn /> component from react-linkedin-login-oauth2

clientId="YOUR_CLIENT_ID"

The redirectUri is the same one we set up in step 1.5

3.2 Handle success

We need to handle the success and failure conditions once the user successfully registers

Make this API call to linkedin/info

	axios.post(`${config.API_URL}/api/linkedin/info`, {code: data.code}, {withCredentials: true})
		.then((response) => {
			this.setState({
				loggedInUser: response.data.data,
				error: null,
				showLoading: false
			}, () => {
				this.props.history.push('/profile')
			});
		})

Refer the App.js file of the client side to see how the handleLinkedInSuccess function was implemented