Becoming a “Secret” Agent: Securing Your GraphQL Backend with JWTs

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxM
jM0NTY3ODkwIiwibmFtZSI6IkhlbGxvIEdyYXBoUUwiLCJlbWF
pbCI6ImhlbGxvQGdyYXBocWwuY29tIiwiaWF0IjoxNTE2MjM5M
DIyfQ.cJutaCScQJXsGTL6ynH7BRMnQj_P2yl0a58jUhnLDq8
@samjulien

View Slide

{
"sub": "1234567890",
"name": "Hello GraphQL",
"email": "[email protected]",
"iat": 1516239022
}

@samjulien

View Slide

{
"sub": "1234567890",
"iat": 1516239022
}

@samjulien

View Slide

{
"sub": "1234567890",
"iat": 1516239022
}

@samjulien

View Slide

{
"sub": "1234567890",
"iat": 1516239022
}

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9
@samjulien

View Slide

eyJhbGciOiJIUzI1NiIsInR5c
CI6IkpXVCJ9.eyJzdWIiOiIxM
jM0NTY3ODkwIiwibmFtZSI6Ik
hlbGxvIEdyYXBoUUwiLCJlbWF
pbCI6ImhlbGxvQGdyYXBocWwu
Y29tIiwiaWF0IjoxNTE2MjM5M
DIyfQ.cJutaCScQJXsGTL6ynH
7BRMnQj_P2yl0a58jUhnLDq8
Header (Algorithm and Token Type)
{
"alg": "HS256",
"typ": "JWT"
}
@samjulien

View Slide

Payload (Data and Claims)
{
"sub": "1234567890",
"iat": 1516239022
}
@samjulien

View Slide

Verify Signature
x Signature ✍
@samjulien

@samjulien

@samjulien

@samjulien

{
"sub": "1234567890",
"name": “Hello GraphQL”,
"iat": 1516239022,
"https://hasura.io/jwt/claims": {
"x-hasura-allowed-roles": ["editor","user", "mod"],
"x-hasura-default-role": "user",
"x-hasura-user-id": "1234567890",
"x-hasura-org-id": "123",
"x-hasura-custom": "custom-value"
}
}
@samjulien

View Slide

{
"sub": "1234567890",
"name": “Hello GraphQL”,
"iat": 1516239022,
"https://hasura.io/jwt/claims": {
"x-hasura-allowed-roles": ["editor","user", "mod"],
"x-hasura-default-role": "user",
"x-hasura-user-id": "1234567890",
"x-hasura-org-id": "123",
"x-hasura-custom": "custom-value"
}
}
@samjulien

@samjulien

@samjulien

@samjulien

@samjulien

Your user management will (likely)
live outside of your GraphQL server.
@samjulien

View Slide

Should you just build your
own Authorization Server?
@samjulien

View Slide

How will you be sure you…
@samjulien

View Slide

@samjulien

View Slide

Implement proper password controls?
Implement secure password recovery mechanisms?
Transmit passwords securely?
Correctly implement authentication and error messages?
Prevent brute force attacks?
@samjulien

View Slide

Implement proper password controls?
Implement secure password recovery mechanisms?
Transmit passwords securely?
Correctly implement authentication and error messages?
Prevent brute force attacks?

@samjulien

View Slide

Consider outsourcing this
piece of your app.
@samjulien

View Slide

@samjulien

View Slide

@samjulien

View Slide

Authorization in GraphQL

View Slide

Authorization: Bearer xxx.yyy.zzz
@samjulien

View Slide

Your GraphQL server needs to verify
the access token with a public key.
@samjulien

View Slide

You can then parse claims for
authorization.
@samjulien

View Slide

So how do we do that?
@samjulien

View Slide

First, grab the token from the
request and add it to context.
@samjulien

View Slide

const server = new ApolloServer({
typeDefs: schema,
resolvers,
context: async ({ req }) => {
const token = req.headers["Authorization"];
return { token };
}
});
@samjulien

View Slide

typeDefs: schema,
resolvers,
context: async ({ req }) => {
const token = req.headers["Authorization"];
return { token };
}
});
@samjulien

View Slide

We still need to verify the token.
@samjulien

View Slide

verifyToken(token): Payload
@samjulien

View Slide

Authorization: Bearer xxx.yyy.zzz
@samjulien

View Slide

const bearerToken = token.split(" ")[1];
@samjulien

View Slide

Verify Signature
x Signature ✍
@samjulien

View Slide

