GoogleSetup.md

Create Google App Auth

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

1. Google Developers Setup

1.1 Get your Google Dev client Id

• Go to the Credentials page.
• Click Create credentials > OAuth client ID.

• Select the Web application application type.

Add the Authorized Origins. Since we are in dev mode we'll use localhost, but later do change it to your own domain once you've deployed the app

• Name your OAuth 2.0 client and click Create

Save your Client ID to use it in our code later.

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 Google we will need only the firstName , lastName , googleId , 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 /google/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/33d738c67586fa9166f5a6ee6901f0bb

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

Please run this in your client side terminal

npm i react-google-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/60a6562cc7a9f0ee1b1a5cf1545f6534

Ensure that you use your own clientId when you use the <GoogleLogin/> component from react-google-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 google/info

handleGoogleSuccess= (data) => {

	this.setState({
		showLoading: true
	})

	const {givenName, familyName, email, imageUrl, googleId} = data.profileObj
	let newUser = {
		firstName: givenName,
		lastName: familyName,
		email,
		image: imageUrl,
		googleId
	}

	axios.post(`${config.API_URL}/api/google/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 handleGoogleSuccess function was implemented