Authentication in GraphQL with Apollo Server 4

Lesson 1

Deprecation Notice

This course path teaches Apollo Server 3, which has been deprecated. To access the new course paths covering Apollo Server 4, use this course path.

Introduction to Authentication in GraphQL

In this lesson, we're diving into how to add authentication to your GraphQL server. Authentication is crucial for securing your API and ensuring that only authorized users can access specific resources. We'll be using Apollo Server, a popular GraphQL server, to implement this. While Apollo Server is widely used for its simplicity and active support, other alternatives include Express-GraphQL and Relay.

Our goal for this lesson is to:

Set up an Apollo Server with basic authentication.
Implement a login system.
Secure certain GraphQL mutations.

Setting Up the Apollo Server

First, let's quickly revise how we set up the GraphQL types and mock data. Our GraphQL server will have two mutations — one for logging in using the provided username and password and another for adding a new book given its author and title.

TypeScript
1import { ApolloServer } from '@apollo/server';
2
3const typeDefs = `#graphql
4  type Book {
5    id: ID!
6    title: String!
7    author: String!
8  }
9
10  type Query {
11    books: [Book]
12  }
13
14  type Mutation {
15    login(username: String!, password: String!): String
16    addBook(title: String!, author: String!): Book
17  }
18`;
19
20const users = [{ username: 'admin', password: 'admin' }];
21const books = [
22  { id: '1', title: 'The Hobbit', author: 'J.R.R. Tolkien' },
23  { id: '2', title: 'Harry Potter', author: 'J.K. Rowling' }
24];

Implementing Authentication Logic

Now let's implement the authentication logic to secure our GraphQL API.

For this example, we use a simple array to mock a user database.

TypeScript
1const users = [{ username: 'admin', password: 'admin' }];

The login mutation takes a username and password and returns an authentication token if valid.

TypeScript
1import { AuthenticationError } from '@apollo/server';
2
3const resolvers = {
4  Mutation: {
5    login: (_, { username, password }) => {
6      const user = users.find(user => user.username === username && user.password === password);
7      if (!user) {
8        throw new AuthenticationError('Invalid credentials');
9      }
10      return 'token';
11    },
12    addBook: (_, { title, author }, { token }) => {
13      if (token !== 'Bearer ' + 'token') {
14        throw new AuthenticationError('You must be logged in');
15      }
16      const newBook = { id: '3', title, author };
17      books.push(newBook);
18      return newBook;
19    }
20  }
21};

Here, we check if the provided credentials match any user in our mock database. If they do, we return a token; otherwise, we throw an AuthenticationError.

Setting Up the Server

Finally, we start a GraphQL server, providing a proper authorization context on startup:

TypeScript
1import { createServer } from 'http';
2import { expressMiddleware } from '@apollo/server/express';
3import express from 'express';
4import bodyParser from 'body-parser';
5
6const startApolloServer = async () => {
7  const app = express();
8  const httpServer = createServer(app);
9
10  const server = new ApolloServer({
11    typeDefs,
12    resolvers
13  });
14
15  await server.start();
16
17  app.use(
18    '/graphql',
19    bodyParser.json(),
20    expressMiddleware(server, {
21      context: async ({ req }) => {
22        const token = req.headers.authorization || '';
23        return { token };
24      }
25    })
26  );
27
28  httpServer.listen({ port: 4000 }, () => {
29    console.log(`🚀 Server ready at http://localhost:4000/graphql`);
30  });
31};
32
33startApolloServer();

Here we register a middleware for a /graphql route. bodyParser.json() parses the JSON body of incoming HTTP requests and makes it available in req.body. In the context of GraphQL, clients send their queries or mutations as JSON in the request body. bodyParser.json() ensures the server can read and process this JSON data. GraphQL requests typically include a query and variables in the request body. Without parsing, the server cannot interpret the body content. The context function runs for each incoming request, extracts the token from the Authorization header, and returns an object ({ token }), which becomes accessible to all resolvers during that request.

Testing the Implementation: Login

Let's test our implementation by doing some queries to the server we've just set up. First, we call the login mutation to authorize our user.