const client = jwksClient({
jwksUri: `https://${process.env.AUTH_DOMAIN}/.well-known/jwks.json`
});
@samjulien

View Slide

const client = jwksClient({
jwksUri: `https://${process.env.AUTH_DOMAIN}/.well-known/jwks.json`
});
@samjulien

View Slide

function getJwksClientKey(header, callback) {
client.getSigningKey(header.kid, function(error, key) {
const signingKey = key.publicKey || key.rsaPublicKey;
callback(null, signingKey);
});
}
@samjulien

View Slide

function getJwksClientKey(header, callback) {
client.getSigningKey(header.kid, function(error, key) {
const signingKey = key.publicKey || key.rsaPublicKey;
callback(null, signingKey);
});
}
@samjulien

View Slide

jwt.verify(bearerToken, getJwksClientKey, {
audience: process.env.API_IDENTIFIER,
issuer: `https://${process.env.AUTH_DOMAIN}/`,
algorithms: ["RS256"]
});
@samjulien

View Slide

});
@samjulien

View Slide

});
@samjulien

View Slide

try {
const payload = await jwt.verify(...);
return payload;
} catch (error) {
throw new Error("Invalid token!");
}
@samjulien

View Slide

try {
const payload = await jwt.verify(...);
return payload;
} catch (error) {
throw new Error("Invalid token!");
}
@samjulien

View Slide

verifyToken(token): Payload
@samjulien

View Slide

Where do we use this?
@samjulien

View Slide

Inside of resolvers?
@samjulien

View Slide

Back in Context
@samjulien

View Slide

View Slide

let token = null;
try {
if (token) {
}
} catch (error) {
}
}; @samjulien

View Slide

let token = null;
try {
if (token) {
}
} catch (error) {
}
}; @samjulien

View Slide

let token = null;
try {
if (token) {
}
} catch (error) {
}
}; @samjulien

View Slide

let token = null;
try {
if (token) {
}
} catch (error) {
}
}; @samjulien

View Slide

let token = null;
try {
if (token) {
}
} catch (error) {
}
}; @samjulien

View Slide

let token = null;
try {
if (token) {
}
} catch (error) {
}
}; @samjulien

View Slide

let token = null;
try {
if (token) {
}
} catch (error) {
}
}; @samjulien

View Slide

typeDefs: schema,
resolvers,
context: async ({ req }) => createContext(req)
});
@samjulien

View Slide

typeDefs: schema,
resolvers,
context: async ({ req }) => createContext(req)
});
@samjulien

View Slide

createEvent: async (parent, args, context, info) => {
if (!context.currentUser) {
throw new Error("Must be logged in for this!");
}
const { currentUser } = context;
if (hasPermissions(currentUser.permissions, PERMISSIONS.CREATE)) {
return await createEventInDb({
...args,
...context
});
}
};
@samjulien

View Slide

}
...args,
...context
});
}
};
@samjulien

View Slide

}
...args,
...context
});
}
};
@samjulien

View Slide

Wrapping (Composing) Resolvers
@samjulien

View Slide

export const isAuthenticated = next => (parent, args, context, info) => {
throw new Error("You must be authenticated!");
}
return next(parent, args, context, info);
};
@samjulien

}
};
@samjulien

}
};
@samjulien

}
};
@samjulien

createEvent: isAuthenticated(async (parent, args, context, info) => {
return await createEventInDb({ ...args, ...context });
}
});
@samjulien

View Slide

}
});
@samjulien

View Slide

}
});
@samjulien

View Slide

export const checkPermission = permission => next => (
parent,
args,
context,
info
) => {
if (!hasPermissions(context.currentUser.permissions, permission)) {
throw new Error("You don't have permission!");
}
};
@samjulien

View Slide

createEvent: isAuthenticated(
checkPermissions(PERMISSIONS.CREATE)(
async (parent, args, context, info) => {
}
)
);
@samjulien

View Slide

}
)
);
@samjulien

View Slide

}
)
);
@samjulien

View Slide

graphql-resolvers
Lucas Constantino
@samjulien

View Slide

export const isAuthenticated = (parent, args, context, info) => {
return context.currentUser ? skip :
new Error("Not authenticated!");
};
@samjulien

View Slide

};
@samjulien

View Slide

};
@samjulien

View Slide

createEvent: combineResolvers(
isAuthenticated,
checkPermissions(PERMISSIONS.CREATE),
}
);
@samjulien

View Slide

isAuthenticated,
}
);
@samjulien

View Slide

