In this tutorial, we will be integrating Google sign-in for registration or login purpose in our React application using Passport authentication mechanism in Node.js server. Photo by on Steve Halama Unsplash In today’s world, the user prefers single sign-in option using any of their social accounts in every site they visit rather than giving their credentials again to another person. So, it is necessary now to integrate single sign-in to make thing easier, and allowing only verified users in your application which mutually benefits both the user and the app owners. Straightaway, let’s jump into development. Create React App with Google Sign-in button : Let’s create a basic react application using Step 1 create-react-app $ npx create-react-app my-app$ cd my-app$ npm start : In App.js in the root directory, add the following HTML code to create a button after the P tag in the render() function. Step 2 <a href="/auth/google" class="button"><div><span class="svgIcon t-popup-svg"><svgclass="svgIcon-use"width="25"height="37"viewBox="0 0 25 25"><g fill="none" fill-rule="evenodd"><pathd="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"fill="#4285F4"/><pathd="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"fill="#34A853"/><pathd="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"fill="#FBBC05"/><pathd="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"fill="#EA4335"/></g></svg></span><span class="button-label">Sign in with Google</span></div></a> : Add the following CSS to dress up your button in the index.css file in the root directory. Step 3 a {-webkit-tap-highlight-color: transparent;text-decoration: none;} .button {display: inline-block;max-width: 300px;margin-top: 50px;border: 0;padding: 0 18px;text-align: left;width: 100%;height: 37px;border-radius: 4px;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-moz-font-feature-settings: "liga" on;color: rgba(0, 0, 0, 0.84) !important;fill: rgba(0, 0, 0, 0.84) !important;box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);font: inherit;outline: none;} .button .svgIcon {vertical-align: middle;fill: rgba(0, 0, 0, 0.54);padding-right: 4px;height: 37px;display: inline-block;} That’s it. You have created a button with the link to navigate to Google authentication page on click (Check href attribute in <a> tag). /auth/google React app with Google sign-in button. Note: Now, our client is running in the port 3000. We will be handling Routes later in this tutorial. So I request you to install the following module in your application. $ npm i --save react-router-dom And replace the code in the index.js file with the below code. import React from "react";import ReactDOM from "react-dom";import "./index.css";import App from "./App";import registerServiceWorker from "./registerServiceWorker";import { Route, Switch } from "react-router-dom";import { BrowserRouter } from "react-router-dom"; ReactDOM.render(<BrowserRouter><Switch><Route path="/" component={App} /></Switch></BrowserRouter>,document.getElementById("root"));registerServiceWorker(); We are just importing Route, Switch and BrowserRouter from “react-router-dom” and replacing some code in render function to support routes in our application. We will access query param from URL and replace it later in this tutorial. You could able to access router properties (props in react) only when you have configured your App to support router. To know more about the router and its configuration, go through this . link Set up Node.js server and configure Passport I hope now you see the below screen with the button. Let’s create a Node.js server now and implement the server side logic. I am going to create a separate Node.js server and run in another port since maintaining server and client in different code base will be easier to maintain and doesn’t depend on each other as per my knowledge. Step 4: Create Node.js server and install Passport modules. If you aren’t aware of creating a Node.js server, you don’t need to worry. I have created a tutorial on creating a Node.js server from scratch to production. Kindly go through the below link and follow the topic called and create one before proceeding if you don’t have a server. Create a sample Node.js server _In this tutorial, we will be creating a sample Node.js server, pushing it to BitBucket and using PM2, we will automate…_medium.com Deploy your Node.js app in production and use BitBucket to automate your deployment. So we have a server now but we don’t have passport module in our server. Navigate to your server and install and passport passport-google-oauth $ cd my-server/$ npm i passport --save$ npm i passport-google-oauth --save We have installed the required modules. Let’s make use of it by adding the below two lines in the app.js file. var passport = require(“passport”); // at header app.use(passport.initialize()); // after line no.20 (express.static)require("./config/passport"); Change default server port from 3000 to 4500 to avoid conflicts between server and client. Go to bin/www file and change 3000 to 4500 and start your application by issuing the following command. $ npm start Note: Now, our server is running on the port 4500. Step 5: Let’s create a passport.js file which handles our passport authentication mechanisms. Create a folder called in your root directory and inside create a file called with the following content in it. config passport.js var passport = require("passport");var GoogleStrategy = require("passport-google-oauth").OAuth2Strategy; passport.serializeUser(function(user, done) {done(null, user);}); passport.deserializeUser(function(user, done) {done(null, user);}); passport.use(new GoogleStrategy({clientID: "GOOGLE_CLIENT_ID",clientSecret: "GOOGLE_CLIENT_SECRET",callbackURL: "http://localhost:4500/auth/google/callback"},function(accessToken, refreshToken, profile, done) {var userData = {email: profile.emails[0].value,name: profile.displayName,token: accessToken};done(null, userData);})); As you see, we need GOOGLE_CLIENT_ID & GOOGLE_CLIENT_SECRET for your application. You can get one at https://console.developers.google.com/ Step 6: Configure your app in the Google Developers dashboard Navigate to and create your application. Google developers console Credentials page in Google Developers Console. In the above page, click and select Create credentials OAuth client ID. In the next screen, select Application type as a and name your application. Web application In the Restrictions part, you need to provide your app URL and redirect URL to prevent others misusing your application. Provide your app URL as follows in the . You can add multiple entries here. Authorised JavaScript origins http://localhost:4500 Since our server is running in the port 4500. (Allowing server to authenticate) Provide your redirect URI as follows in the . Authorised redirect URIs http://localhost:4500/auth/google/callback Since we need to redirect back to our server after Google authentication gets completed. (We have also mentioned this URL in our file, look at it) passport.js Save and get your GOOGLE_CLIENT_ID & GOOGLE_CLIENT_SECRET key and paste it in your passport.js file. Finally, click which is above and search for Google+ API. Select and enable to get a user’s Google+ profile. Library Credentials Step 7: Create routes to handle Google Authentication Let’s create an API call called /auth/google which our client calls after clicking the button. Sing up with Google Go to in folder and add the following line at the header. index.js routes var passport = require(“passport”); and below lines after the default get request. /* GET Google Authentication API. */router.get("/auth/google",passport.authenticate("google", { scope: ["profile", "email"] })); router.get("/auth/google/callback",passport.authenticate("google", { failureRedirect: "/", session: false }),function(req, res) {var token = req.user.token;res.redirect(" " + token);}); http://localhost:3000?token= That’s it. You have configured your server. I will explain what is happening in the above lines. First route which gets the request from the client, authenticate with Google using a passport. We are providing “profile” & “email” in scope array to get user’s profile and email address. You can check the list of available scopes at . /auth/google Google OAuth 2.0 Scopes A Second route, /auth/google/callback which invokes after the user completes the Google Authentication. When you check at the passport.js file, we are creating an object with required fields sending it back to the callback function. In routes/index.js file, in callback function in /auth/google/callback route, we access this object through . req.user How req.user holds that value? Because we use and function in a file which holds the response received from Google in value and so we can access this object through the same. serializeUser deserializeUser passport.js user Finally, we are redirecting back to our client app which is running in the port 3000 with a token in the query param. Step 8: Receive token and authenticate the user Now let’s receive this token and authenticate the user. Back to our client app. Install the following to parse query string in our react app using the following command from your root directory. module npm i query-string --save import this module in our App.js file at the header. import queryString from "query-string"; Now, let’s create a component lifecycle method called componentWillMount. This method will get invoked when our app starts. Check out for more info. React Life Cycle Components Insert the following code in App.js before render method. componentWillMount() {var query = queryString.parse(this.props.location.search);if (query.token) {window.localStorage.setItem("jwt", query.token);this.props.history.push("/");}}render(){...} This method will get the query param token from the URL during initialization and set it in local storage. Finally, replace the token in the URL. Now you have a token which represents the visitor is an authenticated user to use your app. Use this token in every request to your API server from now. Hope this will be useful to implement basic authentication system in your MERN stack app. Client App: https://github.com/BalasubramaniM/react-nodejs-passport-app Server App: https://github.com/BalasubramaniM/react-nodejs-passport-server Thank you.
