-
Notifications
You must be signed in to change notification settings - Fork 26.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add Apollo Server and Client Auth Example (#9913)
* Add Apollo Server and Client Auth Example * Some updates * Updated docs Co-authored-by: Luis Alvarez D. <[email protected]>
- Loading branch information
1 parent
bc139c2
commit a356d2f
Showing
15 changed files
with
670 additions
and
0 deletions.
There are no files selected for viewing
55 changes: 55 additions & 0 deletions
55
examples/api-routes-apollo-server-and-client-auth/README.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
# Apollo Server and Client Auth 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/\_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. | ||
|
||
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: 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 | ||
|
||
## Deploy your own | ||
|
||
Deploy the example using [ZEIT Now](https://zeit.co/now): | ||
|
||
[![Deploy with ZEIT Now](https://zeit.co/button)](https://zeit.co/new/project?template=https://github.com/zeit/next.js/tree/canary/examples/api-routes-apollo-server-and-client-auth) | ||
|
||
## How to use | ||
|
||
### Using `create-next-app` | ||
|
||
Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/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 api-routes-apollo-server-and-client-auth api-routes-apollo-server-and-client-auth-app | ||
# or | ||
yarn create next-app --example api-routes-apollo-server-and-client-auth api-routes-apollo-server-and-client-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/api-routes-apollo-server-and-client-auth | ||
cd api-routes-apollo-server-and-client-auth | ||
``` | ||
|
||
Install it and run: | ||
|
||
```bash | ||
npm install | ||
npm run dev | ||
# or | ||
yarn | ||
yarn dev | ||
``` | ||
|
||
> If you have issues installing `bcrypt`, follow this instructions: https://github.com/kelektiv/node.bcrypt.js/wiki/Installation-Instructions | ||
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)): | ||
|
||
```bash | ||
now | ||
``` |
152 changes: 152 additions & 0 deletions
152
examples/api-routes-apollo-server-and-client-auth/apollo/client.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
import React from 'react' | ||
import Head from 'next/head' | ||
import { ApolloProvider } from '@apollo/react-hooks' | ||
import { ApolloClient } from 'apollo-client' | ||
import { InMemoryCache } from 'apollo-cache-inmemory' | ||
|
||
let globalApolloClient = null | ||
|
||
/** | ||
* Creates and provides the apolloContext | ||
* to a next.js PageTree. Use it by wrapping | ||
* your PageComponent via HOC pattern. | ||
* @param {Function|Class} PageComponent | ||
* @param {Object} [config] | ||
* @param {Boolean} [config.ssr=true] | ||
*/ | ||
export function withApollo(PageComponent, { ssr = true } = {}) { | ||
const WithApollo = ({ apolloClient, apolloState, ...pageProps }) => { | ||
const client = apolloClient || initApolloClient(undefined, apolloState) | ||
return ( | ||
<ApolloProvider client={client}> | ||
<PageComponent {...pageProps} /> | ||
</ApolloProvider> | ||
) | ||
} | ||
|
||
// Set the correct displayName in development | ||
if (process.env.NODE_ENV !== 'production') { | ||
const displayName = | ||
PageComponent.displayName || PageComponent.name || 'Component' | ||
|
||
if (displayName === 'App') { | ||
console.warn('This withApollo HOC only works with PageComponents.') | ||
} | ||
|
||
WithApollo.displayName = `withApollo(${displayName})` | ||
} | ||
|
||
if (ssr || PageComponent.getInitialProps) { | ||
WithApollo.getInitialProps = async ctx => { | ||
const { AppTree } = ctx | ||
|
||
// Initialize ApolloClient, add it to the ctx object so | ||
// we can use it in `PageComponent.getInitialProp`. | ||
const apolloClient = (ctx.apolloClient = initApolloClient({ | ||
res: ctx.res, | ||
req: ctx.req, | ||
})) | ||
|
||
// Run wrapped getInitialProps methods | ||
let pageProps = {} | ||
if (PageComponent.getInitialProps) { | ||
pageProps = await PageComponent.getInitialProps(ctx) | ||
} | ||
|
||
// Only on the server: | ||
if (typeof window === 'undefined') { | ||
// When redirecting, the response is finished. | ||
// No point in continuing to render | ||
if (ctx.res && ctx.res.finished) { | ||
return pageProps | ||
} | ||
|
||
// Only if ssr is enabled | ||
if (ssr) { | ||
try { | ||
// Run all GraphQL queries | ||
const { getDataFromTree } = await import('@apollo/react-ssr') | ||
await getDataFromTree( | ||
<AppTree | ||
pageProps={{ | ||
...pageProps, | ||
apolloClient, | ||
}} | ||
/> | ||
) | ||
} catch (error) { | ||
// Prevent Apollo Client GraphQL errors from crashing SSR. | ||
// Handle them in components via the data.error prop: | ||
// https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error | ||
console.error('Error while running `getDataFromTree`', error) | ||
} | ||
|
||
// getDataFromTree does not call componentWillUnmount | ||
// head side effect therefore need to be cleared manually | ||
Head.rewind() | ||
} | ||
} | ||
|
||
// Extract query data from the Apollo store | ||
const apolloState = apolloClient.cache.extract() | ||
|
||
return { | ||
...pageProps, | ||
apolloState, | ||
} | ||
} | ||
} | ||
|
||
return WithApollo | ||
} | ||
|
||
/** | ||
* Always creates a new apollo client on the server | ||
* Creates or reuses apollo client in the browser. | ||
* @param {Object} initialState | ||
*/ | ||
function initApolloClient(ctx, initialState) { | ||
// Make sure to create a new client for every server-side request so that data | ||
// isn't shared between connections (which would be bad) | ||
if (typeof window === 'undefined') { | ||
return createApolloClient(ctx, initialState) | ||
} | ||
|
||
// Reuse client on the client-side | ||
if (!globalApolloClient) { | ||
globalApolloClient = createApolloClient(ctx, initialState) | ||
} | ||
|
||
return globalApolloClient | ||
} | ||
|
||
/** | ||
* Creates and configures the ApolloClient | ||
* @param {Object} [initialState={}] | ||
*/ | ||
function createApolloClient(ctx = {}, initialState = {}) { | ||
const ssrMode = typeof window === 'undefined' | ||
const cache = new InMemoryCache().restore(initialState) | ||
|
||
// Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient | ||
return new ApolloClient({ | ||
ssrMode, | ||
link: createIsomorphLink(ctx), | ||
cache, | ||
}) | ||
} | ||
|
||
function createIsomorphLink(ctx) { | ||
if (typeof window === 'undefined') { | ||
const { SchemaLink } = require('apollo-link-schema') | ||
const { schema } = require('./schema') | ||
return new SchemaLink({ schema, context: ctx }) | ||
} else { | ||
const { HttpLink } = require('apollo-link-http') | ||
|
||
return new HttpLink({ | ||
uri: '/api/graphql', | ||
credentials: 'same-origin', | ||
}) | ||
} | ||
} |
95 changes: 95 additions & 0 deletions
95
examples/api-routes-apollo-server-and-client-auth/apollo/resolvers.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,95 @@ | ||
import { AuthenticationError, UserInputError } from 'apollo-server-micro' | ||
import cookie from 'cookie' | ||
import jwt from 'jsonwebtoken' | ||
import getConfig from 'next/config' | ||
import bcrypt from 'bcrypt' | ||
import v4 from 'uuid/v4' | ||
|
||
const JWT_SECRET = getConfig().serverRuntimeConfig.JWT_SECRET | ||
|
||
const users = [] | ||
|
||
function createUser(data) { | ||
const salt = bcrypt.genSaltSync() | ||
|
||
return { | ||
id: v4(), | ||
email: data.email, | ||
hashedPassword: bcrypt.hashSync(data.password, salt), | ||
} | ||
} | ||
|
||
function validPassword(user, password) { | ||
return bcrypt.compareSync(password, user.hashedPassword) | ||
} | ||
|
||
export const resolvers = { | ||
Query: { | ||
async viewer(_parent, _args, context, _info) { | ||
const { token } = cookie.parse(context.req.headers.cookie ?? '') | ||
This comment has been minimized.
Sorry, something went wrong. |
||
if (token) { | ||
try { | ||
const { id, email } = jwt.verify(token, JWT_SECRET) | ||
|
||
return users.find(user => user.id === id && user.email === email) | ||
} catch { | ||
throw new AuthenticationError( | ||
'Authentication token is invalid, please log in' | ||
) | ||
} | ||
} | ||
}, | ||
}, | ||
Mutation: { | ||
async signUp(_parent, args, _context, _info) { | ||
const user = createUser(args.input) | ||
|
||
users.push(user) | ||
|
||
return { user } | ||
}, | ||
|
||
async signIn(_parent, args, context, _info) { | ||
const user = users.find(user => user.email === args.input.email) | ||
|
||
if (user && validPassword(user, args.input.password)) { | ||
const token = jwt.sign( | ||
{ email: user.email, id: user.id, time: new Date() }, | ||
JWT_SECRET, | ||
{ | ||
expiresIn: '6h', | ||
} | ||
) | ||
|
||
context.res.setHeader( | ||
'Set-Cookie', | ||
cookie.serialize('token', token, { | ||
httpOnly: true, | ||
maxAge: 6 * 60 * 60, | ||
path: '/', | ||
sameSite: 'lax', | ||
secure: process.env.NODE_ENV === 'production', | ||
}) | ||
) | ||
|
||
return { user } | ||
} | ||
|
||
throw new UserInputError('Invalid email and password combination') | ||
}, | ||
async signOut(_parent, _args, context, _info) { | ||
context.res.setHeader( | ||
'Set-Cookie', | ||
cookie.serialize('token', '', { | ||
httpOnly: true, | ||
maxAge: -1, | ||
path: '/', | ||
sameSite: 'lax', | ||
secure: process.env.NODE_ENV === 'production', | ||
}) | ||
) | ||
|
||
return true | ||
}, | ||
}, | ||
} |
8 changes: 8 additions & 0 deletions
8
examples/api-routes-apollo-server-and-client-auth/apollo/schema.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
import { makeExecutableSchema } from 'graphql-tools' | ||
import { typeDefs } from './type-defs' | ||
import { resolvers } from './resolvers' | ||
|
||
export const schema = makeExecutableSchema({ | ||
typeDefs, | ||
resolvers, | ||
}) |
38 changes: 38 additions & 0 deletions
38
examples/api-routes-apollo-server-and-client-auth/apollo/type-defs.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import gql from 'graphql-tag' | ||
|
||
export const typeDefs = gql` | ||
type User { | ||
id: ID! | ||
email: String! | ||
} | ||
input SignUpInput { | ||
email: String! | ||
password: String! | ||
} | ||
input SignInInput { | ||
email: String! | ||
password: String! | ||
} | ||
type SignUpPayload { | ||
user: User! | ||
} | ||
type SignInPayload { | ||
user: User! | ||
} | ||
type Query { | ||
user(id: ID!): User! | ||
users: [User]! | ||
viewer: User | ||
} | ||
type Mutation { | ||
signUp(input: SignUpInput!): SignUpPayload! | ||
signIn(input: SignInInput!): SignInPayload! | ||
signOut: Boolean! | ||
} | ||
` |
21 changes: 21 additions & 0 deletions
21
examples/api-routes-apollo-server-and-client-auth/components/field.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
export default function Field(props) { | ||
return ( | ||
<div> | ||
<label | ||
id={[props.name, 'label'].join('-')} | ||
htmlFor={[props.name, 'input'].join('-')} | ||
> | ||
{props.label}{' '} | ||
{props.required ? <span title="Required">*</span> : undefined} | ||
</label> | ||
<br /> | ||
<input | ||
autoComplete={props.autoComplete} | ||
id={[props.name, 'input'].join('-')} | ||
name={props.name} | ||
required={props.required} | ||
type={props.type} | ||
/> | ||
</div> | ||
) | ||
} |
13 changes: 13 additions & 0 deletions
13
examples/api-routes-apollo-server-and-client-auth/lib/form.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
export function getErrorMessage(error) { | ||
if (error.graphQLErrors) { | ||
for (const graphQLError of error.graphQLErrors) { | ||
if ( | ||
graphQLError.extensions && | ||
graphQLError.extensions.code === 'BAD_USER_INPUT' | ||
) { | ||
return graphQLError.message | ||
} | ||
} | ||
} | ||
return error.message | ||
} |
5 changes: 5 additions & 0 deletions
5
examples/api-routes-apollo-server-and-client-auth/next.config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
module.exports = { | ||
serverRuntimeConfig: { | ||
JWT_SECRET: 'changeme', | ||
}, | ||
} |
Oops, something went wrong.
what is ??