FacebookSetup.md

Create Facebook App Auth

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

1. Facebook Developers Setup

1.1 Create your app on Facebook

To integrate Facebook Login into a website or application you need to create a Facebook App at https://developers.facebook.com/apps/

The steps are fairly straightforward and easy. Save the App ID that you get once you have created the app

The name of the App is what the users will see in the facebook pop up. Add a good app icon as well if possible

2. Express Code Setup

2.1 Update Modal

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

For just Facebook we will need only the firstName , facebookId , 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.2 Create Routes

We will create a POST route to /facebook/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/b3b12eca9fdc9f742bb49ffb4b0ba39b

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-facebook-login

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/318916c37aa8607066f3c9f0fac7e4a4

Ensure that you use your own appId when you use the <FacebookLogin/> component from react-facebook-login

3.2 Handle callback

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

If everything looks good, make a POST API call to facebook/info

handleFacebookReponse = (data) => {

	this.setState({
		showLoading: true
	})

	const {name, email, picture: {data: {url}}, userID} = data
	let newUser = {name, email, image: url, facebookId: userID}

	axios.post(`${config.API_URL}/api/facebook/info`, newUser , {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 handleFacebookReponse function was implemented