Integrating Google Sign-In with React: A Dev-Friendly Guide

Problem

Imagine a world where users have to remember a password for every single website they visit.

Oh wait, that's this world!

Let's fix that for your app by integrating Google Sign-In, so users can log in with their Big G credentials without breaking a sweat.

Solution

Integrating Google Sign-In into your React app is easier than debugging a typo in useEffect.

Seriously, it just takes two steps to welcome the Big G into your project. Let’s dive in!

---

Step 1: Registering Your App with Google

Before the magic happens, you need to tell Google about your app. Here’s how:

1. Go to the Google Cloud Console: https://console.cloud.google.com/.

2. Navigate to API & Services: Once inside, click on API & Services from the dashboard.
   

3. Credentials Sidebar: On the left-hand side, click on Credentials.

1. Create Credentials: In the top navbar, tap on Create Credentials and choose OAuth Client ID.

1. Configure OAuth Client:
   • Select Web Application as the Application Type.
   • Under Authorized JavaScript origins, add:
     • Your local server URL (e.g., http://localhost:3000).
     • The domain where you plan to deploy the app (e.g., https://yourdomain.com/signup).

1. Click Create: Google will now generate your Client ID and Secret.

2. Copy Client ID and Secret: Save these somewhere secure (but not in plain text, because we’re better than that).

Congratulations! Major setup is complete. Now it’s time to get our hands dirty with some code.

---

Step 2: Coding the Integration

We’ll be using the @react-oauth/google package. Why reinvent the wheel when someone’s already got it rolling?

1. Install the Package:

   npm install @react-oauth/google

1. Write the Code: Here’s a simple example to get you started:

   // App.jsx
   import { useState } from "react";
   import { GoogleOAuthProvider, GoogleLogin } from "@react-oauth/google";

   function Homepage() {
     const [authData, setAuthData] = useState(null);

     const gContainer = {
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',
       marginTop: '50px'
     };

     return (
       <GoogleOAuthProvider clientId={"YOUR_GOOGLE_CLIENT_ID_HERE"}>
         <div style={gContainer}>
           <GoogleLogin
             onSuccess={(credentialResponse) => {
               setAuthData(credentialResponse);
               console.log("Success!", credentialResponse);
             }}
             onError={() => {
               console.log("Login Failed");
             }}
           />
           {authData && (
             <div>
               <p>Credential: {authData.credential}</p>
               <p>Select By: {authData.select_by}</p>
             </div>
           )}
         </div>
       </GoogleOAuthProvider>
     );
   }

   export default Homepage;

1. Run Your App: Fire up your app with npm start or yarn start, and you’re good to go!

Now users can log in, and you’ll have access to their Google access token to authenticate them on your backend (or to marvel at in your console logs).

What Just Happened?

You’ve successfully added Google Sign-In to your React app by following these steps. When users log in, you’ll receive their access token.

You can call an API endpoint using this token to fetch user-related information. For example:

const userInfoEndpoint = `https://oauth2.googleapis.com/tokeninfo?id_token=${accessToken}`;

This request will return the user’s profile data.

It’s recommended to handle this on the backend to prevent misuse of your API for fake logins.

For a quick test, I’ll use LiveAPI to send a request to this endpoint and confirm if I can retrieve the user info from the token we obtained earlier.

And that’s it! You now have all the data you need from OAuth like profile picture, name, and email.

---

TL;DR

1. Register your app with Google Cloud Console to get a Client ID.
2. Use @react-oauth/google to integrate Google Sign-In in your React app.
3. Call the Google API endpoint to fetch user information securely from your backend.

Let me take one more minute of your time.

I’m working on a super-convenient doc-generation tool called LiveAPI.

LiveAPI takes your repository as input and outputs beautiful, secure API documentation for all the APIs you have.

Bonus points: It lets you execute APIs directly from the documentation and generate request snippets in any language.

Happy coding, and may the Big G be ever in your favor and LiveAPI save you some time!