Add user register/login flow with components

Copy pasted from user tabomors

https://github.com/tabomors/next.js/tree/update-with-apollo-auth

Author: ultrox

README.md

@@ -1,8 +1,4 @@
-# Apollo Example
-
-## Demo
-
-https://next-with-apollo.now.sh
+# Apollo With Authentication Example
 
 ## How to use
 
@@ -11,18 +7,18 @@ https://next-with-apollo.now.sh
 Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
 
 ```bash
-npx create-next-app --example with-apollo with-apollo-app
+npx create-next-app --example with-apollo-auth with-apollo-auth-app
 # or
-yarn create next-app --example with-apollo with-apollo-app
+yarn create next-app --example with-apollo-auth with-apollo-auth-app
 ```
 
 ### Download manually
 
 Download the example:
 
 ```bash
-curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-apollo
-cd with-apollo
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-apollo-auth
+cd with-apollo-auth
 ```
 
 Install it and run:
@@ -43,13 +39,34 @@ now
 
 ## The idea behind the example
 
-[Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
+This is an extention of the _[with Apollo](https://github.com/zeit/next.js/tree/master/examples/with-apollo#the-idea-behind-the-example)_ example:
+
+> [Apollo](https://www.apollographql.com/client/) is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
+>
+> In this simple example, we integrate Apollo seamlessly with Next by wrapping our _pages_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
+>
+> On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](https://www.apollographql.com/docs/react/features/server-side-rendering.html#getDataFromTree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
+>
+> This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
+>
+> _Note: If you're interested in integrating the client with your existing Redux store check out the [`with-apollo-and-redux`](https://github.com/zeit/next.js/tree/master/examples/with-apollo-and-redux) example._
+
+[graph.cool](https://www.graph.cool) can be setup with many different
+[authentication providers](https://www.graph.cool/docs/reference/integrations/overview-seimeish6e/#authentication-providers), the most basic of which is [email-password authentication](https://www.graph.cool/docs/reference/simple-api/user-authentication-eixu9osueb/#email-and-password). Once email-password authentication is enabled for your graph.cool project, you are provided with 2 useful mutations: `createUser` and `signinUser`.
+
+On loading each route, we perform a `user` query to see if the current visitor is logged in (based on a cookie, more on that in a moment). Depending on the query result, and the route, the user may be [redirected](https://github.com/zeit/next.js/blob/master/examples/with-apollo-auth/lib/redirect.js) to a different page.
+
+When creating an account, both the `createUser` and `signinUser` mutations are executed on graph.cool, which returns a token that can be used to [authenticate the user for future requests](https://www.graph.cool/docs/reference/auth/authentication-tokens-eip7ahqu5o/). The token is stored in a cookie for easy access (_note: This may have security implications. Please understand XSS and JWT before deploying this to production_).
+
+A similar process is followed when signing in, except `signinUser` is the only mutation executed.
+
+It is important to note the use of Apollo's `resetStore()` method after signing in and signing out to ensure that no user data is kept in the browser's memory.
 
-In this simple example, we integrate Apollo seamlessly with Next by wrapping our _pages/\_app.js_ inside a [higher-order component (HOC)](https://facebook.github.io/react/docs/higher-order-components.html). Using the HOC pattern we're able to pass down a central store of query result data created by Apollo into our React component hierarchy defined inside each page of our Next application.
+To get this example running locally, you will need to create a graph.cool
+account, and provide [the `project.graphcool` schema](https://github.com/zeit/next.js/blob/master/examples/with-apollo-auth/project.graphcool).
 
-On initial page load, while on the server and inside `getInitialProps`, we invoke the Apollo method, [`getDataFromTree`](https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree). This method returns a promise; at the point in which the promise resolves, our Apollo Client store is completely initialized.
+### Note:
 
-This example relies on [graph.cool](https://www.graph.cool) for its GraphQL backend.
+Solved by providing `static defaultProp`
 
-Note: Do not be alarmed that you see two renders being executed. Apollo recursively traverses the React render tree looking for Apollo query components. When it has done that, it fetches all these queries and then passes the result to a cache. This cache is then used to render the data on the server side (another React render).
-https://www.apollographql.com/docs/react/api/react-ssr/#getdatafromtree
+In these _with-apollo_ examples, the `withData()` HOC must wrap a top-level component from within the `pages` directory. Wrapping a child component with the HOC will result in a `Warning: Failed prop type: The prop 'serverState' is marked as required in 'WithData(Apollo(Component))', but its value is 'undefined'` error. Down-tree child components will have access to Apollo, and can be wrapped with any other sort of `graphql()`, `compose()`, etc HOC's.

components/RegisterBox.js

@@ -0,0 +1,89 @@
+import { useMutation, useApolloClient } from '@apollo/react-hooks'
+import gql from 'graphql-tag'
+import cookie from 'cookie'
+import redirect from '../lib/redirect'
+
+const CREATE_USER = gql`
+  mutation Create($name: String!, $email: String!, $password: String!) {
+    createUser(
+      name: $name
+      authProvider: { email: { email: $email, password: $password } }
+    ) {
+      id
+    }
+    signinUser(email: { email: $email, password: $password }) {
+      token
+    }
+  }
+`
+
+const RegisterBox = () => {
+  const client = useApolloClient()
+
+  const onCompleted = data => {
+    // Store the token in cookie
+    document.cookie = cookie.serialize('token', data.signinUser.token, {
+      maxAge: 30 * 24 * 60 * 60 // 30 days
+    })
+    // Force a reload of all the current queries now that the user is
+    // logged in
+    client.cache.reset().then(() => {
+      redirect({}, '/')
+    })
+  }
+  const onError = error => {
+    // If you want to send error to external service?
+    console.error(error)
+  }
+  const [create, { error }] = useMutation(CREATE_USER, { onCompleted, onError })
+  let name, email, password
+
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        create({
+          variables: {
+            name: name.value,
+            email: email.value,
+            password: password.value
+          }
+        })
+
+        name.value = email.value = password.value = ''
+      }}
+    >
+      {error && <p>Issue occurred while registering :(</p>}
+      <input
+        name='name'
+        placeholder='Name'
+        ref={node => {
+          name = node
+        }}
+      />
+      <br />
+      <input
+        name='email'
+        placeholder='Email'
+        ref={node => {
+          email = node
+        }}
+      />
+      <br />
+      <input
+        name='password'
+        placeholder='Password'
+        ref={node => {
+          password = node
+        }}
+        type='password'
+      />
+      <br />
+      <button>Register</button>
+    </form>
+  )
+}
+
+export default RegisterBox

components/SigninBox.js

@@ -0,0 +1,81 @@
+import { useMutation, useApolloClient } from '@apollo/react-hooks'
+import gql from 'graphql-tag'
+import cookie from 'cookie'
+import redirect from '../lib/redirect'
+
+const SIGN_IN = gql`
+  mutation Signin($email: String!, $password: String!) {
+    signinUser(email: { email: $email, password: $password }) {
+      token
+    }
+  }
+`
+
+// TODO: Find a better name for component.
+const SigninBox = () => {
+  const client = useApolloClient()
+
+  const onCompleted = data => {
+    // Store the token in cookie
+    document.cookie = cookie.serialize('token', data.signinUser.token, {
+      maxAge: 30 * 24 * 60 * 60 // 30 days
+    })
+    // Force a reload of all the current queries now that the user is
+    // logged in
+    client.cache.reset().then(() => {
+      redirect({}, '/')
+    })
+  }
+
+  const onError = error => {
+    // If you want to send error to external service?
+    console.error(error)
+  }
+
+  const [signinUser, { error }] = useMutation(SIGN_IN, {
+    onCompleted,
+    onError
+  })
+
+  let email, password
+
+  return (
+    <form
+      onSubmit={e => {
+        e.preventDefault()
+        e.stopPropagation()
+
+        signinUser({
+          variables: {
+            email: email.value,
+            password: password.value
+          }
+        })
+
+        email.value = password.value = ''
+      }}
+    >
+      {error && <p>No user found with that information.</p>}
+      <input
+        name='email'
+        placeholder='Email'
+        ref={node => {
+          email = node
+        }}
+      />
+      <br />
+      <input
+        name='password'
+        placeholder='Password'
+        ref={node => {
+          password = node
+        }}
+        type='password'
+      />
+      <br />
+      <button>Sign in</button>
+    </form>
+  )
+}
+
+export default SigninBox

lib/checkLoggedIn.js

@@ -0,0 +1,21 @@
+import gql from 'graphql-tag'
+
+export default apolloClient =>
+  apolloClient
+    .query({
+      query: gql`
+        query getUser {
+          user {
+            id
+            name
+          }
+        }
+      `
+    })
+    .then(({ data }) => {
+      return { loggedInUser: data }
+    })
+    .catch(() => {
+      // Fail gracefully
+      return { loggedInUser: {} }
+    })

lib/init-apollo.js

@@ -14,7 +14,7 @@ if (typeof window === 'undefined') {
 
 function create (initialState, { getToken }) {
   const httpLink = createHttpLink({
-    uri: 'https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn',
+    uri: 'https://api.graph.cool/simple/v1/cj5geu3slxl7t0127y8sity9r',
     credentials: 'same-origin',
   })
 

lib/redirect.js

@@ -0,0 +1,13 @@
+import Router from 'next/router'
+
+export default (context, target) => {
+  if (context.res) {
+    // server
+    // 303: "See other"
+    context.res.writeHead(303, { Location: target })
+    context.res.end()
+  } else {
+    // In the browser, we just pretend like this never even happened ;)
+    Router.replace(target)
+  }
+}

pages/create-account.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import Link from 'next/link'
+
+import redirect from '../lib/redirect'
+import checkLoggedIn from '../lib/checkLoggedIn'
+
+import RegisterBox from '../components/RegisterBox'
+
+export default class CreateAccount extends React.Component {
+  static async getInitialProps (context) {
+    const { loggedInUser } = await checkLoggedIn(context.apolloClient)
+
+    if (loggedInUser.user) {
+      // Already signed in? No need to continue.
+      // Throw them back to the main page
+      redirect(context, '/')
+    }
+
+    return {}
+  }
+
+  render () {
+    return (
+      <>
+        {/* RegisterBox handles all register logic. */}
+        <RegisterBox />
+        <hr />
+        Already have an account?{' '}
+        <Link prefetch href='/signin'>
+          <a>Sign in</a>
+        </Link>
+      </>
+    )
+  }
+}

pages/index.js

@@ -1 +1,43 @@
-export default () => <div>Hello</div>
+import React from 'react'
+import cookie from 'cookie'
+import { useApolloClient } from '@apollo/react-hooks'
+
+import redirect from '../lib/redirect'
+import checkLoggedIn from '../lib/checkLoggedIn'
+
+const Index = ({ loggedInUser }) => {
+  const apolloClient = useApolloClient()
+
+  const signout = () => {
+    document.cookie = cookie.serialize('token', '', {
+      maxAge: -1 // Expire the cookie immediately
+    })
+
+    // Force a reload of all the current queries now that the user is
+    // logged in, so we don't accidentally leave any state around.
+    apolloClient.cache.reset().then(() => {
+      // Redirect to a more useful page when signed out
+      redirect({}, '/signin')
+    })
+  }
+
+  return (
+    <div>
+      Hello {loggedInUser.user.name}!<br />
+      <button onClick={signout}>Sign out</button>
+    </div>
+  )
+}
+
+Index.getInitialProps = async context => {
+  const { loggedInUser } = await checkLoggedIn(context.apolloClient)
+
+  if (!loggedInUser.user) {
+    // If not signed in, send them somewhere more useful
+    redirect(context, '/signin')
+  }
+
+  return { loggedInUser }
+}
+
+export default Index