{"id":14976099,"url":"https://github.com/fev4/with-graphql-faunadb-cookie-auth","last_synced_at":"2025-10-27T18:30:21.402Z","repository":{"id":42819636,"uuid":"267859400","full_name":"fev4/with-graphql-faunadb-cookie-auth","owner":"fev4","description":"A template to integrate a httpOnly cookie auth flow with Next.js, FaunaDB, Apollo Server and react-query/graphql-request","archived":false,"fork":false,"pushed_at":"2023-01-06T07:21:35.000Z","size":733,"stargazers_count":19,"open_issues_count":13,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-01T07:31:40.628Z","etag":null,"topics":["abac","apollo-server","faunadb","graphql-request","graphql-schema","nextjs","react-query","vercel"],"latest_commit_sha":null,"homepage":"https://with-graphql-faunadb-cookie-auth.now.sh/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fev4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-29T13:03:23.000Z","updated_at":"2024-05-03T03:06:26.000Z","dependencies_parsed_at":"2023-02-05T15:01:38.920Z","dependency_job_id":null,"html_url":"https://github.com/fev4/with-graphql-faunadb-cookie-auth","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fev4%2Fwith-graphql-faunadb-cookie-auth","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fev4%2Fwith-graphql-faunadb-cookie-auth/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fev4%2Fwith-graphql-faunadb-cookie-auth/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fev4%2Fwith-graphql-faunadb-cookie-auth/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fev4","download_url":"https://codeload.github.com/fev4/with-graphql-faunadb-cookie-auth/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238536042,"owners_count":19488641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["abac","apollo-server","faunadb","graphql-request","graphql-schema","nextjs","react-query","vercel"],"created_at":"2024-09-24T13:53:18.117Z","updated_at":"2025-10-27T18:30:16.089Z","avatar_url":"https://github.com/fev4.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js, FaunaDB and `httpOnly` Cookie Auth Flow with GraphQL\n\nThe 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.\n\nThese are some of the features that this setup provides:\n\n1. The auth flow lives inside the Fauna dashboard with the help of [User Defined Functions (UDFs)](https://docs.fauna.com/fauna/current/api/graphql/functions) and [User Defined Roles (UDRs)](https://docs.fauna.com/fauna/current/security/roles.html). UDFs and UDRs are one flexible medium offered in Fauna by which you can implement business logic and [Attribute-based Access Control (ABAC)](https://docs.fauna.com/fauna/current/security/abac.html) to any document, function and index in the database.\n2. A GraphQL server using [schema stitching](https://www.apollographql.com/docs/apollo-server/features/schema-stitching/).\n   1. This is helpful because it provides the maximum possible flexibility in terms of API integration through GraphQL, given that Fauna doesn't support [Apollo Federation](https://www.apollographql.com/docs/apollo-server/federation/introduction/) yet.\n   2. In other words, by using schema stitching we can extend our GraphQL endpoint to connect with other APIs or basically run any arbitrary code in-between Fauna requests (similar to a proxy).\n   3. This is specially useful if you don't want to have several API endpoints and want to manage everything through GraphQL.\n3. The example also provides a [series of scripts](/examples/with-cookie-auth-fauna-apollo-server/scripts) that can be executed with a single command, that help you manage your database quickly on a day to day basis, from pushing a newly created schema, generating new keys, updating your functions or even creating a whole new database from scratch. This is incredibly useful when getting started in order to fasten things up.\n4. An httpOnly cookie based auth flow.\n5. Token validation on refresh and window focus with [`react-query`](https://github.com/tannerlinsley/react-query#useQuery). 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.\n\nThis 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://github.com/vercel/next.js/tree/canary/examples/with-cookie-auth-fauna).\n\n## Demo\n\n[https://with-graphql-faunadb-cookie-auth.now.sh/](https://with-graphql-faunadb-cookie-auth.now.sh/)\n\n## How to use\n\n### Using `create-next-app`\n\nExecute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:\n\n```bash\nnpx create-next-app --example with-cookie-auth-fauna-apollo-server with-cookie-auth-fauna-apollo-server-app\n# or\nyarn create next-app --example with-cookie-auth-fauna-apollo-server with-cookie-auth-fauna-apollo-server-app\n```\n\n### Download manually\n\nDownload the example:\n\n```bash\ncurl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-cookie-auth-fauna-apollo-server\ncd with-cookie-auth-fauna-apollo-server\n```\n\nInstall it and run:\n\n```bash\nnpm install\nnpm run dev\n# or\nyarn\nyarn dev\n```\n\nDeploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js\u0026utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).\n\n### Run locally\n\n1. Create an account on [Fauna](https://fauna.com/)\n2. In the [FaunaDB Console](https://dashboard.fauna.com/), click \"New Database\". Name it whatever you like and click \"Save\".\n3. Now go to \"Security\" and click \"New Key\". Let's create an \"Admin\" key, name it whatever you want.\n4. Copy the newly created \"Admin\" key and create an `.env.local` file. Paste the key along the name `FAUNADB_ADMIN_SECRET`.\n5. On you console, while positioned on the root folder, execute:\n\n```\nnode -e 'require(\"./scripts/setup.js\").full()'\n```\n\nThis will create all the roles, functions and lastly a public key necessary to connect to the DB securely.\n\n6. Copy the last line of the previous command into the `.env.local` file.\n7. (Optional) Delete the admin key both from the [FaunaDB Console](https://dashboard.fauna.com/) and the `.env.local` file.\n8. Run `yarn \u0026\u0026 yarn dev`\n\n### Deploy on Vercel\n\nYou can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).\n\n#### Deploy Your Local Project\n\nTo deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github\u0026utm_medium=readme\u0026utm_campaign=next-example).\n\n**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffev4%2Fwith-graphql-faunadb-cookie-auth","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffev4%2Fwith-graphql-faunadb-cookie-auth","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffev4%2Fwith-graphql-faunadb-cookie-auth/lists"}