TypeScript
1import fetch from 'node-fetch';
2
3const url = 'http://localhost:4000/graphql';
4
5async function login(username, password) {
6  const query = `
7    mutation {
8      login(username: "${username}", password: "${password}")
9    }
10  `;
11
12  const response = await fetch(url, {
13    method: 'POST',
14    headers: {
15      'Content-Type': 'application/json',
16    },
17    body: JSON.stringify({ query }),
18  });
19
20  const data = await response.json();
21  return data.data.login;
22}
23
24(async () => {
25  const token = await login('admin', 'admin');
26  console.log('Token:', token);
27})();

This function sends a login request and retrieves the token.

Testing the Implementation: Query Books

After we have authorized, let's query our books from the server:

TypeScript
1async function queryBooks(token) {
2  const query = `
3    query {
4      books {
5        id
6        title
7        author
8      }
9    }
10  `;
11
12  const response = await fetch(url, {
13    method: 'POST',
14    headers: {
15      'Content-Type': 'application/json',
16      'Authorization': `Bearer ${token}`,
17    },
18    body: JSON.stringify({ query }),
19  });
20
21  const data = await response.json();
22  return data;
23}
24
25(async () => {
26  const token = await login('admin', 'admin');
27  console.log('Token:', token);
28  
29  const booksData = await queryBooks(token);
30  console.log('Books:', JSON.stringify(booksData, null, 2));
31})();

This function queries the books with the provided token.

Testing the Implementation: Adding a New Book

Finally, let's try to add a new book to the server.

TypeScript
1async function addBook(token, title, author) {
2  const mutation = `
3    mutation {
4      addBook(title: "${title}", author: "${author}") {
5        id
6        title
7        author
8      }
9    }
10  `;
11
12  const response = await fetch(url, {
13    method: 'POST',
14    headers: {
15      'Content-Type': 'application/json',
16      'Authorization': `Bearer ${token}`,
17    },
18    body: JSON.stringify({ query: mutation }),
19  });
20
21  const data = await response.json();
22  return data;
23}
24
25(async () => {
26  const token = await login('admin', 'admin');
27  console.log('Token:', token);
28  
29  const booksData = await queryBooks(token);
30  console.log('Books:', JSON.stringify(booksData, null, 2));
31  
32  const newBook = await addBook(token, '1984', 'George Orwell');
33  console.log('New Book:', JSON.stringify(newBook, null, 2));
34})();

This code logs in to get a token, queries the list of books, and attempts to add a new book.

Expected output:

JSON
1Token: token
2Books: {
3  "data": {
4    "books": [
5      { "id": "1", "title": "The Hobbit", "author": "J.R.R. Tolkien" },
6      { "id": "2", "title": "Harry Potter", "author": "J.K. Rowling" }
7    ]
8  }
9}
10New Book: {
11  "data": {
12    "addBook": {
13      "id": "3",
14      "title": "1984",
15      "author": "George Orwell"
16    }
17  }
18}

Overall Code Flow: How Authentication Works

Let's summarize the authorization flow in the Apollo Server with GraphQL:

Client Sends a Request: Client sends a GraphQL request with the query/mutation in JSON body and an Authorization header with the token if needed.
Middleware Execution:
- bodyParser.json() processes the JSON body.
- expressMiddleware extracts the token from the Authorization header and attaches it to the context.
Apollo Server Execution:
- Validates the request against the schema.
- Resolves fields using resolvers.
Resolver Authentication:
- Uses the token from context to authenticate.
- Executes the operation if valid, otherwise throws AuthenticationError.
Response to Client: Sends a JSON response with the data or an error message back to the client.

Lesson Summary

In this lesson, you learned how to add authentication to your GraphQL server using Apollo Server. We:

Set up the Apollo Server with basic authentication.
Implemented a login system to authenticate users.
Secured the addBook mutation to ensure only authenticated users can add books.

Next, you'll get hands-on practice with adding more secure queries and mutations. Great job on completing this lesson! Keep up the good work as you continue your journey in securing and optimizing GraphQL APIs.

Enjoy this lesson? Now it's time to practice with Cosmo!

Practice is how you turn knowledge into actual skills.