Merge pull request #11 from streamich/feat-auth

Feat auth

Author: streamich

.gitignore

@@ -4,7 +4,6 @@ node_modules/
 /.nyc_output/
 /coverage/
 package-lock.json
-yarn.lock
 /lib/
 /modules/
 /.vscode/

README.md

@@ -71,6 +71,7 @@ const MyComponent = mock();
      - [`<WindowSizeSensor>`](./docs/en/WindowSizeSensor.md), [`withWindowSize()`](./docs/en/WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./docs/en/WindowSizeSensor.md#withwindowsize-decorator)
         - [`<WindowWidthSensor>`](./docs/en/WindowWidthSensor.md), [`withWindowWidth()`](./docs/en/WindowWidthSensor.md#withwindowwidth-hoc), and [`@withWindowWidth`](./docs/en/WindowWidthSensor.md#withwindowwidth-decorator)
   - [Context](./docs/en/Context.md)
+     - [Google Sign-in for Websites](./docs/en/GoogleAuth.md)
      - [`<Provider>`](./docs/en/Provider.md#provider), [`<Consumer>`](./docs/en/Provider.md#consumer), [`withContext()`](./docs/en/Provider.md#withcontext-hoc), and [`@withContext`](./docs/en/Provider.md#withcontext-decorator)
      - [`<Theme>`](./docs/en/theme.md#theme), [`<Themed>`](./docs/en/theme.md#themed), [`withTheme()`](./docs/en/theme.md#withtheme-hoc), and [`@withTheme`](./docs/en/theme.md#withtheme-decorator)
      - [`<CssVarsProvider>`](./docs/en/cssvars.md), [`<CssVars>`](./docs/en/cssvars.md#cssvars), [`withCssVars()`](./docs/en/cssvars.md#withcssvars-hoc), and [`@withCssVars`](./docs/en/cssvars.md#withcssvars-decorator)

docs/en/GoogleAuth.md

@@ -0,0 +1,42 @@
+# Google Sign-in for Websites
+
+React wrapper for [Google Sign-In for Websites](https://developers.google.com/identity/sign-in/web/).
+
+
+## Usage
+
+First use `createGoogleAuthContext` to create your context components. You need to obtain Google
+app `client_id` from [here](https://developers.google.com/identity/sign-in/web/sign-in#before_you_begin).
+
+Then wrap your entire app with `<Provider>` component and anywhere in your app use the `<Consumer>` component.
+
+```js
+import {createGoogleAuthContext} from 'libreact/lib/GoogleAuth';
+
+const {Provider, Conumer} = createGoogleAuthContext({
+  client_id: 'xxxxxxxx-yyyyyyyyyyyyyyyy.apps.googleusercontent.com',
+});
+
+<Provider>
+  <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>
+    );
+  }}</Consumer>
+</Provider>
+```

docs/en/README.md

@@ -41,6 +41,7 @@
      - [`<WindowSizeSensor>`](./WindowSizeSensor.md), [`withWindowSize()`](./WindowSizeSensor.md#withwindowsize-hoc), and [`@withWindowSize`](./WindowSizeSensor.md#withwindowsize-decorator)
         - [`<WindowWidthSensor>`](./WindowWidthSensor.md), [`withWindowWidth()`](./WindowWidthSensor.md#withwindowwidth-hoc), and [`@withWindowWidth`](./WindowWidthSensor.md#withwindowwidth-decorator)
   - [Context](./Context.md)
+     - [Google Sign-in for Websites](./GoogleAuth.md)
      - [`<Provider>`](./Provider.md#provider), [`<Consumer>`](./Provider.md#consumer), [`withContext()`](./Provider.md#withcontext-hoc), and [`@withContext`](./Provider.md#withcontext-decorator)
      - [`<Theme>`](./theme.md#theme), [`<Themed>`](./theme.md#themed), [`withTheme()`](./theme.md#withtheme-hoc), and [`@withTheme`](./theme.md#withtheme-decorator)
      - [`<CssVarsProvider>`](./cssvars.md), [`<CssVars>`](./cssvars.md#cssvars), [`withCssVars()`](./cssvars.md#withcssvars-hoc), and [`@withCssVars`](./cssvars.md#withcssvars-decorator)

docs/en/SUMMARY.md

@@ -49,6 +49,7 @@
   * [WindowSizeSensor](WindowSizeSensor.md)
     * [WindowWidthSensor](WindowWidthSensor.md)
 * [Context](Context.md)
+  * [Google Sign-in for Websites](GoogleAuth.md)
   * [Provider](Provider.md)
   * [Theming](theme.md)
   * [CSS Variables](cssvars.md)

package.json

@@ -55,9 +55,9 @@
     "enzyme-to-json": "^3.3.4",
     "gulp": "3.9.1",
     "gulp-typescript": "3",
-    "jest": "22.1.2",
-    "jest-environment-jsdom": "^22.1.4",
-    "jest-environment-jsdom-global": "^1.0.3",
+    "jest": "^23.6.0",
+    "jest-environment-jsdom": "^23.4.0",
+    "jest-environment-jsdom-global": "^1.1.0",
     "mocha": "5.0.0",
     "git-cz": "^1.7.0",
     "react-markdown": "3.1.4",
@@ -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

@@ -0,0 +1,37 @@
+import {createElement as h} from 'react';
+import {storiesOf} from '@storybook/react';
+import {createGoogleAuthContext} from '..';
+import ShowDocs from '../../../.storybook/ShowDocs'
+
+const clientId = '305188012168-htfit0k0u4vegn0f6hn10rcqoj1m77ca.apps.googleusercontent.com';
+const options = {
+  client_id: clientId,
+};
+const ctx1 = createGoogleAuthContext(options);
+
+storiesOf('Context/GoogleAuthButton', module)
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/GoogleAuth.md')}))
+  .add('Default', () =>
+    <ctx1.Provider>
+      <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

@@ -0,0 +1,105 @@
+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;
+  }
+
+  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');
+
+    script.src = 'https://apis.google.com/js/platform.js?onload=' + gapicallback;
+    document.head.appendChild(script);
+  });
+
+  return gapiCache;
+};
+
+let gapiAuth2Cache;
+
+export const getGapiAuth2 = async (): Promise<GApiAuth2> => {
+  if (gapiAuth2Cache) {
+    return gapiAuth2Cache;
+  }
+
+  const gapi = await getGapi();
+
+  await new Promise(resolve => {
+    gapi.load('auth2', () => {
+      gapiAuth2Cache = gapi.auth2;
+      resolve();
+    });
+  });
+
+  return gapiAuth2Cache;
+};
+
+export const getGapiAuthInstance = async (options: GApiAuth2InitOptions) => {
+  const gapiAuth2 = await getGapiAuth2();
+  return await gapiAuth2.init(options);
+};

src/GoogleAuth/index.ts

@@ -0,0 +1,130 @@
+import {h} from '../util';
+import {Component, createContext} from 'react';
+import {
+  getGapiAuthInstance,
+  GApiAuth2InitOptions,
+  GApiAuth2Instance,
+  GApiAuth2InstanceIsSignedInListener,
+  GApiAuth2InstanceCurrentUserListener,
+  GApiAuth2User
+} from './gapi';
+
+export interface IGoogleAuthProviderProps {
+  children;
+}
+
+export interface IGoogleAuthProviderState {
+  loading: boolean;
+  signIn: () => Promise<GApiAuth2User>;
+  signOut: () => Promise<void>;
+  user: GApiAuth2User | null;
+  isSignedIn: boolean;
+}
+
+export interface IGoogleAuthConsumerProps {
+  children: (state: IGoogleAuthProviderState) => React.ReactNode;
+}
+
+/**
+ * @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;
+
+  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 = {
+      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);
+    }
+  }
+
+  return {
+    Provider,
+    Consumer: context.Consumer as React.SFC<IGoogleAuthConsumerProps>,
+  };
+};