Skip to content

Instantly share code, notes, and snippets.

Created September 28, 2020 19:49
Show Gist options
  • Save jakekara/652e3c3bf272cd682ae39b50f1c45062 to your computer and use it in GitHub Desktop.
Save jakekara/652e3c3bf272cd682ae39b50f1c45062 to your computer and use it in GitHub Desktop.
Authenticating with gapi in a react/typescript project

Authenticating with Google API in react/typescript project

This was surprisingly annoying to figure out.

I used this Google API documentation for vanilla JS, but it was a lot more trouble than I expected to get it working in a TypeScript React project.

Long story short, you need to install:

  • gapi-script
  • @types/gapi
  • types/gapi.auth2

For some architectural reason it seems the gapi npm package can't just be imported into the .tsx file.

import React, { ReactElement, useEffect, useState } from "react";
import { gapi } from "gapi-script";
import { config } from "dotenv";
config(); // I just don't like mixing import and require
const SCOPES = "";
const API_KEY = process.env.REACT_APP_GAPI_API_KEY;
console.log("client_id", CLIENT_ID);
console.log("process.env", process.env);
let done = false;
const initClient = (options: {
updateLoggedInStatus: (status: boolean) => void;
}) => {
if (done) {
done = true;
apiKey: API_KEY,
client_id: CLIENT_ID,
discoveryDocs: DISCOVERY_DOCS,
scope: SCOPES,
.then(() => {
// Listen for sign-in state changes.
console.log("gapi.auth2", gapi.auth2);
// Handle the initial sign-in state.
.catch((err: any) => {
console.error("Caught error", err);
function LogInOutButton(options: {
loggedIn: boolean;
logIn: () => void;
logOut: () => void;
}): ReactElement {
const { loggedIn, logIn, logOut } = options;
const buttonText = loggedIn ? "Log out" : "Log in";
const buttonAction = loggedIn ? logOut : logIn;
return <button onClick={buttonAction}>{buttonText}</button>;
export function GDrive(): ReactElement {
const [loggedInStatus, setLoggedInStatus] = useState<boolean>(false);
const [initiatedClient, setInitiatedClient] = useState<boolean>(false);
useEffect(() => {
gapi.load("client:auth2", () =>
updateLoggedInStatus: (status) => {
console.log("Login status", status);
}, [initiatedClient]);
return (
<div>You are {loggedInStatus ? "" : "not"} signed in</div>
logIn={() => gapi.auth2.getAuthInstance().signIn()}
logOut={() => gapi.auth2.getAuthInstance().signOut()}
Copy link

React can't find a declaration module for gapi-script, after i imported gapi in the component, and having installed those 3 packages that you have written.
Any solution for this ?

Copy link

I think you're correct and I had to add a .d.ts file containing:

declare module "gapi-script";

I don't have time to test it out now but if that works for you, would you let me know?

Best of luck.

Copy link

This doesn't work.
node-modules is not committed on github, so it will only work on my machine. And if you have setup github actions, it wont compile for the same reason - the package is only locally updated.
Do you know of any other workaround ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment