4

I've been working on an application using react and relay, and now I'm stuck on implementing authentication.

I know that you can pass value to each graphql request through the context which is available in GraphQL resolves functions.

I'm more confused about what to pass for it and how.

Is it better to use JSON Web token, passport, something else? And how should I pass the identifier for the user?

Basically what I'm asking, What is best suitable for Relay: jwt, passport, something else? And how to hook it up with relay. Thanks!

Gershon Papi
  • 5,008
  • 3
  • 24
  • 50

2 Answers2

4

I think your best bet is to study some of the starter kit. Unfortunately almost none of these kits provide a complete JWT implementation - many of them seem to only have a half done one.

Check out:

  • Relay Authentication. Your mileage may vary - it covers the whole concept but has some bugs.
  • Universal Relay Boilerplate. That one is pretty amazing and complete but is a beast and can be a bit overwhelming to work from since it also includes iOS/Android app creation.
  • Relay Starter Kit. At the time of writing it only has FB auth setup (so no regular login form that works) through it does set a JWT cookie. I believe that migrating all their login routes to GraphQL is on the roadmap as right now it's a bit of a hybrid.

As far as your jwt/passport question. They are not mutually exclusive. Passport can handle jwt auth though personally I dont use it and work directly with a jwt library. It's not very hard to do - you can see it in the server file of the Relay Starter Kit.

JWT tokens are usually passed around the headers however there has been a shift towards storing these tokens in HttpOnly cookies (see this article). The upside of that method is that you don't need to deal with passing the token around with Relay.

cyberwombat
  • 38,105
  • 35
  • 175
  • 251
  • What do you mean jwt and passport are not mutually exclusive? Are they now two different ways to authenticate users? Why would I use both? – Gershon Papi Jul 27 '16 at 17:52
  • 1
    Passport is a general authentication tool that has plugins to handle local auth(standard username/pass and probably what you are referring to when you mention Passport), facebook, jwt and so on. It does not prescribe a particular method. It's convenient especially when dealing with the more complex scenarios of FB/twitter auth. But all of these authentication methods, including jwt, can be handled without passport if you prefer. – cyberwombat Jul 27 '16 at 18:02
  • For some reason I mixed passport with session based authentication, so I didn't understanding what it has to do with token based authentication like jwt, thanks! – Gershon Papi Jul 27 '16 at 18:11
  • Additionally here's a similar discussion on SO: http://stackoverflow.com/questions/34796788/authentication-and-privileges-on-relay-graphql?rq=1 – cyberwombat Jul 27 '16 at 18:28
  • Thanks, you're awesome :) – Gershon Papi Jul 27 '16 at 18:38
  • None of the examples include OAuth authentication using graohql mutation. Relay Authentication does authenticate using jwt with graphql mutation, but It's different with Oauth since it involves with callbacks. Any idea how to combine the two? I know that generally, i can authenticate without mutation, simply passing the user id to the graphql root/context, but the right way should be with mutations since it enables me to notify the store to update the fields. Am I wrong? – Gershon Papi Aug 08 '16 at 16:20
  • These all use OAuth2 but you are probably referring to 3 legged auth such as Facebook and indeed the only one to use FB auth is the Relay Starter Kit which has not yet converted it to Mutations. I did see that on their todo list so it may be worthwhile to poke around their issue tracker. Perhaps there is a pull request in the works. – cyberwombat Aug 08 '16 at 18:47
  • Where do you see OAuth2 in the other examples? Only React Starter Kit uses Oauth but it doesn't use mutations to update the relay store. The rest uses regular username+password authentication. Anyway, thanks, I'll look around. – Gershon Papi Aug 08 '16 at 19:39
  • I guess I always think of the others as the password grant type of Oauth2 with implicit client ID. – cyberwombat Aug 08 '16 at 20:05
  • The link of React Starter Kit expires from time to time; its GitHub page is https://github.com/kriasoft/react-starter-kit. – Franklin Yu Dec 18 '19 at 06:04
1

I'm the author of the first example in cyberwombats answer and currently developing a new universal relay starter kit. It has authentication via AWS Cognito included and there is a FB login via Cognito, though it's not fully working yet. It uses JWT tokens issued by Cognito.

Passport may also be an alternative, if you need to implement the authentication workflow yourself instead of using Cognito or Auth0 or similar services. You could implement a (separate) auth server exposing auth endpoints like login etc. This server can set a JWT in a cookie which may be used on the GraphQL server for authentication.

The starter kit is still under development (refresh token are not used yet for example), but it is kind of usable already.

jkettmann
  • 639
  • 6
  • 14