Get authorization for users scopes with the new Google Identity Service (GSI) - React Frontend - Node.JS Backend

google_authorization_with_GSI.ts

// Backend with Node.JS

import { google } from "googleapis";

const GOOGLE_CLIENT_ID = process.env.GOOGLE_CLIENT_ID;
const GOOGLE_CLIENT_SECRET = process.env.GOOGLE_CLIENT_SECRET;

const oauth2Client = new google.auth.OAuth2(GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, "http://localhost:3000");

const googleAuthorization = async (response: any) => {
    const { code } = response;
    const { tokens } = await oauth2Client.getToken(code);

    // If you need to prolonged access, store the refresh token in the database
    // You can use the refresh token to make API calls without the user being present
    /**
     * oauth2Client.setCredentials({ refresh_token: REFRESH_TOKEN });
     * const calendar = google.calendar({ version: "v3", auth: oauth2Client });
     */
    console.log(tokens.refresh_token);

    // If you need short-lived access, make use of the access token
    // You can use the access token to make API calls on behalf of the user
    /**
     * oauth2Client.setCredentials({ access_token: ACCESS_TOKEN });
     * const calendar = google.drive({ version: "v3", auth: oauth2Client });
     */
    console.log(tokens.access_token);

    // Note: You should not send the tokens to the client
    return tokens;
}

google_authorization_with_GSI.tsx

// Frontend with React

import React from "react";

declare global {
    interface Window {
        google?: any;
    }
}

const GoogleAuthorization = () => {
    const AuthorizeWithGoogle = () => {
        const client = window.google.accounts.oauth2.initCodeClient({
            ux_mode: 'popup',
            client_id: process.env.GOOGLE_CLIENT_ID,
            scope: 'openid email profile https://www.googleapis.com/auth/calendar',
            callback: (res: any) => {
                console.log("success", res);
                // send response to the backend
            },
        });

        client.requestCode();
    };

    // Load Script
    const scriptRef = React.useRef<HTMLDivElement>(null);
    React.useEffect(() => {
        const script = document.createElement("script");

        script.src = "https://accounts.google.com/gsi/client";
        script.async = true;
        script.defer = true;

        if (scriptRef.current) {
            scriptRef.current.appendChild(script);
        }

        return () => {
            scriptRef.current?.removeChild(script);
        };
    }, [scriptRef]);

    return (
        <>
            <div ref={scriptRef}></div>

            <button onClick={AuthorizeWithGoogle}>Authorize</button>
        </>
    );
};

export default GoogleAuthorization;