Ryan Chenkie: [0:00] When we want to do authentication and authorization with GraphQL, we've got the option of using JSON Web Tokens or we can use cookies in sessions.

[0:07] One way to think about it is that there's nothing inherently about GraphQL that's going to limit us to doing one form of authentication or another. We can think about it as if we're running a React application and an Express API.

[0:20] Under the hoods and underneath all of the layers that Apollo gives us, we're effectively just hitting an Express API. The biggest difference is that it is going to a single endpoint of GraphQL instead of a bunch of different JSON endpoints which we have had before.

[0:35] You'll probably find that most GraphQL developers prefer JSON Web Tokens over cookies and sessions. In this example, we're going to show how to make things happen with JSON Web Tokens.

[0:44] We are back to putting our JSON Web Tokens in localStorage for now. You can definitely set up your React application and your GraphQL API so that you are sending your JSON Web Tokens through a cookie. In this case, we're going to use localStorage just to keep things simple.

[1:00] Again, please heed the advice of cross-site scripting vulnerabilities and be sure to review the sections of React Security that deal with cross-site scripting. When we log into the application, we get our token set here in localStorage. That's happening just as it always has.

[1:16] The React application is still making sure that the user has a particular role. For example, if the user was not an Admin, they wouldn't be able to get themselves over to the inventory area. However, right now the GraphQL API is not enforcing authentication or authorization. We want to fix that up.

[1:32] The first thing that we'll want to do is tell GraphQL to send the user's JSON Web Token as an Authorization header when it makes request. Just like we have the JSON Web Token going in the Authorization header before, we want that same behavior now.

[1:46] To do that, let's go into App.js file. Orbit App and we'll go into Source and App.js. Let's go up to where we instantiate Apollo Client. Up here, we'll see our Apollo Client is just taking one option right now. That's the URI that it should go to. What we'll want now is to set some options on the request life cycle.

[2:06] We can put in a key called Request, and we can look for an operation. This operation argument here has a setContext function which is where we can set our headers. Let's start by looking for a token. Let's say, const token = localStorage.getItem. We're looking for a token.

[2:25] If we have a token, let's attach it as an Authorization header. If there's a token, let's do operation.setContext, and let's set on Headers an Authorization header.

[2:36] We say, headers and then authorization and the value to pass here is going to be bearer, which we've seen before. We'll use the Bearer scheme, and then we will pass in the token.

[2:47] Let's have a look at this and see if it's going to run for us. If we come back over to the Network tab, the page just refreshed so we should get the Authorization header in our request header now. Coming to Headers, let's come down and look for the request headers.

[3:02] Here, we've got Authorization with Bearer and then our JSON Web Token. This is one of the only things we have to do from our React application to make authentication and authorization happen. The bulk of the work here to protect our GraphQL application is going to be on the server.