Create a Google Login Button With No Dependencies in React / Next.js

When developing applications, it's important to consider the number of dependencies your project relies on. While dependencies can often make development easier and faster, they can also introduce security vulnerabilities, compatibility issues, and increase the overall complexity of your codebase. That's why it's always a good idea to minimize the number of dependencies you use in your project whenever possible.

In this article, we'll be exploring how to create a Google login button in React without relying on any external dependencies. By leveraging the power of Next.js and React.js, we'll be able to create a simple, yet effective authentication flow that allows users to log in to your application using their Google account. So, let's dive in and see how we can achieve this with minimal dependencies.

Login Button Component

Here's our nice reusable GoogleLoginButton component:

import React, { useEffect } from "react";
import Script from "next/script";
import { useRouter } from "next/router";

export default function GoogleLoginBtn() {
  const router = useRouter();

  // Google will pass the login credential to this handler
  const handleGoogle = async (response) => {
    try {
      const result = await auth.handleGoogle({
        credential: response.credential,
        endpoint: '/path/to/auth/handler',
      });
      if (result) {
        router.push("/dashboard");
      } else {
        alert("Login failed");
      }
    } catch (err) {
      alert(`Error: ${err.message}`);
    }
  };

  useEffect(() => {
    // We check every 300ms to see if google client is loaded
    const interval = setInterval(() => {
      if (window.google) {
        clearInterval(interval);
        google.accounts.id.initialize({
          client_id: process.env.NEXT_PUBLIC_GOOGLE_OAUTH_CLIENT_ID, // Your client ID from Google Cloud
          callback: handleGoogle, // Handler to process login token
        });

        // Render the Google button
        google.accounts.id.renderButton(
          document.getElementById("google-login-btn"),
          {
            type: "standard",
            theme: "filled_blue",
            size: "large",
            text: "signin_with",
            shape: "rectangular",
          }
        );

        google.accounts.id.prompt();
      }
    }, 300);
  }, []); //eslint-disable-line

  return (
    <>
      <Script src="https://accounts.google.com/gsi/client" async defer></Script>
    </>
  );
}

We set up a useEffect() to check for the readiness of the Google client every 300ms. Next, we dynamically load the Google Client SKD. Once the user logs in, we pass the credential to handleGoogle(), which fires off a request to our API.

Handling the Back-End

Here's a short example of how you might implement this on the back-end:

export async function handler(req, res) {
  const endpoint = "https://oauth2.googleapis.com/tokeninfo";

  // Send request to Google to authenticate token
  try {
    const result = await fetch(`${endpoint}?id_token=${req.body.credential}`);
    if (!result.ok) {
      throw new Error("Failed to authenticate token");
    }
    const jwt = await result.json();
    /**
     * TODO: Code to look up user in DB by jwt.email
     */
  } catch (err) {
    return res.status(500).text(err.message);
  }
}

Pretty easy, huh? Google's tokeninfo endpoint will return the following JSON Web Token:

{
 // These six fields are included in all Google ID Tokens.
 "iss": "https://accounts.google.com",
 "sub": "110169484474386276334",
 "azp": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
 "aud": "1008719970978-hb24n2dstb40o45d4feuo2ukqmcc6381.apps.googleusercontent.com",
 "iat": "1433978353",
 "exp": "1433981953",

 // These seven fields are only included when the user has granted the "profile" and
 // "email" OAuth scopes to the application.
 "email": "[email protected]",
 "email_verified": "true",
 "name" : "Test User",
 "picture": "https://lh4.googleusercontent.com/-kYgzyAWpZzJ/ABCDEFGHI/AAAJKLMNOP/tIXL9Ir44LE/s99-c/photo.jpg",
 "given_name": "Test",
 "family_name": "User",
 "locale": "en"
}

You can use these fields however you like to link the Google user to the local user in your database.

Conclusion

By creating your own components like this, you eliminate the need for so many dependencies, and also potentially hundred, or even thousands, of lines of unnecessary code.

A couple of caveats:

You will be responsible for making sure your site is using the current version of the Google Client SDK and adhering to best practices. But in reality, I would rather be responsible for this than depend on some package maintainer that may or may not update their code.
You should check out Google's Branding Guidelines before implementing this into your design. Google does not allow certain design features of their own SDK button anymore, which I found out the hard way.