Migrate to New Google Identity Service (with React & NodeJS)

Here is the code sample of signing up users with the new Google Identity Service (GSI) using React & NodeJS.

Official Migration Guide: Link

1. Packages used

2. Client side code

Wrap your top component with the Provider and give your Google Client ID to it.

import { GoogleOAuthProvider } from "@react-oauth/google";

export const TopComponent = () => {
  return (
    <GoogleOAuthProvider clientId={GAPI_CLIENT_ID}>
      <YourApp />
    </GoogleOAuthProvider>
  )
}

Make a login function to retrieve the "code".

import { useGoogleLogin } from "@react-oauth/google";

// make a login function
const loginWitnGoogle = useGoogleLogin({
    onSuccess: (codeResponse) => {
      functionToSendToServer(codeResponse.code);
    },
    flow: "auth-code",
    ux_mode: "popup",
});

// attach the login function to the button
export const LoginPage = () => {
  return (
    <LoginButton onClick={loginWithGoogle}>Login with Google</LoginButton>
  )
}

3. Backend code

Use the client generated "code" to retrieve id_token. Then use id_token to get the user profile data (email, picture, etc).

import { OAuth2Client } from "google-auth-library";

const oAuth2Client = new OAuth2Client(
  process.env.GAPI_CLIENT_ID,
  process.env.GAPI_CLIENT_SECRET,
  "postmessage"
);

// use the "code" to get user info from Google
async function getUserInfo(code) {
  const { tokens } = await oAuth2Client.getToken(code);

  const ticket = await oAuth2Client.verifyIdToken({
      idToken: tokens.id_token,
      audience: process.env.GAPI_CLIENT_ID
  });

  const payload = ticket.getPayload();

  return {
      email: payload.email,
      googleId: payload.sub,
      picture: payload.picture,
      name: payload.name,
  };
}

Blog

Migrate to New Google Identity Service (with React & NodeJS)

Yuya Uzu

1. Packages used

2. Client side code

3. Backend code

Join Our Newsletter. No Spam, Only the good stuff.

Related