Code Monkey home page Code Monkey logo

netlify-faunadb-graphql-auth's Introduction

Netlify + FaunaDB + GraphQL + Auth    

Example of using FaunaDB with Netlify 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 for the frontend, Netlify Functions for API calls, and FaunaDB as the backing database, utilizing the Graphql API with Apollo. This project is bundled with Parcel.

The todo editing is enabled by Draft.js

This project is primarily derived from netlify-faunadb-example

faunadb netlify

Easy setup with Netlify dev

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

How to Setup & Run Locally

Get your code

  1. Clone down the repository
git clone https://github.com/ptpaterson/netlify-faunadb-graphql-auth.git
  1. Enter the repo directory
cd netlify-faunadb-example
  1. Install the dependencies
npm install
# -OR-
yarn

Prepare FaunaDB database

  1. Sign up for a FaunaDB account

https://dashboard.fauna.com/accounts/register

  1. 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”
  1. 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”
  1. Copy the database access key’s secret

Save the secret somewhere safe; you won’t get a second chance to see it.

Bootstrap the database

  1. Set your database access secret for running the bootstrapping scripts Either set the environment variables directly in your terminal, or use a .env file. The scripts will pick up anything in a .env file.

In your terminal, run the following command:

# bash
export FAUNADB_ADMIN_KEY="YourFaunaDBSecretHere"

NOTE: Make sure to replace YourFaunaDBSecretHere with the value of the secret that you copied in the previous step.

NOTE: We'll set a different variable for FAUNADB_PUBLIC_KEY in a bit, which is the important key to actually run the app!

  1. Bootstrap your FaunaDB collection and indexes
node scripts/create-database.js

The bootstrap-db script will output some important information. Copy down the created keys shown to you in the output. If you lose the keys, you can generate them by hand or run the bootstrap command again.

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"
  1. Upload Graphql Schema

In the Fauna Cloud Console:

  1. (Optional) Add example data

Set the FAUNADB_ADMIN_KEY variable (or save to .env file).

Then run

node scripts/create-example-data.js

Or, use the GraphQL Playground now available in the cloud console.

Run project Locally

  1. Get netlify-cli
npm install netlify-cli -g
  1. Run the project Either set the environment variables directly in your terminal, or use a .env file. The scripts will pick up anything in a .env file.

In your terminal, run the following command:

# bash
export FAUNADB_PUBLIC_KEY="YourFaunaDBPublicSecret"
netlify dev

Updating the Schema

This project uses apollo-server-lambda for the lambda function. Lambdas are not a great solution for fetching remote schemas. 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.

netlify-faunadb-graphql-auth's People

Contributors

ptpaterson avatar

Watchers

Ben Richardson avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.