Authentication and authorization

Control access to your GraphQL API

Your GraphQL API probably needs to control which users can see and interact with the various data it provides.

Authentication is determining whether a given user is logged in, and subsequently determining which user someone is.
Authorization is then determining what a given user has permission to do or see.

Putting authenticated user info in your `contextValue`

In the examples below, we use top-level await calls to start our server asynchronously. Check out our Getting Started guide to see how we configured our project to support this.

Before we can correctly control access to data, we have to authenticate a user. There are many patterns for providing authentication credentials, including HTTP headers and JSON web tokens.

The example below extracts a user token from the HTTP Authorization header included in each operation request. It then fetches the corresponding user object for that token and adds it to the contextValue object that's passed to every executing resolver. Each resolver can then use this object to determine what data the user has access to.

1
import { ApolloServer } from '@apollo/server';
2
import { startStandaloneServer } from '@apollo/server/standalone';
3

4
interface MyContext {
5
  // we'd define the properties a user should have
6
  // in a separate user interface (e.g., email, id, url, etc.)
7
  user: UserInterface;
8
}
9

10
const server = new ApolloServer<MyContext>({
11
  typeDefs,
12
  resolvers,
13
});
14

15
const { url } = await startStandaloneServer(server, {
16
  // Note: This example uses the `req` argument to access headers,
17
  // but the arguments received by `context` vary by integration.
18
  // This means they vary for Express, Fastify, Lambda, etc.
19

20
  // For `startStandaloneServer`, the `req` and `res` objects are
21
  // `http.IncomingMessage` and `http.ServerResponse` types.
22
  context: async ({ req, res }) => {
23
    // Get the user token from the headers.
24
    const token = req.headers.authorization || '';
25

26
    // Try to retrieve a user with the token
27
    const user = await getUser(token);
28

29
    // Add the user to the context
30
    return { user };
31
  },
32
});
33

34
console.log(`🚀 Server listening at: ${url}`);

1
import { ApolloServer } from '@apollo/server';
2
import { startStandaloneServer } from '@apollo/server/standalone';
3

4
const server = new ApolloServer({
5
  typeDefs,
6
  resolvers,
7
});
8

9
const { url } = await startStandaloneServer(server, {
10
  // Note: This example uses the `req` argument to access headers,
11
  // but the arguments received by `context` vary by integration.
12
  // This means they vary for Express, Fastify, Lambda, etc.
13

14
  // For `startStandaloneServer`, the `req` and `res` objects are
15
  // `http.IncomingMessage` and `http.ServerResponse` types.
16
  context: async ({ req, res }) => {
17
    // Get the user token from the headers.
18
    const token = req.headers.authorization || '';
19

20
    // Try to retrieve a user with the token
21
    const user = await getUser(token);
22

23
    // Add the user to the context
24
    return { user };
25
  },
26
});
27

28
console.log(`🚀 Server listening at: ${url}`);

Because your contextValue is generated separately for every new request, we don't have to worry about cleaning up user data at the end of an operation's execution.

The specifics of retrieving a user will look different for each method of authentication, but the final part will look about the same every time. The authorization needs for your schema might require you to put nothing more than { loggedIn: true } into contextValue, but also may require an id or roles, like { user: { id: 12345, roles: ['user', 'admin'] } }.

In the next section, we'll look at ways to use the user information we now have to secure your schema.

Authorization methods

API-wide authorization

Once we have information about the user making a request, the most basic thing we can do is deny them the ability to execute a query at all based on their roles. We'll start with this all-or-nothing approach to authorization because it's the most basic.

We should use this method only on highly restrictive environments that provide no public access to the API whatsoever, like an internal tool or an independent microservice that shouldn't be exposed to the public.

To perform this kind of authorization, we can modify the context function to throw a GraphQLError if the user isn't authenticated:

1
import { ApolloServer } from '@apollo/server';
2
import { startStandaloneServer } from '@apollo/server/standalone';
3
import { GraphQLError } from 'graphql';
4

5
interface MyContext {
6
  user: UserInterface;
7
}
8

9
const server = new ApolloServer<MyContext>({
10
  typeDefs,
11
  resolvers,
12
});
13

