Authentication in GraphQL with Apollo Server 4

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 import { ApolloServer } from '@apollo/server'; const typeDefs = `#graphql type Book {id: ID! title: String! author: String!} type Query {books: [Book]} type Mutation {login(username: String!, password: String!): String addBook(title: String!, author: String!): Book} `; const users = [{ username: 'admin', password: 'admin' }]; const books = [{ id: '1', title: 'The Hobbit', author: 'J.R.R. Tolkien' }, { id: '2', title: 'Harry Potter', author: 'J.K. Rowling' }]; import { ApolloServer } from '@apollo/server'; const typeDefs = `#graphql type Book {id: ID! title: String! author: String!} type Query {books: [Book]} type Mutation {login(username: String!, password: String!): String addBook(title: String!, author: String!): Book} `; const users = [{ username: 'admin', password: 'admin' }]; const books = [{ id: '1', title: 'The Hobbit', author: 'J.R.R. Tolkien' }, { id: '2', title: 'Harry Potter', author: 'J.K. Rowling' }];

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. TypeScriptconst users = [{ username: 'admin', password: 'admin' }];const users = [{ username: 'admin', password: 'admin' }]; The login mutation takes a username and password and returns an authentication token if valid. TypeScriptimport { AuthenticationError } from '@apollo/server'; const resolvers = { Mutation: { login: (_, { username, password }) => { const user = users.find(user => user.username === username && user.password === password); if (!user) { throw new AuthenticationError('Invalid credentials'); } return 'token'; }, addBook: (_, { title, author }, { token }) => { if (token !== 'Bearer ' + 'token') { throw new AuthenticationError('You must be logged in'); } const newBook = { id: '3', title, author }; books.push(newBook); return newBook; } } };import { AuthenticationError } from '@apollo/server'; const resolvers = { Mutation: { login: (_, { username, password }) => { const user = users.find(user => user.username === username && user.password === password); if (!user) { throw new AuthenticationError('Invalid credentials'); } return 'token'; }, addBook: (_, { title, author }, { token }) => { if (token !== 'Bearer ' + 'token') { throw new AuthenticationError('You must be logged in'); } const newBook = { id: '3', title, author }; books.push(newBook); return newBook; } } }; 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.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

TypeScript

import { ApolloServer } from '@apollo/server';

const typeDefs = `#graphql
  type Book {
    id: ID!
    title: String!
    author: String!
  }

  type Query {
    books: [Book]
  }

  type Mutation {
    login(username: String!, password: String!): String
    addBook(title: String!, author: String!): Book
  }
`;

