jkettmann/relay-authentication

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

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

• Authentication
• File Upload
• Getting Started
• Commands
  • test
  • update-schema
• Credits and Further Information
• Changelog

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 [email protected], [email protected] or [email protected] 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

• Issue on Relay
• Answer on stackoverflow
• Question on stackoverflow

File Upload

• Comment on Relay issue by murz

Changelog

relay-authentication's Issues

Out date dependency

I think many off them is out date already especially webpack. Can you update it to present version?

Thank you!

Great repository! Thank you for sharing it!

👍

getFiles() in react native with relayjs mutations

Hi!

I need to download multiple files from react native app throw relayjs mutation. Files array looks like:

[
    {uri: 'file:///path/to/file.jpg', mime: 'image/jpg'},
    {uri: 'file:///path/to/file2.jpg', mime: 'image/jpg'},
]

I found getFiles() func for mutations, but I don't understand what format of the data it should return?

Arrow function should not return assignment no-return-assign

  <div ref={ref => (this.container = ref)} style={styles.root}>

relay-authentication/client/components/post/PostList.js
54:17 error Arrow function should not return assignment no-return-assign

I used this fix
<div ref={(arg) => { this.container = arg }} style={styles.root}>

Update the viewer

Hey, I have an issue updating the viewer. I use react-router to fast load the components. My problem is that I don't know how to reload the viewer. It only reloads when I refresh the page, and that's not what I want.

Warnings - createFragmentSpecResolver

createFragmentSpecResolver: Expected prop viewer to be supplied to Relay(App), but got undefined. Pass an explicit null if this is intentional.

Extending to use the OAuth passport strategies

Hi, first of all thanks this "starter kit".

I'm trying to extend the given authentication code to enable the users to also authentication using OAuth via Facebook, Google, etc...
My problem is that OAuth involves callbacks, the result of the login is only accessible on the callback url, from there I somehow need to call a mutation which will update to rootValue.

I know that generally, i can authenticate without mutation, simply passing the user id to the graphql rootValue/context, but the right way should be with mutations since it enables me to notify the store to update the fields. Am I wrong?

Error after upload

After creating a new post as publisher the list of post yields this error:

[Error] Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props 
[Error] TypeError: null is not an object (evaluating 'props.viewer.post.title')

No display

On hitting https://localhost:3000/, all I'm left with is a blank screen without any text or anything to display, then from my terminal, I get this:

npm ERR! errno 1
npm ERR! [email protected] relay-compiler:watch: `relay-compiler --src client --schema server/graphql/schema.graphql --watch`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] relay-compiler:watch script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Am I missing any part of it?