From 802b65cfd634305f62d88cb57c54f8c053701d27 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 16 May 2018 10:54:08 -0400
Subject: SSR Auth WIP

---
 backend/src/index.js          | 13 ++++++-------
 frontend/components/Nav.js    | 10 +++++++---
 frontend/components/Signin.js |  2 +-
 frontend/components/Signup.js |  1 +
 frontend/lib/withData.js      | 10 ++++++++--
 frontend/package-lock.json    |  5 +++++
 frontend/package.json         |  1 +
 frontend/pages/_app.js        | 19 +++++++++++++------
 8 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/backend/src/index.js b/backend/src/index.js
index 6978225..a3a5309 100644
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -9,8 +9,9 @@ const server = createServer();
 
 server.express.use(cookieParser());
 
-// 1. Check JWT
 server.express.use((req, res, next) => {
+  console.log('Hey');
+
   const { token } = req.cookies;
   if (token) {
     const { userId } = jwt.verify(token, process.env.APP_SECRET);
@@ -22,12 +23,10 @@ server.express.use((req, res, next) => {
 // 2. Get User from their ID
 server.express.use(async (req, res, next) => {
   if (!req.userId) return next();
-  const user = await server.context().db.query.user(
-    { where: { id: req.userId } },
-    `
-    { id, permissions, email, name }
-  `
-  );
+  const user = await server
+    .context()
+    .db.query.user({ where: { id: req.userId } }, `{ id, permissions, email, name }`);
+  console.log(user);
   req.user = user;
   next();
 });
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index a90568c..4bbce2d 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -4,14 +4,18 @@ import { Query, ApolloConsumer } from 'react-apollo';
 import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
 import CartCount from './CartCount';
 import Signout from './Signout';
-
+import Dump from './Dump';
 import NavStyles from './styles/NavStyles';
 
 class Nav extends React.Component {
   render() {
+    // below we set the fetchPolicy to network only so it forces re-fetch on the server
     return (
-      <Query query={CURRENT_USER_QUERY}>
-        {({ data: { me } }) => (
+      <Query
+        query={CURRENT_USER_QUERY}
+        fetchPolicy={process.browser ? 'cache-first' : 'network-only'}
+      >
+        {({ data: { me }, loading, error }) => (
           <NavStyles data-test="nav">
             <Link href="/items">
               <a>Shop</a>
diff --git a/frontend/components/Signin.js b/frontend/components/Signin.js
index 7a4db8c..9e25cf1 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 onSubmit={e => this.loginUser(e, signin, client)}>
+              <Form method="post" onSubmit={e => this.loginUser(e, signin, client)}>
                 <Error error={error} />
                 <fieldset disabled={loading} aria-busy={loading}>
                   <label htmlFor="email">
diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index 22a729f..ef622ed 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -23,6 +23,7 @@ class Signup extends Component {
           <Mutation mutation={SIGNUP_MUTATION} variables={this.state}>
             {(signup, { loading, error }) => (
               <Form
+                method="post"
                 onSubmit={async e => {
                   e.preventDefault();
                   const res = await signup();
diff --git a/frontend/lib/withData.js b/frontend/lib/withData.js
index 0696333..9bd22f0 100644
--- a/frontend/lib/withData.js
+++ b/frontend/lib/withData.js
@@ -5,16 +5,22 @@ import { LOCAL_STATE_QUERY } from '../queries/queries.graphql';
 
 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)
+  // 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 => {
+  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: {
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index fe9b67b..abbd69a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -2725,6 +2725,11 @@
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.5.1.tgz",
       "integrity": "sha1-uCeAl7m8IpNl3lxiz1/K7YtVmeU="
     },
+    "cookie": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
+      "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s="
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index b8afed3..153f435 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "apollo-boost": "^0.1.6",
     "apollo-client": "^2.3.1",
     "babel-plugin-styled-components": "^1.5.1",
+    "cookie": "^0.3.1",
     "date-fns": "^2.0.0-alpha.7",
     "downshift": "^1.31.14",
     "graphql": "^0.13.2",
diff --git a/frontend/pages/_app.js b/frontend/pages/_app.js
index 8857120..742532f 100644
--- a/frontend/pages/_app.js
+++ b/frontend/pages/_app.js
@@ -3,19 +3,26 @@ import { ApolloProvider } from 'react-apollo';
 import withData from '../lib/withData';
 import { CURRENT_USER_QUERY } from '../queries/queries.graphql';
 import Page from '../components/Page';
+import cookie from 'cookie';
 
 // Next.js wraps each Page in an <App></App> component. This is handy for when you want to persist anything from page to page, or just access a component that is 1 level higher than each page.
 
 // here we use App from next/app and wrap it with withData so we can get Apollo and SSR
 
 class MyApp extends App {
-  componentDidMount() {
-    if (typeof window !== 'undefined' && !window.__CLIENTLOADED__) {
-      this.props.apollo.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
-      window.__CLIENTLOADED__ = true;
-    }
-  }
+  // componentDidMount() {
+  //   if (typeof window !== 'undefined' && !window.__CLIENTLOADED__) {
+  //     this.props.apollo.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
+  //     window.__CLIENTLOADED__ = true;
+  //   }
+  // }
   static async getInitialProps({ Component, ctx }) {
+    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);
+    }
     let pageProps = {};
 
     if (Component.getInitialProps) {
-- 
cgit v1.3