# React Gmail Login API Integration with an example

In a world where Spotify, Netflix, Instagram, Airbnb, and more dominate the digital landscape with their React-built platforms, managing individual sign-ups can be overwhelming. That's where the convenience of a Gmail login option steps in, streamlining our experience and saving valuable time and energy.

React application is compatible with lots of open-source libraries. When it comes to authentication there are plenty of them but we can proceed with `react-google-login`

So, we'll discuss the steps to integrate the same in your react app.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674586152270/9523502f-75b5-4678-8c59-41aad04da449.png align="center")

1. Create Client Id for OAuth login from the developer console here - [https://console.cloud.google.com/](https://console.cloud.google.com/)
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674586481754/3cca12d4-af35-474a-9d4f-3f11f7970fa7.png align="center")
    
2. Create the project with all the details.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674586626596/d8de39bf-e212-4ba7-b5a1-85e25c590669.webp align="center")
    
3. After that, select the created project. Now head towards the left sidebar menu and click on the **APIs & Services > OAuth consent screen**  menu as shown below:
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674586853550/3207dee9-d256-462f-b65a-a90164595381.png align="center")
    
4. On the next screen, select the **External** radio option and hit create.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674586972605/9c8cee82-3650-468f-8082-31866fa5acce.webp align="center")
    
5. Fill up all the details as shown below and complete it further.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674587048152/5cc92228-8301-4ca2-928c-48f5b9e2bfa0.webp align="center")
    
6. Now, open the left sidebar and select the OAuth option as mentioned.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674599352019/ddcee011-cc9f-4e7f-af72-9d86da924de0.png align="center")
    
    7\. Now, add the details as mentioned.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674599476737/17c24a2e-e2b6-4e94-b6b2-2214b7886a79.png align="center")
    

Now, you will abel to see the **client Id** that can be used in the component.

Once, you're done with this process, you need to create the React app with these steps.

1. Create the new app
    
    `npx create-react-app react-portal-app`
    
2. Install the bootstrap library
    
    `npm install bootstrap --save`
    
3. Now, install the react-google-login package that will provide the functionalities.
    
    `npm install react-google-login`
    
4. Create the google component under the src folder as - **googlebutton.component.js** and add the following code
    
    ```javascript
    import React, { Component } from "react";
    import { GoogleLogin, GoogleLogout } from "react-google-login";
    
    // You have to replace this client ID as per your app from Google console
    const CLIENT_ID =
      "827529413912-celsdkun_YOUR_API_KEY_lsn28.apps.googleusercontent.com";
    
    class GoogleLoginComponent extends Component {
      constructor() {
        super();
        this.state = {
          isLoggedIn: false,
          userInfo: {
            name: "",
            emailId: "",
          },
        };
      }
    
      // Success Handler
      responseGoogleSuccess = (response) => {
        console.log();
        let userInfo = {
          name: response.profileObj.name,
          emailId: response.profileObj.email,
        };
        this.setState({ userInfo, isLoggedIn: true });
      };
    
      // Error Handler
      responseGoogleError = (response) => {
        console.log(response);
      };
    
      // Logout Session and Update State
      logout = (response) => {
        console.log(response);
        let userInfo = {
          name: "",
          emailId: "",
        };
        this.setState({ userInfo, isLoggedIn: false });
      };
    
      render() {
        return (
          <div className="row mt-5">
            <div className="col-md-12">
              {this.state.isLoggedIn ? (
                <div>
                  <h1>Welcome, {this.state.userInfo.name}</h1>
    
                  <GoogleLogout
                    clientId={CLIENT_ID}
                    buttonText={"Logout"}
                    onLogoutSuccess={this.logout}
                  ></GoogleLogout>
                </div>
              ) : (
                <GoogleLogin
                  clientId={CLIENT_ID}
                  buttonText="Sign In with Google"
                  onSuccess={this.responseGoogleSuccess}
                  onFailure={this.responseGoogleError}
                  isSignedIn={true}
                  cookiePolicy={"single_host_origin"}
                />
              )}
            </div>
          </div>
        );
      }
    }
    export default GoogleLoginComponent;
    ```
    
    This component will provide the google sign in and sign out options.
    
5. Add the selector of the component in your app.js file
    
    ```javascript
    import { Component } from "react";
    import "./App.css";
    import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
    import GoogleLoginComponent from "./googlebutton.component";
    
    class App extends Component {
    
      render() {
        return (
          <div className="App container">
            <h2>Welcome to React App!</h2>
            <GoogleLoginComponent />
          </div>
        );
      }
    }
    export default App;
    ```
    

Finally, you can start the app with `npm start` and its Boom!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1674600192142/135a7e07-dd05-46e5-aa12-a6c26f606ae9.png align="center")

You have to be careful while mentioning your URLs in the OAuth configuration, sometimes it takes some time for the configuration at google API end. Once its done, you can start to explore the different parameters that comes in the response.

If you liked it then please share it and hit the like button because,

A person who feels appreciated will do more than expected! Happy coding :)