isAuthenticated,
}
);
@samjulien

View Slide

graphql-modules
Uri Goldshtein (& Many Others)
@samjulien

View Slide

import { GraphQLModule } from "@graphql-modules/core";
const MyModule = new GraphQLModule({
/*...*/
resolversComposition: {
"Mutation.createEvent": [
isAuthenticated(),
checkPermissions(PERMISSIONS.CREATE)
]
}
});
@samjulien

View Slide

/*...*/
isAuthenticated(),
]
}
});
@samjulien

View Slide

Middleware
@samjulien

View Slide

graphql-middleware
Prisma
@samjulien

View Slide

const authMiddleware = {
Mutation: {
createEvent: isAuthenticated
},
}
const server = new GraphQLServer({
typeDefs,
resolvers,
[authMiddleware],
})
@samjulien

View Slide

Mutation: {
},
}
typeDefs,
resolvers,
[authMiddleware],
})
@samjulien

View Slide

Mutation: {
},
}
typeDefs,
resolvers,
[authMiddleware],
})
@samjulien

View Slide

Custom Directives
@samjulien

View Slide

@deprecated(reason: “Field `eventLocation` replaces `location`.")
@samjulien

View Slide

type Event {
id: ID
description: String!
eventLocation: String!
location: String! @deprecated(reason: "Field
`eventLocation` replaces `location`.")
}
@samjulien

View Slide

Directives
@samjulien

View Slide

Part of the GraphQL Spec
Directives
@samjulien

View Slide

Change behavior at runtime
Directives
@samjulien

View Slide

Change behavior at runtime
Many use cases
Directives
@samjulien

View Slide

We can use custom directives to
control access down to the field level.
@samjulien

View Slide

directive @hasPermission(permission: String) on FIELD_DEFINITION
Anatomy of a Directive
@samjulien

View Slide

Name of the Directive
@samjulien

View Slide

Argument
@samjulien

View Slide

Where it Works
@samjulien

View Slide

@samjulien

View Slide

class HasPermissionDirective extends SchemaDirectiveVisitor {
visitFieldDefinition(field) {
const { permission } = this.args;
const { resolve = defaultFieldResolver } = field;
field.resolve = ({ ...args }) => {
const context = args[2];
throw new Error("Must be logged in!");
}
if (hasPermission(context.currentUser, permission)) {
return resolve.apply(this, args);
} else {
throw new Error("Not authorized!");
}
};
}
}
@samjulien

View Slide

}
} else {
}
};
}
}
@samjulien

View Slide

}
} else {
}
};
}
}
@samjulien

View Slide

}
} else {
}
};
}
}
@samjulien

View Slide

}
} else {
}
};
}
}
@samjulien

View Slide

}
} else {
}
};
}
}
@samjulien

View Slide

}
} else {
}
};
}
}
@samjulien

View Slide

}
} else {
}
};
}
}
@samjulien

View Slide

const schema = makeExecutableSchema({
typeDefs,
schemaDirectives: {
hasPermission: HasPermissionDirective
}
});
@samjulien

View Slide

const schema = makeExecutableSchema({
typeDefs,
schemaDirectives: {
hasPermission: HasPermissionDirective
}
});
@samjulien

View Slide

type Mutation: {
createEvent: Event
@hasPermission(permission: PERMISSIONS.CREATE)
}
@samjulien

View Slide

type Mutation: {
createEvent: Event
}
@samjulien

View Slide

Downsides
@samjulien

View Slide

⚠ Couples logic to schema.
Downsides
@samjulien

View Slide

Can be quite diﬃcult.
Downsides
@samjulien

View Slide

Can be quite diﬃcult.
Requires exhaustive testing.
Downsides
@samjulien

Let’s Review

@samjulien

@samjulien

@samjulien

@samjulien

@samjulien

@samjulien

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxM
jM0NTY3ODkwIiwibmFtZSI6IkhlbGxvIEdyYXBoUUwiLCJlbWF
pbCI6ImhlbGxvQGdyYXBocWwuY29tIiwiaWF0IjoxNTE2MjM5M
DIyfQ.cJutaCScQJXsGTL6ynH7BRMnQj_P2yl0a58jUhnLDq8
@samjulien

@samjulien

@samjulien

@samjulien

let token = null;
try {
if (token) {
}
} catch (error) {
}
}; @samjulien

View Slide

}
...args,
...context
});
}
};
@samjulien

View Slide

graphql-resolvers
Lucas Constantino
@samjulien