'using req.headers.authorization gives Network error unable to reach server We could not introspect your endpoint graphQL Context failed: invalid token
I get the token from the login mutation and put it in the headers,
but graphql server gives an error when trying to fetch that token using:
const auth = req.headers.authorization;
the previous line cause server to show this error before running the query (no error messages in termenal) "Network error: unable to reach server We couldn't reach your server.We could not introspect your endpoint. Please enable introspection on your server."
and after running the query (users- to get all users) apollo sandbox give this error message "Context creation failed: invalid token"
although consoling the auth returns it successfully!!
the code runs successfully when passing the same token directly:
const auth = "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im1ncmV3ZXMwQGNocm9ub2VuZ2luZS5jb20iLCJpZCI6MSwiaWF0IjoxNjI4NDIyNTI4LCJleHAiOjE2Mjg0NTg1Mjh9.lmIsq6-G-pDTBrLeCjyiWtePuEesx_sW_cJ0pLty-E0";
here is my index.js code
const express = require('express');
const { ApolloServer } = require("apollo-server-express");
const jwt = require('jsonwebtoken');
const JWT_SECRET = 'f1BtnWgD3VKY';
const users = [
{
"id":1,
"name":"Magdalena",
"email":"[email protected]",
"gender":"male",
"mobile":"734-324-1043",
"cumulativeGPA":92.1,
"isGraduate":false,
"friends":[
{
"name":"Magdalena",
"email":"[email protected]",
"gender":"male",
"mobile":"734-324-1043",
"cumulativeGPA":92.1
},
{
"name":"Harman",
"email":"[email protected]",
"gender":"male",
"mobile":"158-265-8979",
"cumulativeGPA":87.9
},
],
"age":28,
"image" : {"name":"ghklk.png", "height": 50 , "width":30},
},
{
"id":2,
"name":"Lyndell",
"email":"[email protected]",
"gender":"male",
"mobile":"165-705-3521",
"cumulativeGPA":90.6,
"isGraduate":false,
"friends":[
{
"name":"Magdalena",
"email":"[email protected]",
"gender":"male",
"mobile":"734-324-1043",
"cumulativeGPA":92.1
},
],
"age":23,
"image" : {"name":"ghklk.png", "height": 50, "width":30},
},
{
"id":3,
"name":"Harman",
"email":"[email protected]",
"gender":"male",
"mobile":"158-265-8979",
"cumulativeGPA":87.9,
"isGraduate":false,
"friends":[
{
"name":"Magdalena",
"email":"[email protected]",
"gender":"male",
"mobile":"734-324-1043",
"cumulativeGPA":92.1
},
{
"name":"Harman",
"email":"[email protected]",
"gender":"male",
"mobile":"158-265-8979",
"cumulativeGPA":87.9
},
],
"age":26,
"image" : {"name":"ghrtlk.png", "height": 51, "width":31},
},
{
"id":4,
"name":"Inna",
"email":"[email protected]",
"gender":"male",
"mobile":"832-900-3701",
"cumulativeGPA":86.8,
"isGraduate":false,
"friends":[
{
"name":"Magdalena",
"email":"[email protected]",
"gender":"male",
"mobile":"734-324-1043",
"cumulativeGPA":92.1
},
],
"age":22,
"image" : {"name":"ghklk.png", "height": 52, "width":32},
},
];
const { typeDefs } = require('./typeDefs');
const { resolvers} = require('./resolvers');
async function startApolloServer(typeDefs, resolvers) {
const app = express();
const server = new ApolloServer({
typeDefs,
resolvers,
context: async ({ req }) => {
const auth = req.headers.authorization || null;
//console.log(auth); returns: "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im1ncmV3ZXMwQGNocm9ub2VuZ2luZS5jb20iLCJpZCI6MSwiaWF0IjoxNjI4NDIyNTI4LCJleHAiOjE2Mjg0NTg1Mjh9.lmIsq6-G-pDTBrLeCjyiWtePuEesx_sW_cJ0pLty-E0"
// const auth = "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im1ncmV3ZXMwQGNocm9ub2VuZ2luZS5jb20iLCJpZCI6MSwiaWF0IjoxNjI4NDIyNTI4LCJleHAiOjE2Mjg0NTg1Mjh9.lmIsq6-G-pDTBrLeCjyiWtePuEesx_sW_cJ0pLty-E0";
const decodedToken = jwt.verify(
auth.substring(7), JWT_SECRET
)
const user = await users.find(u => u.id == decodedToken.id);
return { user }
},
});
await server.start();
server.applyMiddleware({ app });
await new Promise(resolve => app.listen({ port: 7778 }, resolve));
console.log(`🚀 Server ready at http://localhost:7778${server.graphqlPath}`);
return { server, app };
}
startApolloServer(typeDefs, resolvers);
resolver code
const { UserInputError } = require('apollo-server-express');
const jwt = require('jsonwebtoken');
const JWT_SECRET = 'f1BtnWgD3VKY';
const resolvers = {
Gender: {
MALE: 'male',
FEMALE: 'female',
},
Mutation: {
login: async (_, args) => {
const user = await users.find(u => u.email == args.email)
if ( !user || args.mobile !== user.mobile ) {
throw new UserInputError("wrong credentials")
}
const userForToken = {
email: user.email,
id: user.id,
}
return { tokenValue: jwt.sign(userForToken, JWT_SECRET, { expiresIn: '10h' })}
},
},
Query: {
users: (_, __, context) => {
if (!context.user) return null;
return users;
},
getUserByID: (_, {id}, context) => {
if (!context.user) return null;
return users.find(user => user.id == id)
},
},
};
module.exports = { resolvers };
typeDefs code
const { gql } = require('apollo-server-express');
const typeDefs = gql`
type User {
id: ID!
name: String!
email: String!
gender: Gender!
mobile: String!
cumulativeGPA:Float!
isGraduate: Boolean!
friends: [Friend]
age: Int!
image: Image
}
enum Gender {
MALE
FEMALE
}
type Friend{
name: String!
email: String!
gender: Gender!
mobile: String!
cumulativeGPA:Float!
}
type Image{
name: String!
height: Int!
width: Int!
}
type Mutation {
# setName(userID: ID!, newName: String!): User
# deleteUser(id: ID!): [User]
login(email: String!, mobile: String!): Token
}
type Token {
tokenValue: String!
}
type Query {
users: [User]
getUserByID(id: ID!): User
}
`;
module.exports = { typeDefs };
package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon index.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@graphql-tools/schema": "^7.1.5",
"apollo-server": "^3.1.2",
"apollo-server-express": "^3.0.2",
"express": "^4.17.1",
"graphql": "^15.5.1",
"graphql-subscriptions": "^1.2.1",
"jsonwebtoken": "^8.5.1",
"nodemon": "^2.0.12",
"subscriptions-transport-ws": "^0.9.19"
}
}
i want to use the commented line const auth = req.headers.authorization;
insted passing the token directly
operating system is windows 10 browser is chrom
Solution 1:[1]
In your apollo sandbox, instead of
"bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im1ncmV3ZXMwQGNocm9ub2VuZ2luZS5jb20iLCJpZCI6MSwiaWF0IjoxNjI4NDIyNTI4LCJleHAiOjE2Mjg0NTg1Mjh9.lmIsq6-G-pDTBrLeCjyiWtePuEesx_sW_cJ0pLty-E0"
try capitalizing the "bearer"
"Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im1ncmV3ZXMwQGNocm9ub2VuZ2luZS5jb20iLCJpZCI6MSwiaWF0IjoxNjI4NDIyNTI4LCJleHAiOjE2Mjg0NTg1Mjh9.lmIsq6-G-pDTBrLeCjyiWtePuEesx_sW_cJ0pLty-E0"
Solution 2:[2]
I found a temporary fix that can be used in the development.
if (req.headers.host === 'localhost:<Port number>') {
return {};
}
Solution 3:[3]
remove just Quotation eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Im1ncmV3ZXMwQGNocm9ub2VuZ2luZS5jb20iLCJpZCI6MSwiaWF0IjoxNjI4NDIyNTI4LCJleHAiOjE2Mjg0NTg1Mjh9.lmIsq6-G-pDTBrLeCjyiWtePuEesx_sW_cJ0pLty-E0
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | user14052806 |
| Solution 2 | Varun S Athreya |
| Solution 3 | great dude |