/relay-authentication

An example app demonstrating role based authentication and file upload with Relay and GraphQL.

Primary LanguageJavaScriptMIT LicenseMIT

An example app demonstrating role based authentication and file upload with Relay and GraphQL.

Overview

Users may have a role of type reader, publisher or admin. Readers can access a list of all posts and their own profile. Publishers can additionally create posts and see a list of their own posts. Admin role is not used widely yet.

Authentication

Uses cookie-session and jsonwebtoken to save session data in form of a JSON Web Token in a cookie. This data contains the users id and its role and is made available as rootValue in GraphQL schema.

Server

  • /server/graphql/sessionMiddleware.js contains the express middleware used to get session data from the cookie.
  • /graphql/mutation/LoginMutation.js contains the GraphQL mutation type for logging in.
  • /graphql/type/UserType.js in combination with with the getPostsForCreator method in /data/Database.js include an example on how to use rootValue for retrieving restricted data in its posts field. There are other examples in Database.js like the createPost method

Client

  • /client/mutation/LoginMutation.js contains the client side login mutation.
  • /client/pages/user/Login.js utilizes this mutation.
  • /client/pages/user/UserPosts.js displays restricted user data.

File Upload

Client

  • /client/fetchQuery.js adds files to form data to send to GraphQL server.
  • /client/mutation/CreatePostMutation.js sets uploadables, which is used in fetchQuery.
  • /client/pages/user/createPost/CreatePost.js uses this mutation by passing it a File object retrieved from a HTML input element

Server

  • /server/grapqhql/uploadMiddleware.js contains a wrapper around multer middleware, which saves the image to disk and sets its URL as the image field of the GraphQL input. See this comment for more information.
  • /server/graphql/mutation/CreatePostMutation.js uses the image field to save the new post including the URL of the uploaded image.

Getting Started

$ npm install

Start the local dev server:

$ npm start

Navigate to http://localhost:3000/ to view the app. Login with email reader@test.com, publisher@test.com or publisher2@test.com and password qwerty.

Commands

test

$ npm run test:server

update-schema

$ npm run update-schema

Credits and Further Information

Based on Essential React starter kit

Authentication

File Upload

Changelog