chenkie/orbit-graphql

ReactSecurity - Orbit (GraphQL)

👋 Welcome to Orbit! This is a demo app for learning security for React applications. You can find out more at ReactSecurity.io.

This version of the Orbit app uses GraphQL. There's also a version that uses express endpoints.

GraphQL Client and Server

This example uses Apollo for both the client and the server.

Authentication Mechanisms

This example demonstrates how to use JSON Web Tokens (JWT) as a way to protect your GraphQL API. The implementation in the GraphQL server demonstrates two methods of protection: using Schema Directives and checking authentication directly in a resolver.

A Look at the App

Here's the dashboard for the app

For a more in-depth tour, check out this video:

There are two parts to the app in this project: orbit-app and orbit-api. These are the front end React application and the backend GraphQL API respectively.

Install the Dependencies

We need to install dependencies for both orbit-app and orbit-api. Change directories into each and install with npm or yarn.

With npm:

cd orbit-app
npm install
cd ../orbit-api
npm install

With yarn:

cd orbit-app
yarn
cd ../orbit-api
yarn

Set Up the Environment Files

The React app contains a file called .env.local. This file has a single variable called REACT_APP_GRAPHQL_URI which is used to connect to the GraphQL API. You can leave this as is.

The backend contains a file called .env.example. This file needs to be renamed to .env and provided with values.

For ATLAS_URL, provide the connection string to your MongoDB Atlas cluster. You can use other MongoDB providers, or even use a local MongoDB connection. Learn how to create a MongoDB instance with Atlas here.

For JWT_SECRET, provide a long, strong, unguessable secret, much like you would in production.

Run the Applications

The React app is built with create-react-app. Run it with the script provided in its package.json file.

cd orbit-app
npm start

The Node API comes with a script in its package.json which allows you to run it in development mode with nodemon.

Open a new terminal window, change directories into the API, and start it up.

cd orbit-api
npm run dev

The GraphQL API will be running at http://localhost:3001.

Navigate to http://localhost:3000 to see the app running!

License

MIT