README.md

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 uses Photon as ORM connected to Postgres

Note: If you're interested in integrating the client with your existing Redux store check out the with-apollo-and-redux example.

On loading each route, we perform a me 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 register mutation are executed in /api/graphql, which returns a token that can be used to authenticate the user. 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 using login mutation.

It is important to note the use of Apollo's client.cache.reset() 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 Postgres database, and database url in the schema.prisma file. Photon supports other databases if you don't wish to use Postgres see Photon for more information.

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.