Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 2 months ago
JSON representation

Netlify functions example with faunadb, graphql, and authorization

Awesome Lists containing this project

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).