{"id":9239,"date":"2025-07-29T21:35:30","date_gmt":"2025-07-29T16:05:30","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=9239"},"modified":"2025-07-29T21:35:35","modified_gmt":"2025-07-29T16:05:35","slug":"secure-jwt-token-with-graphql-apis","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/","title":{"rendered":"Secure JWT token with GraphQL APIs"},"content":{"rendered":"\n

Introduction:<\/strong><\/p>\n\n\n\n

When creating web applications with GraphQL APIs, securing them is very important. JWT tokens usually handle the security. JWT stands for JSON Web Token. In this post, we\u2019ll explore secure methods for handling tokens, as improper handling or exposure can lead to cross-site attacks.<\/p>\n\n\n\n

JWT in Local storage<\/strong>:<\/p>\n\n\n\n

A common approach to handling tokens is storing them in local storage and retrieving them when needed. This approach can cause security vulnerabilities, as tokens stored in local storage are easily exposed.<\/p>\n\n\n\n

The issues that may occur due to token exposure are:
XSS Attacks:<\/strong> Any JavaScript code can access local storage, making tokens vulnerable.
Persistent Storage:<\/strong> Tokens remain accessible even after a browser restart.
Global Access:<\/strong> Any script on the domain can read the token.
The Secure Alternative: HTTP-Only cookies<\/strong>
<\/em>The most secure approach is using HTTP-only cookies with the secure and same-site flags.
Steps to implement:
1. Backend
Instead of sending the token in login response body, send it as HTTP-only cookie.
In index.ts file<\/em>
const server = new ApolloServer({
typeDefs,
resolvers,
context: ({ req, res }) => ({ req, res }), \/\/ Pass res to context<\/em>
});

In Mutation:<\/em>
loginUser: async ( _: any, { email, password }: { email: string; password: string },
context: any \/\/ Add context parameter<\/em>
) => {
const { res } = context;
Receive the response inside mutation.
Generate token:
const token = jwt.sign( {
userId: user._id, userType: user.user_type },
secrets?.JWT_SECRET as string, { expiresIn: “8h” } );
Instead of sending token in body response, send it as HTTP cookie.
res.cookie(‘authToken’, token,
{ httpOnly: true,
secure: process.env.NODE_ENV === ‘production’,
sameSite: ‘strict’,
maxAge: 8 * 60 * 60 * 1000, \/\/ 8 hours<\/em>
path: ‘\/’
});
In Frontend:
We have to include credentials: ‘include’ in the file, where we have set connection to apollo-client.
const httpLink = createHttpLink({
uri: ‘end-point’, \/\/ GraphQL endpoint<\/em>
credentials: ‘include’, \/\/ sends cookies with requests<\/em>
});
The extra step we have to do is, while logging out of the application, we need to clear the cookies.
Alternative approach: In-Memory Storage<\/em><\/strong>
If we want to control token management, by refresh token method we can use this. Periodically we need to change tokens by adding refresh token method in backend.
In frontend, we need to change like the following:
\/\/ Apollo Client with auth link<\/em>
import { setContext } from ‘@apollo\/client\/link\/context’;
const authLink = setContext((_, { headers }) => {
const token = tokenManager.getToken();
return {
headers: {
…headers,
authorization: token ? `Bearer ${token}` : “”,
} };
});
const client = new ApolloClient({
link: authLink.concat(httpLink),
cache: new InMemoryCache(),
});<\/p>\n\n\n\n

Best Practices:<\/strong>
– Token expirartion
– CSRF Protection
– Logout Implementation<\/p>\n\n\n\n

Conclusion:<\/strong>
There are several methods available to enhance token security. It’s important to choose the one that best suits our application’s requirements. Most of these implementations are straightforward and not overly complex. By adopting the right approach, we can ensure more secure APIs for your application and by the we can earn the trust of application users.<\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction: When creating web applications with GraphQL APIs, securing them is very important. JWT tokens usually handle the security. JWT stands for JSON Web Token. In this post, we\u2019ll explore secure methods for handling tokens, as improper handling or exposure can lead to cross-site attacks. JWT in Local storage: A… Continue Reading Secure JWT token with GraphQL APIs<\/span><\/i><\/a><\/p>\n","protected":false},"author":502,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":{"0":"post-9239","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-uncategorized","7":"h-entry","9":"h-as-article"},"yoast_head":"\nPheonix Solutions - We Empower Your Business Growth<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Pheonix Solutions - We Empower Your Business Growth\" \/>\n<meta property=\"og:description\" content=\"Introduction: When creating web applications with GraphQL APIs, securing them is very important. JWT tokens usually handle the security. JWT stands for JSON Web Token. In this post, we\u2019ll explore secure methods for handling tokens, as improper handling or exposure can lead to cross-site attacks. JWT in Local storage: A… Continue Reading Secure JWT token with GraphQL APIs\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/\" \/>\n<meta property=\"og:site_name\" content=\"PHEONIXSOLUTIONS\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-07-29T16:05:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-29T16:05:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"3837\" \/>\n\t<meta property=\"og:image:height\" content=\"2540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Keerthana P\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:site\" content=\"@pheonixsolution\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Keerthana P\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/\"},\"author\":{\"name\":\"Keerthana P\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/bfb764836e66c01d0c03dd2e79ce94fa\"},\"headline\":\"Secure JWT token with GraphQL APIs\",\"datePublished\":\"2025-07-29T16:05:30+00:00\",\"dateModified\":\"2025-07-29T16:05:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/\"},\"wordCount\":457,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/\",\"name\":\"Pheonix Solutions - We Empower Your Business Growth\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\"},\"datePublished\":\"2025-07-29T16:05:30+00:00\",\"dateModified\":\"2025-07-29T16:05:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/secure-jwt-token-with-graphql-apis\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Secure JWT token with GraphQL APIs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"name\":\"Pheonix Solutions\",\"description\":\"We Empower Your Business Growth\",\"publisher\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#organization\",\"name\":\"PheonixSolutions\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/logo.png\",\"width\":454,\"height\":300,\"caption\":\"PheonixSolutions\"},\"image\":{\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/PheonixSolutions-209942982759387\\\/\",\"https:\\\/\\\/x.com\\\/pheonixsolution\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/#\\\/schema\\\/person\\\/bfb764836e66c01d0c03dd2e79ce94fa\",\"name\":\"Keerthana P\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g\",\"caption\":\"Keerthana P\"},\"url\":\"https:\\\/\\\/pheonixsolutions.com\\\/blog\\\/author\\\/keerthana\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Pheonix Solutions - We Empower Your Business Growth","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/","og_locale":"en_US","og_type":"article","og_title":"Pheonix Solutions - We Empower Your Business Growth","og_description":"Introduction: When creating web applications with GraphQL APIs, securing them is very important. JWT tokens usually handle the security. JWT stands for JSON Web Token. In this post, we\u2019ll explore secure methods for handling tokens, as improper handling or exposure can lead to cross-site attacks. JWT in Local storage: A… Continue Reading Secure JWT token with GraphQL APIs","og_url":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/","og_site_name":"PHEONIXSOLUTIONS","article_publisher":"https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","article_published_time":"2025-07-29T16:05:30+00:00","article_modified_time":"2025-07-29T16:05:35+00:00","og_image":[{"width":3837,"height":2540,"url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/09\/PX2.png","type":"image\/png"}],"author":"Keerthana P","twitter_card":"summary_large_image","twitter_creator":"@pheonixsolution","twitter_site":"@pheonixsolution","twitter_misc":{"Written by":"Keerthana P","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/#article","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/"},"author":{"name":"Keerthana P","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/bfb764836e66c01d0c03dd2e79ce94fa"},"headline":"Secure JWT token with GraphQL APIs","datePublished":"2025-07-29T16:05:30+00:00","dateModified":"2025-07-29T16:05:35+00:00","mainEntityOfPage":{"@id":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/"},"wordCount":457,"commentCount":0,"publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/","url":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/","name":"Pheonix Solutions - We Empower Your Business Growth","isPartOf":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#website"},"datePublished":"2025-07-29T16:05:30+00:00","dateModified":"2025-07-29T16:05:35+00:00","breadcrumb":{"@id":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/pheonixsolutions.com\/blog\/secure-jwt-token-with-graphql-apis\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/pheonixsolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Secure JWT token with GraphQL APIs"}]},{"@type":"WebSite","@id":"https:\/\/pheonixsolutions.com\/blog\/#website","url":"https:\/\/pheonixsolutions.com\/blog\/","name":"Pheonix Solutions","description":"We Empower Your Business Growth","publisher":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pheonixsolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pheonixsolutions.com\/blog\/#organization","name":"PheonixSolutions","url":"https:\/\/pheonixsolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","contentUrl":"https:\/\/pheonixsolutions.com\/blog\/wp-content\/uploads\/2016\/12\/logo.png","width":454,"height":300,"caption":"PheonixSolutions"},"image":{"@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/PheonixSolutions-209942982759387\/","https:\/\/x.com\/pheonixsolution"]},{"@type":"Person","@id":"https:\/\/pheonixsolutions.com\/blog\/#\/schema\/person\/bfb764836e66c01d0c03dd2e79ce94fa","name":"Keerthana P","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a2fbfc942637609ceefb9cbdeedd3fe92320c9f5212098280c846d6d8597088c?s=96&r=g","caption":"Keerthana P"},"url":"https:\/\/pheonixsolutions.com\/blog\/author\/keerthana\/"}]}},"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p7F4uM-2p1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9239","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/502"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=9239"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/9239\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=9239"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=9239"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=9239"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}