const users = [{ username: 'admin', password: 'admin' }];
const books = [
  { id: '1', title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  { id: '2', title: 'Harry Potter', author: 'J.K. Rowling' }
];

TypeScript

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

TypeScript

import { AuthenticationError } from '@apollo/server';

const resolvers = {
  Mutation: {
    login: (_, { username, password }) => {
      const user = users.find(user => user.username === username && user.password === password);
      if (!user) {
        throw new AuthenticationError('Invalid credentials');
      }
      return 'token';
    },
    addBook: (_, { title, author }, { token }) => {
      if (token !== 'Bearer ' + 'token') {
        throw new AuthenticationError('You must be logged in');
      }
      const newBook = { id: '3', title, author };
      books.push(newBook);
      return newBook;
    }
  }
};

TypeScript

import { createServer } from 'http';
import { expressMiddleware } from '@apollo/server/express';
import express from 'express';
import bodyParser from 'body-parser';

const startApolloServer = async () => {
  const app = express();
  const httpServer = createServer(app);

  const server = new ApolloServer({
    typeDefs,
    resolvers
  });

  await server.start();

  app.use(
    '/graphql',
    bodyParser.json(),
    expressMiddleware(server, {
      context: async ({ req }) => {
        const token = req.headers.authorization || '';
        return { token };
      }
    })
  );

  httpServer.listen({ port: 4000 }, () => {
    console.log(`🚀 Server ready at http://localhost:4000/graphql`);
  });
};

startApolloServer();

import { createServer } from 'http';
import { expressMiddleware } from '@apollo/server/express';
import express from 'express';
import bodyParser from 'body-parser';

const startApolloServer = async () => {
  const app = express();
  const httpServer = createServer(app);

  const server = new ApolloServer({
    typeDefs,
    resolvers
  });

  await server.start();

  app.use(
    '/graphql',
    bodyParser.json(),
    expressMiddleware(server, {
      context: async ({ req }) => {
        const token = req.headers.authorization || '';
        return { token };
      }
    })
  );

  httpServer.listen({ port: 4000 }, () => {
    console.log(`🚀 Server ready at http://localhost:4000/graphql`);
  });
};

startApolloServer();

TypeScript

import fetch from 'node-fetch';

const url = 'http://localhost:4000/graphql';

async function login(username, password) {
  const query = `
    mutation {
      login(username: "${username}", password: "${password}")
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query }),
  });

  const data = await response.json();
  return data.data.login;
}

(async () => {
  const token = await login('admin', 'admin');
  console.log('Token:', token);
})();

TypeScript

async function queryBooks(token) {
  const query = `
    query {
      books {
        id
        title
        author
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({ query }),
  });

  const data = await response.json();
  return data;
}

(async () => {
  const token = await login('admin', 'admin');
  console.log('Token:', token);
  
  const booksData = await queryBooks(token);
  console.log('Books:', JSON.stringify(booksData, null, 2));
})();

async function queryBooks(token) {
  const query = `
    query {
      books {
        id
        title
        author
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({ query }),
  });

  const data = await response.json();
  return data;
}

(async () => {
  const token = await login('admin', 'admin');
  console.log('Token:', token);
  
  const booksData = await queryBooks(token);
  console.log('Books:', JSON.stringify(booksData, null, 2));
})();

TypeScript

async function addBook(token, title, author) {
  const mutation = `
    mutation {
      addBook(title: "${title}", author: "${author}") {
        id
        title
        author
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({ query: mutation }),
  });

  const data = await response.json();
  return data;
}

(async () => {
  const token = await login('admin', 'admin');
  console.log('Token:', token);
  
  const booksData = await queryBooks(token);
  console.log('Books:', JSON.stringify(booksData, null, 2));
  
  const newBook = await addBook(token, '1984', 'George Orwell');
  console.log('New Book:', JSON.stringify(newBook, null, 2));
})();

JSON

Token: token
Books: {
  "data": {
    "books": [
      { "id": "1", "title": "The Hobbit", "author": "J.R.R. Tolkien" },
      { "id": "2", "title": "Harry Potter", "author": "J.K. Rowling" }
    ]
  }
}
New Book: {
  "data": {
    "addBook": {
      "id": "3",
      "title": "1984",
      "author": "George Orwell"
    }
  }
}

TypeScript

import { createServer } from 'http';
import { expressMiddleware } from '@apollo/server/express';
import express from 'express';
import bodyParser from 'body-parser';

const startApolloServer = async () => {
  const app = express();
  const httpServer = createServer(app);

  const server = new ApolloServer({
    typeDefs,
    resolvers
  });

  await server.start();

  app.use(
    '/graphql',
    bodyParser.json(),
    expressMiddleware(server, {
      context: async ({ req }) => {
        const token = req.headers.authorization || '';
        return { token };
      }
    })
  );

  httpServer.listen({ port: 4000 }, () => {
    console.log(`🚀 Server ready at http://localhost:4000/graphql`);
  });
};

startApolloServer();

TypeScript

async function queryBooks(token) {
  const query = `
    query {
      books {
        id
        title
        author
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({ query }),
  });

  const data = await response.json();
  return data;
}

(async () => {
  const token = await login('admin', 'admin');
  console.log('Token:', token);
  
  const booksData = await queryBooks(token);
  console.log('Books:', JSON.stringify(booksData, null, 2));
})();

TypeScript

import fetch from 'node-fetch';

const url = 'http://localhost:4000/graphql';

async function login(username, password) {
  const query = `
    mutation {
      login(username: "${username}", password: "${password}")
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ query }),
  });

  const data = await response.json();
  return data.data.login;
}

(async () => {
  const token = await login('admin', 'admin');
  console.log('Token:', token);
})();

TypeScript

async function addBook(token, title, author) {
  const mutation = `
    mutation {
      addBook(title: "${title}", author: "${author}") {
        id
        title
        author
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({ query: mutation }),
  });

  const data = await response.json();
  return data;
}

(async () => {
  const token = await login('admin', 'admin');
  console.log('Token:', token);
  
  const booksData = await queryBooks(token);
  console.log('Books:', JSON.stringify(booksData, null, 2));
  
  const newBook = await addBook(token, '1984', 'George Orwell');
  console.log('New Book:', JSON.stringify(newBook, null, 2));
})();

JSON

Token: token
Books: {
  "data": {
    "books": [
      { "id": "1", "title": "The Hobbit", "author": "J.R.R. Tolkien" },
      { "id": "2", "title": "Harry Potter", "author": "J.K. Rowling" }
    ]
  }
}
New Book: {
  "data": {
    "addBook": {
      "id": "3",
      "title": "1984",
      "author": "George Orwell"
    }
  }
}

Introduction to Authentication in GraphQL

Setting Up the Apollo Server

Implementing Authentication Logic

Join the 1M+ learners on CodeSignal

Setting Up the Server

Testing the Implementation: Login

Testing the Implementation: Query Books

Testing the Implementation: Adding a New Book

Overall Code Flow: How Authentication Works

Lesson Summary