14
const { url } = await startStandaloneServer(server, {
15
  context: async ({ req }) => {
16
    // get the user token from the headers
17
    const token = req.headers.authorization || '';
18

19
    // try to retrieve a user with the token
20
    const user = getUser(token);
21

22
    // optionally block the user
23
    // we could also check user roles/permissions here
24
    if (!user)
25
      // throwing a `GraphQLError` here allows us to specify an HTTP status code,
26
      // standard `Error`s will have a 500 status code by default
27
      throw new GraphQLError('User is not authenticated', {
28
        extensions: {
29
          code: 'UNAUTHENTICATED',
30
          http: { status: 401 },
31
        },
32
      });
33

34
    // add the user to the context
35
    return { user };
36
  },
37
});
38

39
console.log(`🚀 Server listening at: ${url}`);

1
import { ApolloServer } from '@apollo/server';
2
import { startStandaloneServer } from '@apollo/server/standalone';
3
import { GraphQLError } from 'graphql';
4

5
const server = new ApolloServer({
6
  typeDefs,
7
  resolvers,
8
});
9

10
const { url } = await startStandaloneServer(server, {
11
  context: async ({ req }) => {
12
    // get the user token from the headers
13
    const token = req.headers.authorization || '';
14

15
    // try to retrieve a user with the token
16
    const user = getUser(token);
17

18
    // optionally block the user
19
    // we could also check user roles/permissions here
20
    if (!user)
21
      // throwing a `GraphQLError` here allows us to specify an HTTP status code,
22
      // standard `Error`s will have a 500 status code by default
23
      throw new GraphQLError('User is not authenticated', {
24
        extensions: {
25
          code: 'UNAUTHENTICATED',
26
          http: { status: 401 },
27
        },
28
      });
29

30
    // add the user to the context
31
    return { user };
32
  },
33
});
34

35
console.log(`🚀 Server listening at: ${url}`);

The only difference from the basic context function is the check for the user. If no user exists or if lookup fails, the function throws an error and the corresponding operation is not executed.

In resolvers

API-wide authorization might be useful in specific instances, but more commonly, a GraphQL API has at least a few fields that are public. For example, a news site might show article previews to anyone, but restrict the full body of articles to paying customers.

Luckily, GraphQL offers very granular control over data. In GraphQL servers, individual field resolvers have the ability to check user roles and make decisions as to what to return for each user. In the previous sections, we saw how to attach user information to the contextValue object. In the rest of the article, we'll discuss how to use that object.

For our first example, let's look at a resolver that's only accessible with a valid user:

1
users: (parent, args, contextValue) => {
2
  // In this case, we'll pretend there is no data when
3
  // we're not logged in. Another option would be to
4
  // throw an error.
5
  if (!contextValue.user) return null;
6

7
  return ['bob', 'jake'];
8
};

This example is a field in our schema named users that returns a list of users' names. The if check on the first line of the function looks at the contextValue generated from our request, checks for a user object, and if one doesn't exist, returns null for the whole field.

One choice to make when building out our resolvers is what an unauthorized field should return. In some use cases, returning null here is perfectly valid. Alternatives to this would be to return an empty array, [] or to throw an error, telling the client that they're not allowed to access that field. For the sake of simplicity, we just returned null in this example.

Now let's expand that example a little further, and only allow users with an admin role to look at our user list. After all, we probably don't want just anyone to have access to all our users.

1
users: (parent, args, contextValue) => {
2
  if (!contextValue.user || !contextValue.user.roles.includes('admin')) return null;
3
  return contextValue.models.User.getAll();
4
};

This example looks almost the same as the previous one, with one addition: it expects the roles array on a user to include an admin role. Otherwise, it returns null. The benefit of doing authorization like this is that we can short-circuit our resolvers and not even call lookup functions when we don't have permission to use them, limiting the possible errors that could expose sensitive data.

Because our resolvers have access to everything in contextValue, an important question to ask is how much information we want in that object. For example, we don't need the user's id, name, or age (at least not yet). It's best to keep things out of the contextValue until they're needed, since they're easy to add back in later.

In data models

As our server gets more complex, there will probably be multiple places in the schema that need to fetch the same kind of data. In our last example, you may have noticed the return array was replaced with a call to contextValue.models.User.getAll().

As always, we recommend moving the actual data fetching and transformation logic from your resolvers to data sources or model objects that each represent a concept from your application: User, Post, etc. This allows you to make your resolvers a thin routing layer, and put all of your business logic in one place.

For example, a model file for User would include all the logic for operating on users, and might look something like this:

