In this post I’d like to discuss using an OAuth 2.0 authentication strategy with Node.JS/passport and graphql-yoga. At the core of this article, I’d like to discuss how leveraging GraphQL context can help when needing to pass around sensitive information such as access tokens that may be required for future data fetching in nested resolvers.

The code exercises will be in JavaScript, but the idea still holds across different languages. I chose graphql-yoga as the server paltform because I tried out their boilerplate setups with TypeScript and was happy with the result. It’s built by Prisma. They have a variety of other helpful GraphQL tools as well. It’s also built on top of apollo-server. I’m using the core passport package for auth session management and using the passport-spotify plugin for the authentication strategy. So in this use case, I’ll be demonstrating logging in with Spotify on the frontend, storing that user session on the server with passport, and then accessing the access token through GraphQL context to make an authenticated data fetch call to the Spotify API.

I’m not going to go into any depth about using JWT or using a backend for unique user id’s. This will just deal with obtaining an access token from a third party service and using that token for future requests on the server.

To start with, the passport authentication code needs to be setup on the server. The main piece of logic for obtaining the token and placing it onto node’s request object is this piece of code:

spotify-strategy

This is the strategy code that will be used to plugin to passport. This will attach the required accessToken to the user property on each incoming Node.JS request . The variables that are used above are obtained from the Spotify SDK dashboard and pulled from environment variables for security.

server-main

Here the strategy from above is plugged into the passport module which is then hooked into the node server. Next, there are two main routes which are important for how to get the token — /auth/connect and auth/callback .

spotify-middleware

What happens is the client will make a call to /auth/connect which will start the process of authenticating. It is going to re-direct the user to the spotify login screen. Once the user logs in, it will make a call back to the server at /auth/callback with a code that will be obtained to get the access token. We attach a middleware onto that callback route that passes in the passport authenticate module for spotify and then re-direct the user back to the application.

Now that user has been authenticated, we can use the access token for making further requests to fetch data from the Spotify SDK. Now, earlier, we should have also hooked in the GraphQL server to the main Node.JS server.

graphql-server

The important piece here is that we are passing the Node.JS request object on each access. If we’ve setup cookies to be passed back correctly from the client, passport will pickup the request and attach the necessary information we asked it to attach from the spotify strategy code above. Using this, we can then access this context from the resolvers.

resolver

Here is one of the queries to perform a search through Spotify. Notice how we are obtaining the access token from the context that is passed in. We get the token here and then pass it along to the API function that will make the call

spotify API search

Using the token here, we are able to make a successful call to the Spotify SDK to get the information that we need.

The benefits of this pattern is that it is clean, GraphQL doesn’t know anything about how authentication works on the server. It simply reads from a request object in the context handler and passes that information along to the resolvers. The resolvers can then use that piece of info to make subsequent requests. If something fails, the resolvers can handle a 401 gracefully.

I hope this helps you out if you’ve been thinking about an approach. Please leave a comment below if you have any questions.