Setup apollo client auth link

package.json

@@ -34,6 +34,7 @@
     "apollo-cache-persist": "^0.1.1",
     "apollo-client": "^2.3.5",
     "apollo-link": "^1.2.2",
+    "apollo-link-context": "^1.0.9",
     "apollo-link-error": "^1.1.0",
     "apollo-link-http": "^1.5.4",
     "apollo-link-state": "^0.4.2",

src/components/App/index.js

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-named-as-default, no-console */
 
 import React from 'react';
+import { get } from 'lodash';
 import { BrowserRouter as Router, Route } from 'react-router-dom';
 import { ApolloClient } from 'apollo-client';
 import {
@@ -11,6 +12,7 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { ApolloLink } from 'apollo-link';
 import { ApolloProvider } from 'react-apollo';
+import { setContext } from 'apollo-link-context';
 import { withClientState } from 'apollo-link-state';
 import { persistCache } from 'apollo-cache-persist';
 import { Provider } from 'react-redux';
@@ -62,6 +64,22 @@ export default class App extends React.Component {
       },
     });
 
+    const authLink = setContext((_, previousContext) => {
+      // get the authentication token from the cache
+      const token = get(
+        previousContext,
+        'cache.data.data["$ROOT_QUERY.githubAuth"].token',
+      );
+
+      // return the headers to the context so httpLink can read them
+      return {
+        headers: {
+          ...previousContext.headers,
+          authorization: token ? `Bearer ${token}` : '',
+        },
+      };
+    });
+
     const client = new ApolloClient({
       link: ApolloLink.from([
         onError(({ graphQLErrors, networkError }) => {
@@ -74,6 +92,7 @@ export default class App extends React.Component {
           if (networkError) console.log(`[Network error]: ${networkError}`);
         }),
         stateLink,
+        authLink,
         new HttpLink({
           uri: process.env.REACT_APP_GITHUB_API_URL,
           credentials: 'same-origin',

src/components/GetStarted/index.fixture.js

@@ -0,0 +1,33 @@
+import { GetStarted } from '.';
+
+const baseProps = {
+  saveGithubToken: () => {},
+  setLoadingToken: () => {},
+  loadingToken: false,
+};
+
+export default [
+  {
+    component: GetStarted,
+    name: 'Not loading the token',
+    props: {
+      ...baseProps,
+    },
+  },
+  {
+    component: GetStarted,
+    name: 'Loading the token',
+    props: {
+      ...baseProps,
+      loadingToken: true,
+    },
+  },
+  {
+    component: GetStarted,
+    name: 'With error',
+    props: {
+      ...baseProps,
+      error: 'Borked',
+    },
+  },
+];

src/components/GetStarted/index.js

@@ -0,0 +1,39 @@
+/* eslint-disable no-return-assign */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
+import { Query } from 'react-apollo';
+
+import style from './style.css';
+
+export function GetStarted({ data }) {
+  console.log(data);
+  return <div className={style.container} />;
+}
+
+GetStarted.propTypes = {
+  data: PropTypes.shape({}).isRequired,
+};
+
+// GetStarted.defaultProps = {
+
+// };
+
+const GET_CURRENT_USER = gql(`
+query {
+	viewer {
+    login
+    avatarUrl
+    url
+  }
+}
+`);
+
+export default function GetStartedContainer() {
+  return (
+    <Query query={GET_CURRENT_USER}>
+      {({ data, client }) => <GetStarted data={data} client={client} />}
+    </Query>
+  );
+}

src/components/GetStarted/style.css

@@ -0,0 +1,21 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.signInContainer {
+  text-align: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.welcome {
+  font-weight: bold;
+  color: var(--primary-medium);
+  font-size: 1.8rem;
+  margin-top: 0;
+}
+
+.begin {
+  margin: 3rem auto;
+}

src/components/GetStarted/test.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { GetStarted } from '.';
+
+describe('<GetStarted/>', () => {
+  it('renders successfully', () => {
+    const component = shallow(<GetStarted />);
+    expect(component.length).toBe(1);
+  });
+});

src/routes/SetupNew/index.js

@@ -4,6 +4,7 @@ import { get } from 'lodash';
 import gql from 'graphql-tag';
 import { Query } from 'react-apollo';
 import SignInForm from '../../components/SignInForm';
+import { GetStarted } from '../../components/GetStarted';
 
 export const GET_GITHUB_TOKEN_FROM_CACHE = gql`
   {
@@ -16,9 +17,11 @@ export const GET_GITHUB_TOKEN_FROM_CACHE = gql`
 `;
 
 export function SetupNew({ data, client }) {
+  const authToken = get(data, 'githubAuth.token');
+
   return (
     <Fragment>
-      {!get(data, 'githubAuth.token') && (
+      {!authToken && (
         <SignInForm
           saveGithubToken={token => {
             client.writeData({
@@ -58,6 +61,7 @@ export function SetupNew({ data, client }) {
           error={get(data, 'githubAuth.error')}
         />
       )}
+      {authToken && <GetStarted />}
     </Fragment>
   );
 }

src/routes/SetupNew/test.js

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import { SetupNew } from './';
 
 import SignInForm from '../../components/SignInForm';
+import { GetStarted } from '../../components/GetStarted';
 
 describe('Setup', () => {
   const defaultProps = {
@@ -44,6 +45,10 @@ describe('Setup', () => {
       expect(props.error).toBe(data.githubAuth.error);
     });
 
+    it('does not render a <GetStarted/> component', () => {
+      expect(component.find(GetStarted).length).toBe(0);
+    });
+
     describe('saveGithubToken fn passed to <SignInForm/> as a prop', () => {
       it('writes github token to apollo client + sets loading false', () => {
         const token = '1234';
@@ -103,4 +108,23 @@ describe('Setup', () => {
       });
     });
   });
+
+  describe('when apollo data contains github auth token', () => {
+    const data = {
+      githubAuth: {
+        token: '1234',
+        loadingToken: false,
+        error: null,
+      },
+    };
+    const component = shallow(<SetupNew {...defaultProps} data={data} />);
+
+    it('renders a <GetStarted/> component', () => {
+      expect(component.find(GetStarted).length).toBe(1);
+    });
+
+    it('does not render a <SignInForm/> component', () => {
+      expect(component.find(SignInForm).length).toBe(0);
+    });
+  });
 });