feat: 🎸 implement Google auth Provider and Consumer components

Author: streamich

package.json

@@ -112,7 +112,8 @@
     "setupFiles": [
       "./src/__tests__/setup.js"
     ],
-    "testEnvironment": "jest-environment-jsdom-global"
+    "testEnvironment": "jest-environment-jsdom-global",
+    "testURL": "http://localhost"
   },
   "keywords": [
     "react",

src/GoogleAuth/__story__/story.tsx

@@ -4,14 +4,34 @@ import {createGoogleAuthContext} from '..';
 // import ShowDocs from '../../../.storybook/ShowDocs'
 
 const clientId = '305188012168-htfit0k0u4vegn0f6hn10rcqoj1m77ca.apps.googleusercontent.com';
-const ctx1 = createGoogleAuthContext(clientId);
+const options = {
+  client_id: clientId,
+};
+const ctx1 = createGoogleAuthContext(options);
 
 storiesOf('Context/GoogleAuthButton', module)
   // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/GoogleAuthButton.md')}))
   .add('Default', () =>
     <ctx1.Provider>
-      <ctx1.Consumer>{({signIn}) =>
-        <button onClick={signIn}>Sign in with Google!</button>
-      }</ctx1.Consumer>
+      <ctx1.Consumer>{({loading, signIn, signOut, isSignedIn, user}) => {
+        if (loading) {
+          return 'Loading...';
+        }
+        console.log('user', user);
+        return (
+          <div>
+            <button onClick={isSignedIn ? signOut : signIn}>
+              {isSignedIn ? 'Log out' : 'Sign in with Google!'}
+            </button>
+            <div>Is signed in: {isSignedIn ? 'true' : 'false'}</div>
+            {user &&
+              <div>
+                <div>Name: {user.getBasicProfile().getName()}</div>
+                <div>JWT: {user.getAuthResponse().id_token}</div>
+              </div>
+            }
+          </div>
+        );
+      }}</ctx1.Consumer>
     </ctx1.Provider>
   );

src/GoogleAuth/gapi.ts

@@ -1,58 +1,107 @@
-export type GoogleAPI = any;
-
-let gapiCache: GoogleAPI;
+export interface GApi {
+  load(what: 'auth2', callback: () => void);
+  auth2: GApiAuth2;
+}
+
+export interface GApiAuth2InitOptions {
+  client_id: string;
+  scope?: string;
+}
+
+export interface GApiAuth2 {
+  init(options: GApiAuth2InitOptions): Promise<GApiAuth2Instance>;
+}
+
+export type GApiAuth2InstanceIsSignedInListener = (isSignedIn: boolean) => void;
+export type GApiAuth2InstanceCurrentUserListener = (isSignedIn: GApiAuth2User) => void;
+export interface GApiAuth2Instance {
+  signIn(): Promise<GApiAuth2User>;
+  signOut(): Promise<void>;
+  isSignedIn: {
+    get(): boolean;
+    listen(listener: GApiAuth2InstanceIsSignedInListener);
+  };
+  currentUser: {
+    get(): GApiAuth2User;
+    listen(listener: GApiAuth2InstanceCurrentUserListener);
+  };
+}
+
+export interface GApiAuth2User {
+  getId(): string;
+  isSignedIn(): boolean;
+  getHostedDomain(): string;
+  getGrantedScopes(): string;
+  getBasicProfile(): GApiAuth2BasicProfile;
+  getAuthResponse(): GApiAuth2AuthResponse;
+  reloadAuthResponse(): Promise<GApiAuth2AuthResponse>;
+  hasGrantedScopes(scopes: string): boolean;
+}
+
+export interface GApiAuth2BasicProfile {
+  getId(): string;
+  getName(): string;
+  getGivenName(): string;
+  getFamilyName(): string;
+  getImageUrl(): string;
+  getEmail(): string;
+}
+
+export interface GApiAuth2AuthResponse {
+  access_token: string;
+  id_token: string;
+  scope: string;
+  expires_in: string;
+  first_issued_at: string;
+  expires_at: string;
+}
+
+let gapiCache: GApi;
+
+export const getGapi = async (): Promise<GApi> => {
+  if (gapiCache) {
+    return gapiCache;
+  }
 
-export const getGapi = async (): Promise<GoogleAPI> => {
-    if (gapiCache) {
-        return gapiCache;
-    }
+  await new Promise(resolve => {
+    const gapicallback = `__gapicb${Date.now().toString(36)}`;
+    (window as any)[gapicallback] = () => {
+      delete (window as any)[gapicallback];
+      gapiCache = (window as any).gapi;
+      resolve();
+    };
 
-    await new Promise(resolve => {
-        const gapicallback = `__gapicb${Date.now().toString(36)}`;
-        (window as any)[gapicallback] = () => {
-            delete (window as any)[gapicallback];
-            gapiCache = (window as any).gapi;
-            resolve();
-        };
+    const script = document.createElement('script');
 
-        const script = document.createElement('script');
+    script.src = 'https://apis.google.com/js/platform.js?onload=' + gapicallback;
+    document.head.appendChild(script);
+  });
 
-        script.src = 'https://apis.google.com/js/platform.js?onload=' + gapicallback;
-        document.head.appendChild(script);
-    });
-
-    return gapiCache;
+  return gapiCache;
 };
 
 let gapiAuth2Cache;
 
-export const getGapiAuth2 = async (): Promise<any> => {
-    if (gapiAuth2Cache) {
-        return gapiAuth2Cache;
-    }
+export const getGapiAuth2 = async (): Promise<GApiAuth2> => {
+  if (gapiAuth2Cache) {
+    return gapiAuth2Cache;
+  }
 
-    const gapi = await getGapi();
+  const gapi = await getGapi();
 
-    await new Promise(resolve => {
-        gapi.load('auth2', () => {
-            gapiAuth2Cache = gapi.auth2;
-            resolve();
-        });
+  await new Promise(resolve => {
+    gapi.load('auth2', () => {
+      gapiAuth2Cache = gapi.auth2;
+      resolve();
     });
+  });
 
-    return gapiAuth2Cache;
+  return gapiAuth2Cache;
 };
 
-let GoogleAuthCache;
-
-export const getGapiAuthInstance = async (client_id: string) => {
-    if (GoogleAuthCache) {
-        return GoogleAuthCache;
-    }
-
-    const gapiAuth2 = await getGapiAuth2();
-
-    GoogleAuthCache = await gapiAuth2.init({client_id});
+export const getGapiAuthInstance = async (options: GApiAuth2InitOptions) => {
+  const gapiAuth2 = await getGapiAuth2();
+  const GoogleAuthCache = await gapiAuth2.init(options);
 
-    return GoogleAuthCache;
+  return GoogleAuthCache;
 };

src/GoogleAuth/index.ts

@@ -1,47 +1,123 @@
 import {h} from '../util';
 import {Component, createContext} from 'react';
-import {getGapiAuthInstance} from './gapi';
+import {
+  getGapiAuthInstance,
+  GApiAuth2InitOptions,
+  GApiAuth2Instance,
+  GApiAuth2InstanceIsSignedInListener,
+  GApiAuth2InstanceCurrentUserListener,
+  GApiAuth2User
+} from './gapi';
 
 export interface IGoogleAuthProviderProps {
   children;
 }
 
 export interface IGoogleAuthProviderState {
-  loading?: boolean;
-  signIn: () => Promise<void>;
+  loading: boolean;
+  signIn: () => Promise<GApiAuth2User>;
   signOut: () => Promise<void>;
-  user: any | null;
+  user: GApiAuth2User | null;
+  isSignedIn: boolean;
 }
 
 export interface IGoogleAuthConsumerProps {
   children: (state: IGoogleAuthProviderState) => React.ReactNode;
 }
 
-export const createGoogleAuthContext = (clientId: string) => {
+/**
+ * @param clientId Google App client ID.
+ * @param scope Scopes as a comma separated string.
+ */
+export const createGoogleAuthContext = (options: GApiAuth2InitOptions) => {
   const context = createContext({});
+  const googleAuthPromise = getGapiAuthInstance(options);
+  let googleAuthInstance: GApiAuth2Instance | undefined;
+  let isSignedInListener: GApiAuth2InstanceIsSignedInListener | undefined;
+  let currentUserListener: GApiAuth2InstanceCurrentUserListener | undefined;
 
-  let googleAuth;
-  const getAuthInstance = async () => {
-    if (!googleAuth) {
-      googleAuth = await getGapiAuthInstance(clientId);
-    }
-
-    return googleAuth;
-  };
+  googleAuthPromise.then((instance) => {
+    googleAuthInstance = instance;
+    googleAuthInstance.isSignedIn.listen((isSignedIn) => {
+      if (isSignedInListener) isSignedInListener(isSignedIn);
+    });
+    googleAuthInstance.currentUser.listen((user) => {
+      if (currentUserListener) currentUserListener(user);
+    });
+  }, console.error);
 
   class Provider extends Component<IGoogleAuthProviderProps, IGoogleAuthProviderState> {
+    signIn = async (): Promise<GApiAuth2User> => {
+      if (!googleAuthInstance) {
+        googleAuthInstance = await googleAuthPromise;
+      }
+
+      return await googleAuthInstance.signIn();
+    };
+
+    signOut = async (): Promise<void> => {
+      if (!googleAuthInstance) {
+        googleAuthInstance = await googleAuthPromise;
+      }
+
+      await googleAuthInstance.signOut();
+    };
+
+    onIsSignedIn: GApiAuth2InstanceIsSignedInListener = (isSignedIn) => {
+      if (isSignedIn) {
+        // Don't do anything here, because this case will be handled by
+        // this.onCurrentUser method. To prevent double re-render.
+      } else {
+        this.setState({
+          isSignedIn: false,
+          user: null,
+        });
+      }
+    };
+
+    onCurrentUser: GApiAuth2InstanceCurrentUserListener = (user) => {
+      // Only handle the case when user signs in. The other case should
+      // be handled by this.onIsSignedIn. To prevent double re-render.
+      if (user.isSignedIn()) {
+        this.setState({
+          isSignedIn: true,
+          user
+        });
+      }
+    };
+
     state: IGoogleAuthProviderState = {
-      signIn: async () => {
-        const googleAuth = await getAuthInstance();
-        await googleAuth.signIn();
-      },
-      signOut: async () => {
-        const googleAuth = await getAuthInstance();
-        await googleAuth.signOut();
-      },
+      loading: !googleAuthInstance,
+      signIn: this.signIn,
+      signOut: this.signOut,
       user: null,
+      isSignedIn: false,
     };
 
+    async componentDidMount () {
+      if (!googleAuthInstance) {
+        googleAuthInstance = await googleAuthPromise;
+      }
+
+      isSignedInListener = this.onIsSignedIn;
+      currentUserListener = this.onCurrentUser;
+
+      const isSignedIn = googleAuthInstance.isSignedIn.get();
+
+      this.setState({
+        loading: false,
+        isSignedIn,
+        user: isSignedIn ? googleAuthInstance.currentUser.get() : null,
+      });
+    }
+
+    componentWillUnmount () {
+      if (isSignedInListener === this.onIsSignedIn)
+        isSignedInListener = undefined;
+      if (currentUserListener === this.onCurrentUser)
+        currentUserListener = undefined;
+    }
+
     render () {
       return h(context.Provider, {value: this.state}, this.props.children);
     }