React/Relay Auth0 and GraphQL lesson


I’ve been struggling through a React full stack course on Lynda.com all week. For those of you who are unfamiliar, React is a programming framework created by Facebook and “full stack” means programming everything from the user interface (those cool animated buttons on the screen) to database which typically lives in the cloud. How does a “database” live in a cloud you ask? What is a database??? Hi, I’m Cliff. You’re here because you have these questions and more. I’m here because… well, because my daughter just reminded me that I haven’t posted anything in a month of Sundays. It’s good to be back posting if not only sporadically. I’ve learned and accomplished so very little since my last post so I guess I should probably make this a more regular thing. With that, let’s get started on what we’re s’posed to learn today.

Like I said above, I’m on this React Full Stack course that I found on Lynda.com. It assumes intermediate experience but in reality you would have to be a 20 year professional to finish the course. This is no fault of the instructor, rather it is because of the speed of these popular technologies used in the course. He introduces React and Relay using a few open source and freemium APIs and services which, by the time of my taking the course, have grown incompatible with one another. The instructor attempts to introduce React, Relay, and authentication and integrate these concepts in a rather interesting TicTacToe game that you play against either another player or an artificial intelligence. At the end of each game you are supposed to guess wether you played against a human or computer opponent.

The two major sources of pain are Auth0 and GraphQL and it’s publicly available Graph.cool service. Auth0 is a freemium authentication service whose sole purpose is to authenticate any user of your app. GraphQL appears to be a newer object-like or NoSQL data store which is supposed to be a glove fit for Relay. (Relay is an implementation of Facebook’s Flux design pattern which itself is just a way of controlling data flow.) Just explaining the titles of these major components requires a bit of programming history and expertise! The problem is that Auth0, as explained in the course, does not work with GraphQL. Fixing the incompatibility took major experimentation and research as the newer way to integrate these two is completely undocumented. I found a few random hints through sporadic cries for help on various forums. Everything seems to point to Apollo authentication and I don’t even pretend to know what that is yet. I just want to finish this course!

Here’s what I discovered. Setting up Auth0 and the auth0 lock API out of the box will NOT work against an out of the box Graph.cool deployment. The problem is that Auth0 uses something called RS256 authentication keys and something else called OIDC. Graph.cool rejects these authentication tokens and the ONLY way to fix it is to disable an OIDC setting hidden in auth0.com’s advanced settings and to switch your encryption algorithm to HS256 in these same advanced settings. Once you do that your app will break again because you have to find and use yet another undocumented code setting on the auth0 lock API. When you instantiate your lock instance you have to set:

           this.lock = new Auth0Lock(clientId, authDomain, {
            auth: {
                params: {
                    scope: 'openid email'
                },
                responseType: "token id_token",
            },
        });

The key piece here is the responseType has to be set to “token id_token” which is completely undocumented as far as I can tell.

The whole experience is a nightmare. Add to that how the most confusing part of this exercise is not explained in enough detail through the course. The instructor merely talks through each line of code as he types not really giving enough clarity on exactly how everything pieces together. There’s a lot happening under the covers and it’s all changing rapidly!

Also, many of the open source frameworks used through the course require version tweaking and massaging to work as described. For eg. all of the react-relay imports should be changed to

import Relay from 'react-relay/classic'

because there have been major breaking changes in the Relay APIs which breaks the entire app. I’m not doing enough justice explaining how to fix the many problems in the course nor have properly addressed the many inconsistencies I tripped over. I don’t want to say the instructor did a bad job because he covers a TON of information and functionality in such a short course. Also the idea and implementation is really well put together. However, the course itself is a nightmare and I can’t see how anyone other than the most astute could complete it with all the recent API and service changes. I’m finally almost done with the course having addressed the most difficult piece of integration! I’ll try to keep posting as I make progress!