gapi-cjs

A gapi-script alternative which uses commonjs module. Has some changes in the gapiScript so that it eliminates errors like:

• this is set to undefined
• jest error - import can't be used outside module
• using of eval directly

Usage

npm i gapi-cjs

For gapi instance,

1import { gapi } from 'gapi-cjs'

You can create your own useGoogleLogin hook,

1import { gapi } from 'gapi-cjs';
2import { useState, useEffect } from 'react';
3
4export const useGoogleLogin = () => {
5  const [user, setUser] = useState(null);
6
7  useEffect(() => {
8    gapi.load('client:auth2', () => {
9      gapi.client
10        .init({
11          clientId:
12            '<client-id>',
13          scope: 'openid',
14        })
15        .then(() => {
16          const auth = gapi.auth2.getAuthInstance();
17          setUser(auth.currentUser.get().getBasicProfile());
18        });
19    });
20  }, []);
21
22  const signIn = async () => {
23    const auth = await gapi.auth2.getAuthInstance();
24    await auth.signIn();
25    const { access_token, id_token } = await auth.currentUser
26      .get()
27      .getAuthResponse();
28    return { access_token, id_token };
29  };
30
31  const signOut = async () => {
32    const auth = await gapi.auth2.getAuthInstance();
33    await auth.signOut();
34  };
35
36  return { user, signIn, signOut };
37};