From 18752008f9abd7749f61f8d674f66de2a535c131 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 16 May 2018 12:27:21 -0400
Subject: SSR with Auth

---
 frontend/components/PleaseSignIn.js |  2 +-
 frontend/components/Signin.js       |  2 +-
 frontend/lib/withData.js            | 65 ++++++++++++++++++-------------------
 frontend/package-lock.json          | 56 ++++++++++++++++----------------
 frontend/package.json               |  4 +--
 frontend/pages/_app.js              |  5 ++-
 frontend/pages/me.js                |  5 ++-
 7 files changed, 69 insertions(+), 70 deletions(-)

(limited to 'frontend')

diff --git a/frontend/components/PleaseSignIn.js b/frontend/components/PleaseSignIn.js
index 22c58c9..7e5e726 100644
--- a/frontend/components/PleaseSignIn.js
+++ b/frontend/components/PleaseSignIn.js
@@ -39,7 +39,7 @@ const PleaseSignIn = props => (
 );
 
 PleaseSignIn.propTypes = {
-  allowedPermissions: PropTypes.array.isRequired,
+  allowedPermissions: PropTypes.array,
   children: PropTypes.any.isRequired,
 };
 
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 9e25cf1..7a4db8c 100644
--- a/frontend/components/Signin.js
+++ b/frontend/components/Signin.js
@@ -28,7 +28,7 @@ class Signin extends Component {
         {client => (
           <Mutation mutation={SIGNIN_MUTATION} variables={this.state}>
             {(signin, { loading, error }) => (
-              <Form method="post" onSubmit={e => this.loginUser(e, signin, client)}>
+              <Form onSubmit={e => this.loginUser(e, signin, client)}>
                 <Error error={error} />
                 <fieldset disabled={loading} aria-busy={loading}>
                   <label htmlFor="email">
diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js
index 9bd22f0..585cee7 100644
--- a/frontend/lib/withData.js
+++ b/frontend/lib/withData.js
@@ -3,41 +3,38 @@ import ApolloClient from 'apollo-boost';
 import { LOCAL_STATE_QUERY } from '../queries/queries.graphql';
 // can also be a function that accepts a `headers` object (SSR only) and returns a config
 
-const client = new ApolloClient({
-  uri: process.env.NODE_ENV === 'development' ? 'http://localhost:4444' : 'http://localhost:4444',
-  // ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
-  // TODO this is a bug: https://github.com/apollographql/apollo-client/issues/3265
-  fetchOptions: {
-    credentials: 'include',
-  },
-  request: async (operation, forward) => {
-    operation.setContext({
-      fetchOptions: {
-        credentials: 'include',
-      },
-      headers: {
-        haha: `lol${Date.now()}`,
-        cookie: '',
-        // TODO: This cookie needs to come from the SSR
-        // cookie:'token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJjamY0ZWtqcm55ZGQ0MDkxNnhweXEweGVqIiwiaWF0IjoxNTI2NDc4NzY2fQ.LJbLhKZ6j5d3ntDvaBR4V-4rFEPv_pzJiIhZ84WkO6A',
-      },
-    });
-  },
-  clientState: {
-    resolvers: {
-      Mutation: {
-        toggleCart(_, variables, { cache }) {
-          const { cartOpen } = cache.read({ query: LOCAL_STATE_QUERY });
-          const data = { data: { cartOpen: !cartOpen } };
-          cache.writeData(data);
-          return data;
+function createClient({ headers }) {
+  return new ApolloClient({
+    uri: process.env.NODE_ENV === 'development' ? 'http://localhost:4444' : 'http://localhost:4444',
+    ssrMode: !process.browser, // Disables forceFetch on the server (so queries are only run once)
+    // TODO this is a bug: https://github.com/apollographql/apollo-client/issues/3265
+    fetchOptions: {
+      credentials: 'include',
+    },
+    request: async operation => {
+      operation.setContext({
+        fetchOptions: {
+          credentials: 'include',
         },
-      },
+        headers,
+      });
     },
-    defaults: {
-      cartOpen: false,
+    clientState: {
+      resolvers: {
+        Mutation: {
+          toggleCart(_, variables, { cache }) {
+            const { cartOpen } = cache.read({ query: LOCAL_STATE_QUERY });
+            const data = { data: { cartOpen: !cartOpen } };
+            cache.writeData(data);
+            return data;
+          },
+        },
+      },
+      defaults: {
+        cartOpen: false,
+      },
     },
-  },
-});
+  });
+}
 
-export default withApollo({ client });
+export default withApollo({ client: createClient });
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index abbd69a..2f0e683 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2295,7 +2295,7 @@
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-3.2.7.tgz",
       "integrity": "sha512-oYVLxFVqpX9uMhOIQBLtZL+CX4uY8ZpWcjNTaxyWl5rO8yA9SSNikFnAfvk8J3P/7z3BZwNmEqFKaJoYltj3MQ==",
       "requires": {
-        "caniuse-lite": "1.0.30000840",
+        "caniuse-lite": "1.0.30000841",
         "electron-to-chromium": "1.3.46"
       }
     },
@@ -2393,9 +2393,9 @@
       "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk="
     },
     "caniuse-lite": {
-      "version": "1.0.30000840",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000840.tgz",
-      "integrity": "sha512-Lw6AaouV6lh7TgIdQtLiUFKKO2mtDnZFkzCq5/V6tqs4ZI0OGVSDCEt1uegZ3OOBEBUYuVw3Hhr9DQSbgVofFA=="
+      "version": "1.0.30000841",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000841.tgz",
+      "integrity": "sha512-LeOGLEY4hl6xZc/xMYOrVmSrHOybyHWNShFN51qCmDXo69nEGKHTJTfe6jdWe4hLxSJcwEIYtKHFFh93fF/kNA=="
     },
     "capture-exit": {
       "version": "1.2.0",
@@ -2468,7 +2468,7 @@
         "anymatch": "2.0.0",
         "async-each": "1.0.1",
         "braces": "2.3.2",
-        "fsevents": "1.2.3",
+        "fsevents": "1.2.4",
         "glob-parent": "3.1.0",
         "inherits": "2.0.3",
         "is-binary-path": "1.0.1",
@@ -3889,13 +3889,13 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.3.tgz",
-      "integrity": "sha512-X+57O5YkDTiEQGiw8i7wYc2nQgweIekqkepI8Q3y4wVlurgBt2SuwxTeYUYMZIGpLZH3r/TsMjczCMXE5ZOt7Q==",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.4.tgz",
+      "integrity": "sha512-z8H8/diyk76B7q5wg+Ud0+CqzcAF3mBBI/bA5ne5zrRUUIvNkJY//D3BqyH571KuAC4Nr7Rw7CjWX4r0y9DvNg==",
       "optional": true,
       "requires": {
         "nan": "2.10.0",
-        "node-pre-gyp": "0.9.1"
+        "node-pre-gyp": "0.10.0"
       },
       "dependencies": {
         "abbrev": {
@@ -3964,7 +3964,7 @@
           }
         },
         "deep-extend": {
-          "version": "0.4.2",
+          "version": "0.5.1",
           "bundled": true,
           "optional": true
         },
@@ -4120,7 +4120,7 @@
           }
         },
         "node-pre-gyp": {
-          "version": "0.9.1",
+          "version": "0.10.0",
           "bundled": true,
           "optional": true,
           "requires": {
@@ -4130,7 +4130,7 @@
             "nopt": "4.0.1",
             "npm-packlist": "1.1.10",
             "npmlog": "4.1.2",
-            "rc": "1.2.6",
+            "rc": "1.2.7",
             "rimraf": "2.6.2",
             "semver": "5.5.0",
             "tar": "4.4.1"
@@ -4216,11 +4216,11 @@
           "optional": true
         },
         "rc": {
-          "version": "1.2.6",
+          "version": "1.2.7",
           "bundled": true,
           "optional": true,
           "requires": {
-            "deep-extend": "0.4.2",
+            "deep-extend": "0.5.1",
             "ini": "1.3.5",
             "minimist": "1.2.0",
             "strip-json-comments": "2.0.1"
@@ -4483,9 +4483,9 @@
       }
     },
     "graphql-mock": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/graphql-mock/-/graphql-mock-1.0.0.tgz",
-      "integrity": "sha512-0ltTXbohJqCI/bbw2aG60wE53D3Qtp/2e7O0u0zKouXRk3qOkZcjhLHcYUFasOXtuM/16TnBSgLiBYAeY1wBsA==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graphql-mock/-/graphql-mock-1.0.1.tgz",
+      "integrity": "sha512-eqQs0kH0yXgZjbXIUgZb3YvIUi7b7jrTOyMPaQPdsJLlEYU2LQV9EFnwwiOAafPjYquJsVsR44rS0vIExC48ew==",
       "requires": {
         "apollo-link-schema": "1.1.0",
         "fast-deep-equal": "2.0.1",
@@ -6328,7 +6328,7 @@
         "from2": "2.3.0",
         "parallel-transform": "1.1.0",
         "pump": "2.0.1",
-        "pumpify": "1.5.0",
+        "pumpify": "1.5.1",
         "stream-each": "1.2.2",
         "through2": "2.0.3"
       }
@@ -6465,9 +6465,9 @@
       "integrity": "sha512-3KL3fvuRkZ7s4IFOMfztb7zJp3QaVWnBeGoJlgB38XnCRPj/0tLzzLG5IB8NYOHbJ8g8UGrgZv44GLDk6CxTxA=="
     },
     "next": {
-      "version": "6.0.3-canary.0",
-      "resolved": "https://registry.npmjs.org/next/-/next-6.0.3-canary.0.tgz",
-      "integrity": "sha1-lX6SXmeth797tWu747daVYkPSqc=",
+      "version": "6.0.3-canary.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-6.0.3-canary.1.tgz",
+      "integrity": "sha1-SZ6rIqEcKsIRv6z7hJF4WtmBbMc=",
       "requires": {
         "@babel/core": "7.0.0-beta.42",
         "@babel/plugin-proposal-class-properties": "7.0.0-beta.42",
@@ -6556,9 +6556,9 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw="
     },
     "next-with-apollo": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/next-with-apollo/-/next-with-apollo-2.0.2.tgz",
-      "integrity": "sha512-JMXCtlNlEdQgKWY1mBwppCC2qrQKoTTkDWZbLdY2oIgzganBff68eR0BGDoa7NjoNGeZ/8GVFupXMo939WBmCg==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/next-with-apollo/-/next-with-apollo-2.1.2.tgz",
+      "integrity": "sha512-f9OWFx9RVnmssl0pJT1nZDUflGVYjYJg4+j+2GvcVWuU4nFo9esFThDFKa9kvpqEkVLHR+F+dUcxqPlU/hAtFQ==",
       "requires": {
         "@types/graphql": "0.12.6",
         "@types/next": "2.4.10",
@@ -7333,9 +7333,9 @@
       }
     },
     "pumpify": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.0.tgz",
-      "integrity": "sha512-UWi0klDoq8xtVzlMRgENV9F7iCTZExaJQSQL187UXsxpk9NnrKGqTqqUNYAKGOzucSOxs2+jUnRNI+rLviPhJg==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
+      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
       "requires": {
         "duplexify": "3.6.0",
         "inherits": "2.0.3",
@@ -7957,7 +7957,7 @@
         "capture-exit": "1.2.0",
         "exec-sh": "0.2.1",
         "fb-watchman": "2.0.0",
-        "fsevents": "1.2.3",
+        "fsevents": "1.2.4",
         "micromatch": "3.1.10",
         "minimist": "1.2.0",
         "walker": "1.0.7",
diff --git a/frontend/package.json b/frontend/package.json
index 153f435..3eb8b51 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -20,11 +20,11 @@
     "downshift": "^1.31.14",
     "graphql": "^0.13.2",
     "graphql-import": "^0.5.2",
-    "graphql-mock": "1.0.0",
+    "graphql-mock": "1.0.1",
     "graphql-tag": "^2.9.2",
     "lodash.debounce": "^4.0.8",
     "next": "^6.0.3-canary.0",
-    "next-with-apollo": "^2.0.2",
+    "next-with-apollo": "^2.1.2",
     "nprogress": "^0.2.0",
     "prop-types": "^15.6.1",
     "react": "^16.3.2",
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 742532f..b2f67cb 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -17,13 +17,12 @@ class MyApp extends App {
   //   }
   // }
   static async getInitialProps({ Component, ctx }) {
+    let pageProps = {};
     if (!process.browser && ctx.req.headers.cookie) {
       // if we are SSR, pass along the cookie to apollo
-      console.log('On the server');
       const cookies = cookie.parse(ctx.req.headers.cookie);
-      console.log(cookies.token);
+      pageProps.token = cookies.token;
     }
-    let pageProps = {};
 
     if (Component.getInitialProps) {
       pageProps = await Component.getInitialProps(ctx);
diff --git a/frontend/pages/me.js b/frontend/pages/me.js
index 1dca3e8..b0c2c25 100644
--- a/frontend/pages/me.js
+++ b/frontend/pages/me.js
@@ -1,9 +1,12 @@
 import EditUser from '../components/EditUser';
+import PleaseSignIn from '../components/PleaseSignIn';
 
 const MyAccount = () => (
   <>
     <h2>My Account</h2>
-    <EditUser />
+    <PleaseSignIn>
+      <EditUser />
+    </PleaseSignIn>
   </>
 );
 
-- 
cgit v1.3