move authentication component to utils

Author: Allicolyer

packages/gatsby-theme/src/components/Account.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { Query } from 'react-apollo';
 import { ViewerQuery } from '../graphqlTypes';
 import gql from 'graphql-tag';
-import GithubAuth from './GithubAuth';
 import { Text, Image, Flex } from './shared/base';
 import { Link } from 'gatsby';
 import { CenteredLoader } from './Loader';
+import CustomButton from './CustomButton';
+import { loginUser } from '../utils/auth';
 
 const Account = () => {
   return (
@@ -30,7 +31,11 @@ const Account = () => {
         if (data.viewer && data.viewer.user) {
           return <Profile user={data.viewer.user} />;
         }
-        return <GithubAuth> Sign up </GithubAuth>;
+        return (
+          <CustomButton onClick={() => loginUser()} type="github">
+            Sign up
+          </CustomButton>
+        );
       }}
     </Query>
   );

packages/gatsby-theme/src/components/GithubAuth.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import Layout from '../components/layout';
-import GithubAuth from '../components/GithubAuth';
 import { Query } from 'react-apollo';
 import gql from 'graphql-tag';
 import { ViewerQuery } from '../graphqlTypes';
 import { navigate } from 'gatsby';
 import { CenteredLoader } from '../components/Loader';
 import { Flex, Text, Box } from '../components/shared/base';
+import CustomButton from '../components/CustomButton';
+import { loginUser } from '../utils/auth';
 
 const Signup = () => (
   <Query<ViewerQuery>
@@ -47,7 +48,9 @@ const SignupPage = () => {
           Lorem ipsum dolor sit amet.
         </Text>
         <Box m={4}>
-          <GithubAuth> Sign in with Github </GithubAuth>
+          <CustomButton onClick={() => loginUser()} type="github">
+            Sign in with Github
+          </CustomButton>
         </Box>
       </Flex>
     </Layout>

packages/gatsby-theme/src/pages/signup.tsx

@@ -1,5 +1,6 @@
 import gql from 'graphql-tag';
 import { client } from '../Apollo';
+import config from '../../config';
 
 const TOKEN_KEY = 'token';
 
@@ -10,6 +11,7 @@ const AUTHENTICATE_USER_MUTATION = gql`
     }
   }
 `;
+
 export const authenticateUser = async (code: string) => {
   const res = await client.mutate({
     mutation: AUTHENTICATE_USER_MUTATION,
@@ -21,11 +23,52 @@ export const authenticateUser = async (code: string) => {
   client.resetStore();
 };
 
-export const getAuthToken = () => {
-  return localStorage.getItem('token');
+export const loginUser = async () => {
+  const popup = openPopup();
+  const code = await listen();
+  try {
+    await authenticateUser(code);
+  } catch (e) {
+    console.error(e);
+  }
+  popup.close();
 };
 
 export const logoutUser = () => {
   localStorage.removeItem(TOKEN_KEY);
   client.resetStore();
 };
+
+export const getAuthToken = () => {
+  return localStorage.getItem('token');
+};
+
+const listen = async () => {
+  return new Promise(resolve => {
+    window.addEventListener('message', receiveMessage, false);
+    function receiveMessage(event: any) {
+      if (event.data) {
+        window.removeEventListener('message', receiveMessage);
+        resolve(event.data);
+      }
+    }
+  });
+};
+
+const openPopup = () => {
+  const width = 600,
+    height = 600;
+  const left = window.innerWidth / 2 - width / 2;
+  const top = window.innerHeight / 2 - height / 2;
+  const url = `https://github.com/login/oauth/authorize?scope=user:email&client_id=${
+    config.githubClientId
+  }`;
+
+  return window.open(
+    url,
+    '',
+    `toolbar=no, location=no, directories=no, status=no, menubar=no,
+      scrollbars=no, resizable=no, copyhistory=no, width=${width},
+      height=${height}, top=${top}, left=${left}`,
+  );
+};