[{"data":1,"prerenderedAt":1274},["ShallowReactive",2],{"\u002Farticles\u002Fnode-jwt-token":3,"\u002Farticles\u002Fnode-jwt-token-surround":1263},{"id":4,"title":5,"author":6,"body":7,"date":1248,"description":13,"draft":1249,"extension":1250,"image":6,"lastmod":1248,"meta":1251,"minRead":6,"navigation":372,"path":1259,"seo":1260,"stem":1261,"__hash__":1262},"articles\u002Farticles\u002Fnode-jwt-token.md","What is a JSON Web Token?",null,{"type":8,"value":9,"toc":1242},"minimark",[10,14,22,28,33,40,50,123,131,227,235,304,311,323,327,330,342,388,402,420,423,462,465,487,856,862,1104,1109,1112,1161,1168,1175,1181,1187,1190,1234,1238],[11,12,13],"p",{},"JSON Web Token is a self-contained and compact way for transmitting pieces of information between parties securing as a JSON object. Information is digitally signed so it can be verified. For digital signing, a secret (with the HMAC algorithm) or a public\u002Fprivate key pair using RSA or ECDSA.",[11,15,16,17,21],{},"One common use case for JWT is for client authorization. Once a user is logged in the server checks the user's credentials and sends a response, including a JSON web token, signed by the server's ",[18,19,20],"strong",{},"secret key",". Upon logging in, each request from the user will contain the JWT sent by the server. This helps the server validate that the user is the same user who logged in and is authorized to access resources\u002Fservices.",[11,23,24,25,27],{},"Another good use of JSON web token is data transmission among different parties. As the tokens are signed with a ",[18,26,20],{},", the payload can be verified if it was tampered.",[29,30,32],"h3",{"id":31},"structure-of-json-web-token","Structure of JSON Web token",[11,34,35,36],{},"JSON Web Tokens are divided into three parts and separated by a dot ",[37,38,39],"code",{},"(.)",[41,42,43],"ol",{},[44,45,46,49],"li",{},[18,47,48],{},"Header :"," The header contains information about what algorithm is being used and also the type of the token being used, in this case it's JWT.",[51,52,58],"pre",{"className":53,"code":54,"filename":55,"language":56,"meta":57,"style":57},"language-js shiki shiki-themes material-theme-lighter one-light one-dark-pro","{\n\"alg\": \"HS256\",\n\"typ\": \"JWT\",\n}\n","JSON Web Tokens","js","",[37,59,60,69,96,117],{"__ignoreMap":57},[61,62,65],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sB4Xn","{\n",[61,70,72,76,80,82,86,88,91,93],{"class":63,"line":71},2,[61,73,75],{"class":74},"sVH1b","\"",[61,77,79],{"class":78},"spZWa","alg",[61,81,75],{"class":74},[61,83,85],{"class":84},"sA0eD",": ",[61,87,75],{"class":74},[61,89,90],{"class":78},"HS256",[61,92,75],{"class":74},[61,94,95],{"class":67},",\n",[61,97,99,101,104,106,108,110,113,115],{"class":63,"line":98},3,[61,100,75],{"class":74},[61,102,103],{"class":78},"typ",[61,105,75],{"class":74},[61,107,85],{"class":84},[61,109,75],{"class":74},[61,111,112],{"class":78},"JWT",[61,114,75],{"class":74},[61,116,95],{"class":67},[61,118,120],{"class":63,"line":119},4,[61,121,122],{"class":67},"}\n",[41,124,125],{"start":71},[44,126,127,130],{},[18,128,129],{},"Payload:"," The payload portion contains the users' information and some additional information to verify\u002Fidentify the user and grant access to specific resources. It is also a good practice to expire your tokens so that someone else can't use your token to gain access. For this, token expire information can also be added within the payload.",[51,132,135],{"className":53,"code":133,"filename":134,"language":56,"meta":57,"style":57},"{\n  \"_id\": \"6574765161\",\n  \"name\": \"Jackie Chan\",\n  \"iat\": \"1516239022\",\n  \"exp\": \"1615673602\"\n}\n","Sample Payload",[37,136,137,141,162,182,202,222],{"__ignoreMap":57},[61,138,139],{"class":63,"line":64},[61,140,68],{"class":67},[61,142,143,146,149,151,153,155,158,160],{"class":63,"line":71},[61,144,145],{"class":74},"  \"",[61,147,148],{"class":78},"_id",[61,150,75],{"class":74},[61,152,85],{"class":84},[61,154,75],{"class":74},[61,156,157],{"class":78},"6574765161",[61,159,75],{"class":74},[61,161,95],{"class":67},[61,163,164,166,169,171,173,175,178,180],{"class":63,"line":98},[61,165,145],{"class":74},[61,167,168],{"class":78},"name",[61,170,75],{"class":74},[61,172,85],{"class":84},[61,174,75],{"class":74},[61,176,177],{"class":78},"Jackie Chan",[61,179,75],{"class":74},[61,181,95],{"class":67},[61,183,184,186,189,191,193,195,198,200],{"class":63,"line":119},[61,185,145],{"class":74},[61,187,188],{"class":78},"iat",[61,190,75],{"class":74},[61,192,85],{"class":84},[61,194,75],{"class":74},[61,196,197],{"class":78},"1516239022",[61,199,75],{"class":74},[61,201,95],{"class":67},[61,203,205,207,210,212,214,216,219],{"class":63,"line":204},5,[61,206,145],{"class":74},[61,208,209],{"class":78},"exp",[61,211,75],{"class":74},[61,213,85],{"class":84},[61,215,75],{"class":74},[61,217,218],{"class":78},"1615673602",[61,220,221],{"class":74},"\"\n",[61,223,225],{"class":63,"line":224},6,[61,226,122],{"class":67},[41,228,229],{"start":98},[44,230,231,234],{},[18,232,233],{},"Signature:"," Lastly, the signature part is a combination of three Base64-URL strings that are separated by dots. This can be easily passed while being more compact when compared to XML-based standards such as SAML and can later be verified.",[51,236,239],{"className":53,"code":237,"filename":238,"language":56,"meta":57,"style":57},"HMACSHA256(base64UrlEncode(header) + \".\" + base64UrlEncode(payload), \"json-web-token-following\");\n","Signature Structure",[37,240,241],{"__ignoreMap":57},[61,242,243,247,251,254,256,260,263,267,270,273,275,278,281,283,286,289,292,294,297,299,301],{"class":63,"line":64},[61,244,246],{"class":245},"spnjr","HMACSHA256",[61,248,250],{"class":249},"sM89C","(",[61,252,253],{"class":245},"base64UrlEncode",[61,255,250],{"class":249},[61,257,259],{"class":258},"sWjah","header",[61,261,262],{"class":249},") ",[61,264,266],{"class":265},"syPST","+",[61,268,269],{"class":74}," \"",[61,271,272],{"class":78},".",[61,274,75],{"class":74},[61,276,277],{"class":265}," +",[61,279,280],{"class":245}," base64UrlEncode",[61,282,250],{"class":249},[61,284,285],{"class":258},"payload",[61,287,288],{"class":249},")",[61,290,291],{"class":67},",",[61,293,269],{"class":74},[61,295,296],{"class":78},"json-web-token-following",[61,298,75],{"class":74},[61,300,288],{"class":249},[61,302,303],{"class":67},";\n",[11,305,306,307,310],{},"The token structure looks something like: ",[37,308,309],{},"header.payload.signature"," The token itself :",[51,312,317],{"className":313,"code":314,"filename":315,"language":316,"meta":57,"style":57},"language-txt shiki shiki-themes material-theme-lighter one-light one-dark-pro","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI2NTc0NzY1MTYxIiwibmFtZSI6IkphY2tpZSBDaGFuIiwiaWF0IjoiMTUxNjIzOTAyMiIsImV4cCI6IjE2MTU2NzM2MDIifQ._ar1JLdQErmVNSyqVjMW8FolQwlkhADNyEFjMgiEgCM\n","JWT token","txt",[37,318,319],{"__ignoreMap":57},[61,320,321],{"class":63,"line":64},[61,322,314],{},[29,324,326],{"id":325},"example-of-json-web-tokens","Example of JSON Web tokens",[11,328,329],{},"For this example, I'm using my project, which already includes user login and registration functionality. So I will be explaining how to verify JWT tokens and protect routes using tokens.",[11,331,332,333],{},"You can find the project from ",[334,335,339],"a",{"href":336,"rel":337},"https:\u002F\u002Fgithub.com\u002Fratul16\u002Fnode-express-auth-registration",[338],"nofollow",[18,340,341],{},"Github",[51,343,348],{"className":344,"code":345,"language":346,"meta":347,"style":57},"language-bash shiki shiki-themes material-theme-lighter one-light one-dark-pro","  # clone repo\n  git clone https:\u002F\u002Fgithub.com\u002Fratul16\u002Fnode-express-auth-registration.git\n\n  # navigate to directorycd node-express-auth-registration\n  cd node-express-auth-registration\n","bash","icon=devicon-plain:bash",[37,349,350,356,368,374,379],{"__ignoreMap":57},[61,351,352],{"class":63,"line":64},[61,353,355],{"class":354},"seacL","  # clone repo\n",[61,357,358,362,365],{"class":63,"line":71},[61,359,361],{"class":360},"stT07","  git",[61,363,364],{"class":78}," clone",[61,366,367],{"class":78}," https:\u002F\u002Fgithub.com\u002Fratul16\u002Fnode-express-auth-registration.git\n",[61,369,370],{"class":63,"line":98},[61,371,373],{"emptyLinePlaceholder":372},true,"\n",[61,375,376],{"class":63,"line":119},[61,377,378],{"class":354},"  # navigate to directorycd node-express-auth-registration\n",[61,380,381,385],{"class":63,"line":204},[61,382,384],{"class":383},"sTDPv","  cd",[61,386,387],{"class":78}," node-express-auth-registration\n",[11,389,390,391,394,395,398,399,401],{},"Create a ",[37,392,393],{},".env"," file and store your ",[18,396,397],{},"MongoDB"," url and ",[18,400,20],{}," and your are good to go.",[51,403,408],{"className":404,"code":405,"language":406,"meta":407,"style":57},"language-env shiki shiki-themes material-theme-lighter one-light one-dark-pro","MONGODB = \"mongodb-url\"\nTOKEN_SECRET = \"your-secret-key\"\n","env","label=\"env variables\" icon=devicon:dotenv",[37,409,410,415],{"__ignoreMap":57},[61,411,412],{"class":63,"line":64},[61,413,414],{},"MONGODB = \"mongodb-url\"\n",[61,416,417],{"class":63,"line":71},[61,418,419],{},"TOKEN_SECRET = \"your-secret-key\"\n",[11,421,422],{},"Finally",[51,424,426],{"className":344,"code":425,"language":346,"meta":347,"style":57},"# install dependencies\n$ npm install\n\n# serve with hot reload at localhost:3000\n$ npm start\n",[37,427,428,433,444,448,453],{"__ignoreMap":57},[61,429,430],{"class":63,"line":64},[61,431,432],{"class":354},"# install dependencies\n",[61,434,435,438,441],{"class":63,"line":71},[61,436,437],{"class":360},"$",[61,439,440],{"class":78}," npm",[61,442,443],{"class":78}," install\n",[61,445,446],{"class":63,"line":98},[61,447,373],{"emptyLinePlaceholder":372},[61,449,450],{"class":63,"line":119},[61,451,452],{"class":354},"# serve with hot reload at localhost:3000\n",[61,454,455,457,459],{"class":63,"line":204},[61,456,437],{"class":360},[61,458,440],{"class":78},[61,460,461],{"class":78}," start\n",[11,463,464],{},"As discussed above, each request from the user has to contain the JSON web token to have access to resources. Here will demonstrate a similar scenario, if the request header doesn't contain a valid token, then the user's access will be denied.",[11,466,467,468,471,472,475,476,479,480,483,484,486],{},"In the ",[37,469,470],{},"auth"," function, we check if the request header contains the token. If not, we send a response with a ",[18,473,474],{},"status code 401",", which means access is denied. But if the token exists in the request header, then we are verifying it within the try-catch. ",[18,477,478],{},"jsonwebtoken"," has a built-in function for token verification, which requires the ",[37,481,482],{},"token"," and ",[37,485,20],{}," as shown below. If it's an invalid token, we will send a response with status code 400; else, we are returning the token as verified.",[488,489,490],"code-collapse",{},[51,491,494],{"className":53,"code":492,"filename":493,"language":56,"meta":57,"style":57},"const JWT = require('jsonwebtoken');\n\nfunction auth(req, res, next) {\n  const token = req.header('auth-header');\n\n\u002F\u002F checking if token exists or not if (!token)\nreturn res.send({\n      statusCode: 401,\n      message: \"Access Denied\"\n  });\n\ntoken verification {\ntry {\n      const verified = JWT.verify(token, process.env.TOKEN_SECRET);\n      req.user = verified;\n      next();\n  } catch (error) {\n      res.send({\n          statusCode: 400,\n          message: \"Invalid Token\"\n      });\n  }\n}\n\nmodule.exports = auth;\n","tokenVerify.js",[37,495,496,525,529,558,589,593,598,616,633,648,658,663,673,681,723,741,752,770,784,797,812,822,828,833,838],{"__ignoreMap":57},[61,497,498,502,506,509,512,514,517,519,521,523],{"class":63,"line":64},[61,499,501],{"class":500},"sJvVP","const",[61,503,505],{"class":504},"sMm83"," JWT",[61,507,508],{"class":265}," =",[61,510,511],{"class":245}," require",[61,513,250],{"class":249},[61,515,516],{"class":74},"'",[61,518,478],{"class":78},[61,520,516],{"class":74},[61,522,288],{"class":249},[61,524,303],{"class":67},[61,526,527],{"class":63,"line":71},[61,528,373],{"emptyLinePlaceholder":372},[61,530,531,534,537,539,543,545,548,550,553,555],{"class":63,"line":98},[61,532,533],{"class":500},"function",[61,535,536],{"class":245}," auth",[61,538,250],{"class":67},[61,540,542],{"class":541},"s5f2p","req",[61,544,291],{"class":67},[61,546,547],{"class":541}," res",[61,549,291],{"class":67},[61,551,552],{"class":541}," next",[61,554,288],{"class":67},[61,556,557],{"class":67}," {\n",[61,559,560,563,566,568,572,574,576,578,580,583,585,587],{"class":63,"line":119},[61,561,562],{"class":500},"  const",[61,564,565],{"class":504}," token",[61,567,508],{"class":265},[61,569,571],{"class":570},"scCn_"," req",[61,573,272],{"class":67},[61,575,259],{"class":245},[61,577,250],{"class":84},[61,579,516],{"class":74},[61,581,582],{"class":78},"auth-header",[61,584,516],{"class":74},[61,586,288],{"class":84},[61,588,303],{"class":67},[61,590,591],{"class":63,"line":204},[61,592,373],{"emptyLinePlaceholder":372},[61,594,595],{"class":63,"line":224},[61,596,597],{"class":354},"\u002F\u002F checking if token exists or not if (!token)\n",[61,599,601,605,607,609,612,614],{"class":63,"line":600},7,[61,602,604],{"class":603},"sQsOY","return",[61,606,547],{"class":570},[61,608,272],{"class":67},[61,610,611],{"class":245},"send",[61,613,250],{"class":84},[61,615,68],{"class":67},[61,617,619,623,627,631],{"class":63,"line":618},8,[61,620,622],{"class":621},"su13H","      statusCode",[61,624,626],{"class":625},"saKOp",":",[61,628,630],{"class":629},"sriKn"," 401",[61,632,95],{"class":67},[61,634,636,639,641,643,646],{"class":63,"line":635},9,[61,637,638],{"class":621},"      message",[61,640,626],{"class":625},[61,642,269],{"class":74},[61,644,645],{"class":78},"Access Denied",[61,647,221],{"class":74},[61,649,651,654,656],{"class":63,"line":650},10,[61,652,653],{"class":67},"  }",[61,655,288],{"class":84},[61,657,303],{"class":67},[61,659,661],{"class":63,"line":660},11,[61,662,373],{"emptyLinePlaceholder":372},[61,664,666,668,671],{"class":63,"line":665},12,[61,667,482],{"class":258},[61,669,670],{"class":258}," verification",[61,672,557],{"class":67},[61,674,676,679],{"class":63,"line":675},13,[61,677,678],{"class":603},"try",[61,680,557],{"class":67},[61,682,684,687,690,692,694,696,699,701,703,705,708,710,713,715,719,721],{"class":63,"line":683},14,[61,685,686],{"class":500},"      const",[61,688,689],{"class":504}," verified",[61,691,508],{"class":265},[61,693,505],{"class":504},[61,695,272],{"class":67},[61,697,698],{"class":245},"verify",[61,700,250],{"class":84},[61,702,482],{"class":258},[61,704,291],{"class":67},[61,706,707],{"class":570}," process",[61,709,272],{"class":67},[61,711,406],{"class":712},"sDC5J",[61,714,272],{"class":67},[61,716,718],{"class":717},"srkOc","TOKEN_SECRET",[61,720,288],{"class":84},[61,722,303],{"class":67},[61,724,726,729,731,735,737,739],{"class":63,"line":725},15,[61,727,728],{"class":570},"      req",[61,730,272],{"class":67},[61,732,734],{"class":733},"s8dPH","user",[61,736,508],{"class":265},[61,738,689],{"class":258},[61,740,303],{"class":67},[61,742,744,747,750],{"class":63,"line":743},16,[61,745,746],{"class":245},"      next",[61,748,749],{"class":84},"()",[61,751,303],{"class":67},[61,753,755,757,760,763,766,768],{"class":63,"line":754},17,[61,756,653],{"class":67},[61,758,759],{"class":603}," catch",[61,761,762],{"class":84}," (",[61,764,765],{"class":258},"error",[61,767,262],{"class":84},[61,769,68],{"class":67},[61,771,773,776,778,780,782],{"class":63,"line":772},18,[61,774,775],{"class":570},"      res",[61,777,272],{"class":67},[61,779,611],{"class":245},[61,781,250],{"class":84},[61,783,68],{"class":67},[61,785,787,790,792,795],{"class":63,"line":786},19,[61,788,789],{"class":621},"          statusCode",[61,791,626],{"class":625},[61,793,794],{"class":629}," 400",[61,796,95],{"class":67},[61,798,800,803,805,807,810],{"class":63,"line":799},20,[61,801,802],{"class":621},"          message",[61,804,626],{"class":625},[61,806,269],{"class":74},[61,808,809],{"class":78},"Invalid Token",[61,811,221],{"class":74},[61,813,815,818,820],{"class":63,"line":814},21,[61,816,817],{"class":67},"      }",[61,819,288],{"class":84},[61,821,303],{"class":67},[61,823,825],{"class":63,"line":824},22,[61,826,827],{"class":67},"  }\n",[61,829,831],{"class":63,"line":830},23,[61,832,122],{"class":67},[61,834,836],{"class":63,"line":835},24,[61,837,373],{"emptyLinePlaceholder":372},[61,839,841,845,847,850,852,854],{"class":63,"line":840},25,[61,842,844],{"class":843},"siYUK","module",[61,846,272],{"class":67},[61,848,849],{"class":843},"exports",[61,851,508],{"class":265},[61,853,536],{"class":258},[61,855,303],{"class":67},[11,857,858,859,861],{},"Now in the post route, we need to import ",[37,860,493],{}," script and pass it as a parameter. A try-catch will check if it is verified.",[51,863,866],{"className":53,"code":864,"filename":865,"language":56,"meta":57,"style":57},"\u002F\u002F Post Route\nconst router = require(\"express\").Router();\nconst postSchema = require(\"..\u002Fmodels\u002FPost\");\nconst verify = require(\".\u002FtokenVerify\");\n\nrouter.get(\"\u002F\", verify, async (req, res) => {\n  try {\n    const posts = await postSchema.find();\n    res.send(posts);\n  } catch (err) {\n    res.send({ message: err });\n  }\n});\n","post.js",[37,867,868,873,904,928,952,956,999,1006,1030,1048,1063,1091,1095],{"__ignoreMap":57},[61,869,870],{"class":63,"line":64},[61,871,872],{"class":354},"\u002F\u002F Post Route\n",[61,874,875,877,880,882,884,886,888,891,893,895,897,900,902],{"class":63,"line":71},[61,876,501],{"class":500},[61,878,879],{"class":504}," router",[61,881,508],{"class":265},[61,883,511],{"class":245},[61,885,250],{"class":249},[61,887,75],{"class":74},[61,889,890],{"class":78},"express",[61,892,75],{"class":74},[61,894,288],{"class":249},[61,896,272],{"class":67},[61,898,899],{"class":245},"Router",[61,901,749],{"class":249},[61,903,303],{"class":67},[61,905,906,908,911,913,915,917,919,922,924,926],{"class":63,"line":98},[61,907,501],{"class":500},[61,909,910],{"class":504}," postSchema",[61,912,508],{"class":265},[61,914,511],{"class":245},[61,916,250],{"class":249},[61,918,75],{"class":74},[61,920,921],{"class":78},"..\u002Fmodels\u002FPost",[61,923,75],{"class":74},[61,925,288],{"class":249},[61,927,303],{"class":67},[61,929,930,932,935,937,939,941,943,946,948,950],{"class":63,"line":119},[61,931,501],{"class":500},[61,933,934],{"class":504}," verify",[61,936,508],{"class":265},[61,938,511],{"class":245},[61,940,250],{"class":249},[61,942,75],{"class":74},[61,944,945],{"class":78},".\u002FtokenVerify",[61,947,75],{"class":74},[61,949,288],{"class":249},[61,951,303],{"class":67},[61,953,954],{"class":63,"line":204},[61,955,373],{"emptyLinePlaceholder":372},[61,957,958,961,963,966,968,970,973,975,977,979,981,984,986,988,990,992,994,997],{"class":63,"line":224},[61,959,960],{"class":570},"router",[61,962,272],{"class":67},[61,964,965],{"class":245},"get",[61,967,250],{"class":249},[61,969,75],{"class":74},[61,971,972],{"class":78},"\u002F",[61,974,75],{"class":74},[61,976,291],{"class":67},[61,978,934],{"class":258},[61,980,291],{"class":67},[61,982,983],{"class":500}," async",[61,985,762],{"class":67},[61,987,542],{"class":541},[61,989,291],{"class":67},[61,991,547],{"class":541},[61,993,288],{"class":67},[61,995,996],{"class":500}," =>",[61,998,557],{"class":67},[61,1000,1001,1004],{"class":63,"line":600},[61,1002,1003],{"class":603},"  try",[61,1005,557],{"class":67},[61,1007,1008,1011,1014,1016,1019,1021,1023,1026,1028],{"class":63,"line":618},[61,1009,1010],{"class":500},"    const",[61,1012,1013],{"class":504}," posts",[61,1015,508],{"class":265},[61,1017,1018],{"class":603}," await",[61,1020,910],{"class":570},[61,1022,272],{"class":67},[61,1024,1025],{"class":245},"find",[61,1027,749],{"class":84},[61,1029,303],{"class":67},[61,1031,1032,1035,1037,1039,1041,1044,1046],{"class":63,"line":635},[61,1033,1034],{"class":570},"    res",[61,1036,272],{"class":67},[61,1038,611],{"class":245},[61,1040,250],{"class":84},[61,1042,1043],{"class":258},"posts",[61,1045,288],{"class":84},[61,1047,303],{"class":67},[61,1049,1050,1052,1054,1056,1059,1061],{"class":63,"line":650},[61,1051,653],{"class":67},[61,1053,759],{"class":603},[61,1055,762],{"class":84},[61,1057,1058],{"class":258},"err",[61,1060,262],{"class":84},[61,1062,68],{"class":67},[61,1064,1065,1067,1069,1071,1073,1076,1079,1081,1084,1087,1089],{"class":63,"line":660},[61,1066,1034],{"class":570},[61,1068,272],{"class":67},[61,1070,611],{"class":245},[61,1072,250],{"class":84},[61,1074,1075],{"class":67},"{",[61,1077,1078],{"class":621}," message",[61,1080,626],{"class":625},[61,1082,1083],{"class":258}," err",[61,1085,1086],{"class":67}," }",[61,1088,288],{"class":84},[61,1090,303],{"class":67},[61,1092,1093],{"class":63,"line":665},[61,1094,827],{"class":67},[61,1096,1097,1100,1102],{"class":63,"line":675},[61,1098,1099],{"class":67},"}",[61,1101,288],{"class":249},[61,1103,303],{"class":67},[1105,1106,1108],"h2",{"id":1107},"now-lets-test-it-out","Now lets test it out!",[11,1110,1111],{},"I am using postman to test the API, and you can use the tool your comfortable with. After setting up the project and registering a user. Now login with the user's email and password. If everything goes well, you will see a response like this.",[51,1113,1116],{"className":53,"code":1114,"language":56,"meta":1115,"style":57},"{\n    \"statusCode\": 200,\n    \"message\": \"Logged In !!\"\n}\n","label=\"response\" icon=devicon:javascript",[37,1117,1118,1122,1139,1157],{"__ignoreMap":57},[61,1119,1120],{"class":63,"line":64},[61,1121,68],{"class":67},[61,1123,1124,1127,1130,1132,1134,1137],{"class":63,"line":71},[61,1125,1126],{"class":74},"    \"",[61,1128,1129],{"class":78},"statusCode",[61,1131,75],{"class":74},[61,1133,85],{"class":84},[61,1135,1136],{"class":629},"200",[61,1138,95],{"class":67},[61,1140,1141,1143,1146,1148,1150,1152,1155],{"class":63,"line":98},[61,1142,1126],{"class":74},[61,1144,1145],{"class":78},"message",[61,1147,75],{"class":74},[61,1149,85],{"class":84},[61,1151,75],{"class":74},[61,1153,1154],{"class":78},"Logged In !!",[61,1156,221],{"class":74},[61,1158,1159],{"class":63,"line":119},[61,1160,122],{"class":67},[11,1162,1163,1164,1167],{},"And now, if you check the header, you will see the ",[37,1165,1166],{},"auth-token"," key with the token value. Now you can store and use this token to the sent request.",[11,1169,1170],{},[1171,1172],"img",{"alt":1173,"src":1174},"header with token","https:\u002F\u002Fik.imagekit.io\u002F3mh13v7xv4\u002Farticles\u002Fjson-web-token\u002Ftoken.jpg",[11,1176,1177,1178,1180],{},"Now that we have the token, let try requesting some data. We need to include the token in the header as ",[37,1179,582],{}," and send the request. After that, we will see all the posts that are stored in the database.",[11,1182,1183],{},[1171,1184],{"alt":1185,"src":1186},"post request response","https:\u002F\u002Fik.imagekit.io\u002F3mh13v7xv4\u002Farticles\u002Fjson-web-token\u002Fpost.jpg",[11,1188,1189],{},"But if the token has tampered with, then the request will be invalid and get a response.",[51,1191,1193],{"className":53,"code":1192,"language":56,"meta":1115,"style":57},"{\n    \"statusCode\": 400,\n    \"message\": \"Invalid Token\"\n}\n",[37,1194,1195,1199,1214,1230],{"__ignoreMap":57},[61,1196,1197],{"class":63,"line":64},[61,1198,68],{"class":67},[61,1200,1201,1203,1205,1207,1209,1212],{"class":63,"line":71},[61,1202,1126],{"class":74},[61,1204,1129],{"class":78},[61,1206,75],{"class":74},[61,1208,85],{"class":84},[61,1210,1211],{"class":629},"400",[61,1213,95],{"class":67},[61,1215,1216,1218,1220,1222,1224,1226,1228],{"class":63,"line":98},[61,1217,1126],{"class":74},[61,1219,1145],{"class":78},[61,1221,75],{"class":74},[61,1223,85],{"class":84},[61,1225,75],{"class":74},[61,1227,809],{"class":78},[61,1229,221],{"class":74},[61,1231,1232],{"class":63,"line":119},[61,1233,122],{"class":67},[1105,1235,1237],{"id":1236},"thank-you","Thank You",[1239,1240,1241],"style",{},"html pre.shiki code .sB4Xn, html code.shiki .sB4Xn{--shiki-light:#39ADB5;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .sVH1b, html code.shiki .sVH1b{--shiki-light:#39ADB5;--shiki-default:#50A14F;--shiki-dark:#98C379}html pre.shiki code .spZWa, html code.shiki .spZWa{--shiki-light:#91B859;--shiki-default:#50A14F;--shiki-dark:#98C379}html pre.shiki code .sA0eD, html code.shiki .sA0eD{--shiki-light:#E53935;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .spnjr, html code.shiki .spnjr{--shiki-light:#6182B8;--shiki-default:#4078F2;--shiki-dark:#61AFEF}html pre.shiki code .sM89C, html code.shiki .sM89C{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#ABB2BF}html pre.shiki code .sWjah, html code.shiki .sWjah{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#E06C75}html pre.shiki code .syPST, html code.shiki .syPST{--shiki-light:#39ADB5;--shiki-default:#0184BC;--shiki-dark:#56B6C2}html pre.shiki code .seacL, html code.shiki .seacL{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#A0A1A7;--shiki-default-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic}html pre.shiki code .stT07, html code.shiki .stT07{--shiki-light:#E2931D;--shiki-default:#4078F2;--shiki-dark:#61AFEF}html pre.shiki code .sTDPv, html code.shiki .sTDPv{--shiki-light:#6182B8;--shiki-default:#0184BC;--shiki-dark:#56B6C2}html pre.shiki code .sJvVP, html code.shiki .sJvVP{--shiki-light:#9C3EDA;--shiki-default:#A626A4;--shiki-dark:#C678DD}html pre.shiki code .sMm83, html code.shiki .sMm83{--shiki-light:#90A4AE;--shiki-default:#986801;--shiki-dark:#E5C07B}html pre.shiki code .s5f2p, html code.shiki .s5f2p{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#383A42;--shiki-default-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic}html pre.shiki code .scCn_, html code.shiki .scCn_{--shiki-light:#90A4AE;--shiki-default:#383A42;--shiki-dark:#E5C07B}html pre.shiki code .sQsOY, html code.shiki .sQsOY{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#A626A4;--shiki-default-font-style:inherit;--shiki-dark:#C678DD;--shiki-dark-font-style:inherit}html pre.shiki code .su13H, html code.shiki .su13H{--shiki-light:#E53935;--shiki-default:#E45649;--shiki-dark:#E06C75}html pre.shiki code .saKOp, html code.shiki .saKOp{--shiki-light:#39ADB5;--shiki-default:#0184BC;--shiki-dark:#ABB2BF}html pre.shiki code .sriKn, html code.shiki .sriKn{--shiki-light:#F76D47;--shiki-default:#986801;--shiki-dark:#D19A66}html pre.shiki code .sDC5J, html code.shiki .sDC5J{--shiki-light:#90A4AE;--shiki-default:#E45649;--shiki-dark:#E5C07B}html pre.shiki code .srkOc, html code.shiki .srkOc{--shiki-light:#90A4AE;--shiki-default:#986801;--shiki-dark:#E06C75}html pre.shiki code .s8dPH, html code.shiki .s8dPH{--shiki-light:#90A4AE;--shiki-default:#E45649;--shiki-dark:#E06C75}html pre.shiki code .siYUK, html code.shiki .siYUK{--shiki-light:#39ADB5;--shiki-default:#E45649;--shiki-dark:#E5C07B}",{"title":57,"searchDepth":71,"depth":71,"links":1243},[1244,1245,1246,1247],{"id":31,"depth":98,"text":32},{"id":325,"depth":98,"text":326},{"id":1107,"depth":71,"text":1108},{"id":1236,"depth":71,"text":1237},"2021-04-14",false,"md",{"slug":1252,"difficulty":1253,"icon":1254,"ogImage":1255,"tags":1256,"topic":1254},"node-jwt-token","intermediate","node",{"alt":1252},[1257,1258,1254],"jwt","web-token","\u002Farticles\u002Fnode-jwt-token",{"title":5,"description":13},"articles\u002Fnode-jwt-token","g5KqKoy0VamwxJrxQS86Nk_RMm31NCANZBUzbZ9gavg",[1264,1269],{"title":1265,"path":1266,"stem":1267,"description":1268,"children":-1},"Unique approach of CSS custom property great flexibility and modularity","\u002Farticles\u002Funique-css-custom-property","articles\u002Funique-css-custom-property","CSS Custom Properties offers great flexibility and modularity to a stylesheet. Allows developers to centralize values, simplify maintaining and updating multiple elements at once across the entire project. The use of custom properties can go from simple color, shadow values to do dynamic changes to styles based on user interactions or other events using JavaScript.",{"title":1270,"path":1271,"stem":1272,"description":1273,"children":-1},"Articles","\u002Farticles","articles","Thoughts, tutorials, and insights about web development, programming, and technology.",1778820754461]