Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ptpaterson/netlify-faunadb-graphql-auth
Netlify functions example with faunadb, graphql, and authorization
https://github.com/ptpaterson/netlify-faunadb-graphql-auth
apollo auth faunadb http-cookies netlify
Last synced: about 1 month ago
JSON representation
Netlify functions example with faunadb, graphql, and authorization
- Host: GitHub
- URL: https://github.com/ptpaterson/netlify-faunadb-graphql-auth
- Owner: ptpaterson
- Created: 2020-03-02T06:42:36.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T06:16:37.000Z (over 1 year ago)
- Last Synced: 2024-07-05T05:08:37.813Z (2 months ago)
- Topics: apollo, auth, faunadb, http-cookies, netlify
- Language: JavaScript
- Homepage:
- Size: 1.59 MB
- Stars: 57
- Watchers: 2
- Forks: 13
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-fauna - netlify-faunadb-graphql-auth - A version of the netlify-faunadb-example, using HTTP-only cookies for authentication with FaunaDB's native GraphQL API (Open source example apps / React)
README
# Netlify + FaunaDB + GraphQL + Auth 
Example of using [FaunaDB](https://fauna.com/) with [Netlify functions](https://www.netlify.com/docs/functions/).
This example shows how to use HTTP only cookies for auth with FaunaDB's native Graphql API.
## About this application
This application is using [React](https://reactjs.org/) for the frontend, [Netlify Functions](https://www.netlify.com/docs/functions/) for API calls, and [FaunaDB](https://fauna.com/) as the backing database, utilizing the Graphql API with [Apollo](https://www.apollographql.com/docs/apollo-server/deployment/lambda/). This project is bundled with [Parcel](https://parceljs.org/).
The todo editing is enabled by [Draft.js](https://draftjs.org/)
This project is primarily derived from [netlify-faunadb-example](https://github.com/netlify/netlify-faunadb-example)
It has been updated to be better and more responsive stylings!
## Easy setup with Netlify dev
[Netlify Dev](https://www.netlify.com/products/dev/) works with `parcel-bundler` out of the box!
(it also works with `create-react-app`)
So there is no need to install `netlify-lambda` and set up function proxies.
## Setup
### 1. Clone down the repository
```bash
git clone https://github.com/ptpaterson/netlify-faunadb-graphql-auth.git
```
### 2. Enter the repo directory
```bash
cd netlify-faunadb-example
```
### 3. Install the dependencies
```bash
npm install
# -OR-
yarn
```
### 4. Sign up for a FaunaDB account
https://dashboard.fauna.com/accounts/register
### 5. Create a master database
It will become the parent database for the app database generated by the script provided.
In the Fauna Cloud Console:
- Click “New Database”
- Enter any name, e.g. “Netlify”, as the “Database Name”
- Click “Save”
### 6. Create a database access key
In the Fauna Cloud Console:
- Click “Security” in the left navigation
- Click “New Key”
- Make sure that the “Database” field is set to “Netlify” (or whatever you named it)
- Make sure that the “Role” field is set to “Admin”
- Enter any name, e.g. “Netlify Admin key” as the “Key Name”
- Click “Save”
### 7. Copy the database access key
You will save it in a `.env` file in the next step. **You won’t get a second chance to see it!**
### 8. Bootstrap the database
Create a `.env` file in the project directory and store the server secret as
an environment variable:
```bash
# .env
FAUNADB_ADMIN_KEY="YOUR_SECRET_KEY_HERE"
```
> NOTE: The `bootstrap` script will store another environment variable in this
> file called `FAUNADB_PUBLIC_KEY`.
### 9. Bootstrap your FaunaDB collection and indexes
```bash
# create database and fill with example data
npm run bootstrap
```
This `bootstrap` package.json script will create a Fauna database called
`auth-example` using `scripts/create-database.js` and then fill it with
example data using `scripts/create-example-data.js`.
Output should be similar to:
```
Creating your FaunaDB Database...
1) Create database "auth-example"
+ Created Database "auth-example"
2) Creating temporary key
+ Created Key "temp admin key for auth-example"
3) Uploading Graphql Schema...
o GraphQL schema imported
4) Update generated User Defined Functions...
o Updated Function "login"
o Updated Function "logout"
o Updated Function "me"
o Updated Function "user_create_todo"
5) Create custom roles...
+ Created Role "public"
+ Created Key "Public key for auth-example"
! Public client key: fnADmZcVSKFYEykYVRyVaQ5WN9RQ3OEmEMtweMWk
+ Created Role "user"
-Deleted Key "temp admin key for auth-example"
Fauna Database schema has been created
Claim your fauna database with "netlify addons:auth fauna"
```
### 10. Get `netlify-cli`
```bash
npm install netlify-cli -g
```
### 11. Start developing!
```bash
# serve development version
netlify dev
```
## Updating the Schema
This project uses `apollo-server-lambda` for the lambda function. Lambdas are [not a great solution for constantly polling remote schemas](https://github.com/apollographql/apollo-server/issues/3190). I've also had trouble with async lambda's in general. Because of this, any time a new schema is uploaded to FaunaDB, the SDL should be downloaded and placed as a string in [`functions/graphql/remoteSchema.js`](https://github.com/ptpaterson/netlify-faunadb-graphql-auth/blob/master/functions/graphql/remoteSchema.js).