next.js/examples/with-apollo-auth

Apollo With Authentication Example

How to use

Using create-next-app

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example with-apollo-auth with-apollo-auth-app
# or
yarn create next-app --example with-apollo-auth with-apollo-auth-app

Download manually

Download the example:

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:

npm install
npm run dev
# or
yarn
yarn dev

Deploy it to the cloud with now (download):

now

The idea behind the example

This is an extention of the with Apollo example:

Apollo 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). 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. 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 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 example.

graph.cool can be setup with many different authentication providers, the most basic of which is email-password authentication. 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 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. 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.

To get this example running locally, you will need to create a graph.cool account, and provide the project.graphcool schema.

Note:

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.