1
export const User = {
2
  getAll: () => {
3
    /* fetching/transformation logic for all users */
4
  },
5
  getById: (id) => {
6
    /* fetching/transformation logic for a single user */
7
  },
8
  getByGroupId: (id) => {
9
    /* fetching/transformation logic for a group of users */
10
  },
11
};

In the following example, our schema has multiple ways to request a single user:

1
type Query {
2
  user(id: ID!): User
3
  article(id: ID!): Article
4
}
5

6
type Article {
7
  author: User
8
}
9

10
type User {
11
  id: ID!
12
  name: String!
13
}

Rather than having the same fetching logic for a single user in two separate places, it usually makes sense to move that logic to the model file. You may have guessed, with all this talk of model files in an authorization article, that authorization is another great thing to delegate to the model, just like data fetching. You would be right.

Delegating authorization to models

You may have noticed that our models also exist on the contextValue, alongside the user object we added earlier. We can add the models to the context in exactly the same way as we did the user.

1
context: async ({ req }) => {
2
 // get the user token from the headers
3
 const token = req.headers.authentication || '';
4

5
 // try to retrieve a user with the token
6
 const user = getUser(token);
7

8
 // optionally block the user
9
 // we could also check user roles/permissions here
10
  if (!user) throw new GraphQLError("you must be logged in to query this schema", {
11
    extensions: {
12
      code: 'UNAUTHENTICATED',
13
    },
14
  });
15

16
 // add the user to the contextValue
17
 return {
18
   user,
19
   models: {
20
     User: generateUserModel({ user }),
21
     ...
22
   }
23
 };
24
},

Starting to generate our models with a function requires a small refactor, that would leave our User model looking something like this:

1
export const generateUserModel = ({ user }) => ({
2
  getAll: () => {
3
    /* fetching/transform logic for all users */
4
  },
5
  getById: (id) => {
6
    /* fetching/transform logic for a single user */
7
  },
8
  getByGroupId: (id) => {
9
    /* fetching/transform logic for a group of users */
10
  },
11
});

Now any model method in User has access to the same user information that resolvers already had, allowing us to refactor the getAll function to do the permissions check directly rather than having to put it in the resolver:

1
getAll: () => {
2
  if (!user || !user.roles.includes('admin')) return null;
3
  return fetch('http://myurl.com/users');
4
};

With custom directives

Another way to go about authorization is via GraphQL Schema Directives. A directive is an identifier preceded by a @ character, optionally followed by a list of named arguments, which can appear after almost any form of syntax in the GraphQL query or schema languages.

Check out this example of an authorization directive:

1
const typeDefs = `#graphql
2
  directive @auth(requires: Role = ADMIN) on OBJECT | FIELD_DEFINITION
3

4
  enum Role {
5
    ADMIN
6
    REVIEWER
7
    USER
8
  }
9

10
  type User @auth(requires: USER) {
11
    name: String
12
    banned: Boolean @auth(requires: ADMIN)
13
    canPost: Boolean @auth(requires: REVIEWER)
14
  }
15
`;

The @auth directive can be called directly on specific fields or on a type. This nicely hides the authorization logic behind the directive implementation.

With your @auth directive in place, your resolvers now need to check the user's role against the role specified by the directive. One way to do this is using the mapSchema function from the @graphql-tools/utils package to transform every resolver in your schema. For an example of setting up directive-based permission checks, see the mapSchema docs.

Outside of GraphQL

If you're using a REST API that has built-in authorization, like with an HTTP header, you have one more option. Rather than doing any authentication or authorization work in the GraphQL layer (in resolvers/models), it's possible to simply pass through the headers or cookies to your REST endpoint and let it do the work.

Here's an example:

src/server.ts

1
context: async ({ req }) => {
2
 // pass the request information through to the model
3
 return {
4
   user,
5
   models: {
6
     User: generateUserModel({ req }),
7
     ...
8
   }
9
 };
10
},

src/models/user.ts

1
export const generateUserModel = ({ req }) => ({
2
  getAll: () => {
3
    return fetch('http://myurl.com/users', { token: req.headers.token });
4
  },
5
});

If your REST endpoint is already backed by some form of authorization, this cuts down a lot of the logic that needs to get built in the GraphQL layer. This can be a great option when building a GraphQL API over an existing REST API that has everything you need already built in.

Automatic persisted queries

CORS