A template to integrate a httpOnly cookie auth flow with Next.js, FaunaDB, Apollo Server and react-query/graphql-request
httpOnly
Cookie Auth Flow with GraphQLThe present example explains how to setup an httpOnly
cookie auth flow with Next.js and Fauna, using Apollo Server and react-query/graphql-request on the client.
These are some of the features that this setup provides:
react-query
. This is useful because it keeps the auth state changes in sync with the client, for example if the user token dissapears on the DB (for any reason), it logs out the user in any other client automatically.This is an advanced example that assumes a lot of concepts, and it strives to provide the most ample bed from which you can get started with both FaunaDB and Next.js. If you are looking for a simpler approach which doesn't include GraphQL, UDFs or User Defined Roles, and only handles a cookie based authentication plus token validation, be sure to check out the example with-cookie-auth-fauna.
https://with-graphql-faunadb-cookie-auth.now.sh/
create-next-app
Execute create-next-app
with npm or Yarn to bootstrap the example:
npx create-next-app --example with-cookie-auth-fauna-apollo-server with-cookie-auth-fauna-apollo-server-app
# or
yarn create next-app --example with-cookie-auth-fauna-apollo-server with-cookie-auth-fauna-apollo-server-app
Download the example:
curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-cookie-auth-fauna-apollo-server
cd with-cookie-auth-fauna-apollo-server
Install it and run:
npm install
npm run dev
# or
yarn
yarn dev
Deploy it to the cloud with Vercel (Documentation).
.env.local
file. Paste the key along the name FAUNADB_ADMIN_SECRET
.node -e 'require("./scripts/setup.js").full()'
This will create all the roles, functions and lastly a public key necessary to connect to the DB securely.
.env.local
file..env.local
file.yarn && yarn dev
You can deploy this app to the cloud with Vercel (Documentation).
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and import to Vercel.
Important: When you import your project on Vercel, make sure to click on Environment Variables and set them to match your .env.local
file.