You can find the repo for this tutorial here; https://github.com/mhaagens/graphl_authentication_authorization Getting started We’ll be using Apollo’s amazing GraphQL tools to set up our GraphQL-server and create our schema. First we need to install some dependencies for our project; First, let’s create our package.json; npm init -y Then let’s install our dependencies; npm install apollo-server graphql lodash Next we’re going to install nodemon so we can reload our server automatically on changes. If you want to learn how to Hot Reload your server using Webpack and ES6 modules — without restarting the server — you can check out another tutorial of mine here; https://hackernoon.com/hot-reload-all-the-things-ec0fed8ab0 npm install nodemon --save-dev Finally, let’s add our start script to package.json; 'scripts': {'start': 'nodemon ./src/app.js'}, Setting up application structure Recreate this tree structure in the folder where you’ve set up package.json and your node_modules; src/directives/- requireAuthDirective.jsmodels/- post.js app.js schema.jsnode_modules/package.json Now that we have our structure, let’s paste in some boilerplate code to get us started; src/app.js This code sets up our GraphQL server using the amazing Apollo Server 2.0 🔥.We import our type definitions, resolvers and schema directives and finally we hard code a user on the request property of the server context object — in production you would need to set up a database with password hashing, JWT or session cookie middleware etc. — but to keep the focus on just the GraphQL part we’re skipping all of that and just hard coding a user for now. We also add our (which we’ll create in a bit) to our . requireAuthDirective schemaDirectives src/schema.js Here we define our schema and extend our root type definition with our Post type definitions and then merge the Post resolvers with the root resolver. We’ll create the Post type definitions and resolvers in the next step. We also create the Role enum for our schema directive. src/models/post.js Now that we have our schema, let’s create our Post type definitions and resolvers. We’re just hard coding some posts to return and then we extend the Root query with the query resolver for which will return all our posts — assuming you’re authenticated and authorized. posts Notice the directive after the posts query definition.This is how we tell our schema to use the directive for the field definition. @requireAuth src/directives/requireAuthDirective.js This is where we define our rules for the schema directive.We create a directive which extends “SchemaDirectiveVisitor” from apollo-server. We check that a user exists on our object, and if a role is specified that the role matches that of the user. If it does we resolve the field, if not we throw an AuthenticationError. context.req Let’s try it out! Run and go to .You should now see the GraphQL Playground where you can run queries against your schema. npm start http://localhost:3000/ Run a query against posts and it return the postssince we’re “logged in” with our hardcoded user; should But what if we want to require a role to access the posts?Our user is hardcoded with the USER role, so let’s require the ADMIN role to access the post. Open and change the directive to . Run the query again in the playground and you should now be getting an AuthenticationError. src/models/post.js @requireAuth @requireAuth(role: ADMIN) Finally, let’s remove the user entirely from our server context to check that you need to be signed in to access the posts. Open and remove the object from the server, like this; src/app.js context You should now be getting another AuthenticationError telling you that you need to be signed in to view the resource; Wrap up So that’s it. This is a simple introduction to using Schema Directives for authentication and authorization. Now, please don’t go using this code in production — there are probably a lot more checks to be done and of course you need to implement either session cookies or JWTs securely to get this working properly — but I hope you’re a little further a long in implementing proper auth in your GraphQL web application after reading this article! For more articles on web dev, GraphQL and Javascript, follow me on Twitter; https://twitter.com/mhaagens Further reading; https://www.apollographql.com/docs/graphql-tools/schema-directives.html Thanks Thanks to for all the helping me figure out how to implement Schema Directives and the Apollo team for their amazing work! **@**jbaxleyiii

Twitter

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Easy peasy GraphQL authentication and authorization using Schema Directives

Too Long; Didn't Read

Company Mentioned

Martin Haagensli

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Easy peasy GraphQL authentication and authorization using Schema Directives

Too Long; Didn't Read

Company Mentioned

Martin Haagensli

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES