[{"data":1,"prerenderedAt":882},["ShallowReactive",2],{"navigation_docs":3,"-recipes-authentication":43,"-recipes-authentication-surround":877},[4,26],{"title":5,"path":6,"stem":7,"children":8,"page":25},"Getting Started","/getting-started","1.getting-started",[9,13,17,21],{"title":10,"path":11,"stem":12},"Quick Start","/getting-started/quick-start","1.getting-started/1.quick-start",{"title":14,"path":15,"stem":16},"Configuration","/getting-started/configuration","1.getting-started/2.configuration",{"title":18,"path":19,"stem":20},"Composables","/getting-started/composables","1.getting-started/3.composables",{"title":22,"path":23,"stem":24},"Auth Helpers","/getting-started/auth-helpers","1.getting-started/4.auth-helpers",false,{"title":27,"path":28,"stem":29,"children":30,"page":25},"Recipes","/recipes","2.recipes",[31,35,39],{"title":32,"path":33,"stem":34},"Authentication","/recipes/authentication","2.recipes/1.authentication",{"title":36,"path":37,"stem":38},"Error Policy","/recipes/error-handling","2.recipes/2.error-handling",{"title":40,"path":41,"stem":42},"TypesScript support","/recipes/typescript-support","2.recipes/3.typescript-support",{"id":44,"title":32,"body":45,"description":871,"extension":872,"links":873,"meta":874,"navigation":204,"path":33,"seo":875,"stem":34,"__hash__":876},"docs/2.recipes/1.authentication.md",{"type":46,"value":47,"toc":861},"minimark",[48,52,61,64,69,90,108,111,116,137,281,287,296,300,303,318,323,331,334,354,465,470,476,486,490,499,505,518,521,524,676,679,841,844,857],[49,50,32],"h1",{"id":51},"authentication",[53,54,55,56,60],"p",{},"Configure Nuxt Apollo via the ",[57,58,59],"code",{},"apollo"," property.",[62,63],"hr",{},[65,66,68],"h2",{"id":67},"token-storage","Token Storage",[53,70,71,72,81,82,89],{},"There are two (2) token storage modes supported by Nuxt Apollo, These include ",[73,74,78],"a",{"href":75,"rel":76},"https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage",[77],"nofollow",[57,79,80],{},"localStorage"," and ",[73,83,86],{"href":84,"rel":85},"https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies",[77],[57,87,88],{},"cookie",", with the latter being the default and recommended option.",[53,91,92,95,96,98,99,101,102,104,105,107],{},[57,93,94],{},"tokenStorage"," is set to ",[57,97,88],{}," by default. This can be changed to ",[57,100,80],{}," by modifying the ",[57,103,94],{}," property in the ",[57,106,59],{}," section of nuxt config, or on a per client basis.",[53,109,110],{},"Nuxt Apollo's authentication helper functions work closely with the token storage mode, and ultimately determines where the token is stored and retrieved from when these functions are triggered.",[112,113,115],"h3",{"id":114},"local-storage","Local Storage",[53,117,118,119,121,122,127,128,130,131,133,134,136],{},"The ",[57,120,80],{}," mode can be enabled by setting the ",[73,123,125],{"href":124},"/getting-started/configuration#tokenstorage",[57,126,94],{}," property to ",[57,129,80],{},". This can be applied globally to all Apollo clients by passing the ",[57,132,94],{}," property to the ",[57,135,59],{}," section in your nuxt config, or per client.",[138,139,145],"pre",{"className":140,"code":141,"filename":142,"language":143,"meta":144,"style":144},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxtjs/apollo'],\n\n  apollo: {\n    clients: {\n      default: {\n        tokenStorage: 'localStorage',\n      }\n    }\n  }\n})\n","nuxt.config.ts","ts","",[57,146,147,171,199,206,217,227,237,254,260,266,272],{"__ignoreMap":144},[148,149,152,156,159,163,167],"span",{"class":150,"line":151},"line",1,[148,153,155],{"class":154},"s7zQu","export",[148,157,158],{"class":154}," default",[148,160,162],{"class":161},"s2Zo4"," defineNuxtConfig",[148,164,166],{"class":165},"sTEyZ","(",[148,168,170],{"class":169},"sMK4o","{\n",[148,172,174,178,181,184,187,191,193,196],{"class":150,"line":173},2,[148,175,177],{"class":176},"swJcz","  modules",[148,179,180],{"class":169},":",[148,182,183],{"class":165}," [",[148,185,186],{"class":169},"'",[148,188,190],{"class":189},"sfazB","@nuxtjs/apollo",[148,192,186],{"class":169},[148,194,195],{"class":165},"]",[148,197,198],{"class":169},",\n",[148,200,202],{"class":150,"line":201},3,[148,203,205],{"emptyLinePlaceholder":204},true,"\n",[148,207,209,212,214],{"class":150,"line":208},4,[148,210,211],{"class":176},"  apollo",[148,213,180],{"class":169},[148,215,216],{"class":169}," {\n",[148,218,220,223,225],{"class":150,"line":219},5,[148,221,222],{"class":176},"    clients",[148,224,180],{"class":169},[148,226,216],{"class":169},[148,228,230,233,235],{"class":150,"line":229},6,[148,231,232],{"class":176},"      default",[148,234,180],{"class":169},[148,236,216],{"class":169},[148,238,240,243,245,248,250,252],{"class":150,"line":239},7,[148,241,242],{"class":176},"        tokenStorage",[148,244,180],{"class":169},[148,246,247],{"class":169}," '",[148,249,80],{"class":189},[148,251,186],{"class":169},[148,253,198],{"class":169},[148,255,257],{"class":150,"line":256},8,[148,258,259],{"class":169},"      }\n",[148,261,263],{"class":150,"line":262},9,[148,264,265],{"class":169},"    }\n",[148,267,269],{"class":150,"line":268},10,[148,270,271],{"class":169},"  }\n",[148,273,275,278],{"class":150,"line":274},11,[148,276,277],{"class":169},"}",[148,279,280],{"class":165},")\n",[282,283,284],"alert",{},[53,285,286],{},"Doesn't support server-side rendering (SSR).",[53,288,289,290,295],{},"Due to ",[73,291,293],{"href":75,"rel":292},[77],[57,294,80],{}," being a browser-only feature, it is not possible to use this mode for server-side rendering (SSR).",[65,297,299],{"id":298},"cookie-storage","Cookie Storage",[53,301,302],{},"Cookie storage is the recommended approach and is also required for server-side rendering (SSR).",[53,304,305,306,312,313,317],{},"This module provides a ",[73,307,309],{"href":308},"/getting-started/configuration#proxycookies",[57,310,311],{},"proxyCookies"," option (",[314,315,316],"strong",{},"enabled by default",") which when enabled, will proxy all cookies from the client to the server. This is particularly useful for server-side rendering (SSR).",[112,319,321],{"id":320},"credentials",[57,322,320],{},[53,324,325,330],{},[73,326,329],{"href":327,"rel":328},"https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials",[77],"Request credentials"," determine whether or not the browser should send cookies to the server.",[53,332,333],{},"Options:",[335,336,337,348],"ul",{},[338,339,340,343,344,347],"li",{},[57,341,342],{},"same-origin"," (",[314,345,346],{},"default","): Instruct the browser to send cookies to the server if the request is made from the same domain.",[338,349,350,353],{},[57,351,352],{},"include",": Required if the backend server lives on a different domain that the client. Instructs the browser to send cookies to 3rd party domains.",[138,355,357],{"className":140,"code":356,"filename":142,"language":143,"meta":144,"style":144},"export default defineNuxtConfig({\n  modules: ['@nuxtjs/apollo'],\n\n  apollo: {\n    clients: {\n      default: {\n        httpLinkOptions: {\n          credentials: 'include'\n        }\n      }\n    }\n  }\n})\n",[57,358,359,371,389,393,401,409,417,426,440,445,449,453,458],{"__ignoreMap":144},[148,360,361,363,365,367,369],{"class":150,"line":151},[148,362,155],{"class":154},[148,364,158],{"class":154},[148,366,162],{"class":161},[148,368,166],{"class":165},[148,370,170],{"class":169},[148,372,373,375,377,379,381,383,385,387],{"class":150,"line":173},[148,374,177],{"class":176},[148,376,180],{"class":169},[148,378,183],{"class":165},[148,380,186],{"class":169},[148,382,190],{"class":189},[148,384,186],{"class":169},[148,386,195],{"class":165},[148,388,198],{"class":169},[148,390,391],{"class":150,"line":201},[148,392,205],{"emptyLinePlaceholder":204},[148,394,395,397,399],{"class":150,"line":208},[148,396,211],{"class":176},[148,398,180],{"class":169},[148,400,216],{"class":169},[148,402,403,405,407],{"class":150,"line":219},[148,404,222],{"class":176},[148,406,180],{"class":169},[148,408,216],{"class":169},[148,410,411,413,415],{"class":150,"line":229},[148,412,232],{"class":176},[148,414,180],{"class":169},[148,416,216],{"class":169},[148,418,419,422,424],{"class":150,"line":239},[148,420,421],{"class":176},"        httpLinkOptions",[148,423,180],{"class":169},[148,425,216],{"class":169},[148,427,428,431,433,435,437],{"class":150,"line":256},[148,429,430],{"class":176},"          credentials",[148,432,180],{"class":169},[148,434,247],{"class":169},[148,436,352],{"class":189},[148,438,439],{"class":169},"'\n",[148,441,442],{"class":150,"line":262},[148,443,444],{"class":169},"        }\n",[148,446,447],{"class":150,"line":268},[148,448,259],{"class":169},[148,450,451],{"class":150,"line":274},[148,452,265],{"class":169},[148,454,456],{"class":150,"line":455},12,[148,457,271],{"class":169},[148,459,461,463],{"class":150,"line":460},13,[148,462,277],{"class":169},[148,464,280],{"class":165},[282,466,467],{},[53,468,469],{},"The backend server must be configured to allows credentials from the desired origins.",[112,471,473],{"id":472},"httponly",[57,474,475],{},"httpOnly",[53,477,478,479,485],{},"Nuxt Apollo is designed to support the ",[73,480,483],{"href":481,"rel":482},"https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#restrict_access_to_cookies",[77],[57,484,475],{}," cookie option with minimal effort on your part. This option prevents cookies from being accessed by JavaScript, hence it renders the authentication helpers trivial.",[65,487,489],{"id":488},"auth-hook","Auth Hook",[53,491,492,493,498],{},"Nuxt Apollo provides a SSR friendly auth token retrieval logic which meet the needs of most applications. This is based on the configured client's ",[73,494,496],{"href":495},"#tokenstorage",[57,497,94],{},".",[53,500,118,501,504],{},[57,502,503],{},"apollo:auth"," hook allows you to override the aforementioned behavior of Nuxt Apollo, and provide custom logic for manually retrieving and applying the authentication token accordingly. This should account for client and server modes.",[282,506,507],{},[53,508,509,510,512,513,517],{},"When the ",[57,511,503],{}," hook is implemented, The ",[73,514,516],{"href":515},"getting-started/auth-helpers#gettoken","getToken auth helper"," adheres to the custom logic provided to the hook.",[53,519,520],{},"If you are looking to add your authentication token to your requests after your initial login mutation, you will need to set this plugin up (or a similar implementation)",[53,522,523],{},"Using a cookie:",[138,525,528],{"className":140,"code":526,"filename":527,"language":143,"meta":144,"style":144},"export default defineNuxtPlugin((nuxtApp) => {\n  // access cookie for auth\n  const cookie = useCookie('\u003Ccookie_name>')\n\n  nuxtApp.hook('apollo:auth', ({ client, token }) => {\n    // `client` can be used to differentiate logic on a per client basis.\n\n    // apply apollo client token\n    token.value = '\u003Csecret_token>'\n  })\n})\n","plugins/apollo.ts",[57,529,530,556,562,587,591,630,635,639,644,663,670],{"__ignoreMap":144},[148,531,532,534,536,539,541,543,547,550,554],{"class":150,"line":151},[148,533,155],{"class":154},[148,535,158],{"class":154},[148,537,538],{"class":161}," defineNuxtPlugin",[148,540,166],{"class":165},[148,542,166],{"class":169},[148,544,546],{"class":545},"sHdIc","nuxtApp",[148,548,549],{"class":169},")",[148,551,553],{"class":552},"spNyl"," =>",[148,555,216],{"class":169},[148,557,558],{"class":150,"line":173},[148,559,561],{"class":560},"sHwdD","  // access cookie for auth\n",[148,563,564,567,570,573,576,578,580,583,585],{"class":150,"line":201},[148,565,566],{"class":552},"  const",[148,568,569],{"class":165}," cookie",[148,571,572],{"class":169}," =",[148,574,575],{"class":161}," useCookie",[148,577,166],{"class":176},[148,579,186],{"class":169},[148,581,582],{"class":189},"\u003Ccookie_name>",[148,584,186],{"class":169},[148,586,280],{"class":176},[148,588,589],{"class":150,"line":208},[148,590,205],{"emptyLinePlaceholder":204},[148,592,593,596,598,601,603,605,607,609,612,615,618,620,623,626,628],{"class":150,"line":219},[148,594,595],{"class":165},"  nuxtApp",[148,597,498],{"class":169},[148,599,600],{"class":161},"hook",[148,602,166],{"class":176},[148,604,186],{"class":169},[148,606,503],{"class":189},[148,608,186],{"class":169},[148,610,611],{"class":169},",",[148,613,614],{"class":169}," ({",[148,616,617],{"class":545}," client",[148,619,611],{"class":169},[148,621,622],{"class":545}," token",[148,624,625],{"class":169}," })",[148,627,553],{"class":552},[148,629,216],{"class":169},[148,631,632],{"class":150,"line":229},[148,633,634],{"class":560},"    // `client` can be used to differentiate logic on a per client basis.\n",[148,636,637],{"class":150,"line":239},[148,638,205],{"emptyLinePlaceholder":204},[148,640,641],{"class":150,"line":256},[148,642,643],{"class":560},"    // apply apollo client token\n",[148,645,646,649,651,654,656,658,661],{"class":150,"line":262},[148,647,648],{"class":165},"    token",[148,650,498],{"class":169},[148,652,653],{"class":165},"value",[148,655,572],{"class":169},[148,657,247],{"class":169},[148,659,660],{"class":189},"\u003Csecret_token>",[148,662,439],{"class":169},[148,664,665,668],{"class":150,"line":268},[148,666,667],{"class":169},"  }",[148,669,280],{"class":176},[148,671,672,674],{"class":150,"line":274},[148,673,277],{"class":169},[148,675,280],{"class":165},[53,677,678],{},"Using a pinia store:",[138,680,682],{"className":140,"code":681,"filename":527,"language":143,"meta":144,"style":144},"import {useUserStore} from \"~/store/user\"\n\nexport default defineNuxtPlugin((nuxtApp) => {\n  const userStore = useUserStore()\n  nuxtApp.hook(\"apollo:auth\", ({client, token}) => {\n    if (userStore.authToken) { \n      token.value = userStore.authToken\n    }\n  })\n})\n",[57,683,684,709,713,733,748,783,807,825,829,835],{"__ignoreMap":144},[148,685,686,689,692,695,697,700,703,706],{"class":150,"line":151},[148,687,688],{"class":154},"import",[148,690,691],{"class":169}," {",[148,693,694],{"class":165},"useUserStore",[148,696,277],{"class":169},[148,698,699],{"class":154}," from",[148,701,702],{"class":169}," \"",[148,704,705],{"class":189},"~/store/user",[148,707,708],{"class":169},"\"\n",[148,710,711],{"class":150,"line":173},[148,712,205],{"emptyLinePlaceholder":204},[148,714,715,717,719,721,723,725,727,729,731],{"class":150,"line":201},[148,716,155],{"class":154},[148,718,158],{"class":154},[148,720,538],{"class":161},[148,722,166],{"class":165},[148,724,166],{"class":169},[148,726,546],{"class":545},[148,728,549],{"class":169},[148,730,553],{"class":552},[148,732,216],{"class":169},[148,734,735,737,740,742,745],{"class":150,"line":208},[148,736,566],{"class":552},[148,738,739],{"class":165}," userStore",[148,741,572],{"class":169},[148,743,744],{"class":161}," useUserStore",[148,746,747],{"class":176},"()\n",[148,749,750,752,754,756,758,761,763,765,767,769,772,774,776,779,781],{"class":150,"line":219},[148,751,595],{"class":165},[148,753,498],{"class":169},[148,755,600],{"class":161},[148,757,166],{"class":176},[148,759,760],{"class":169},"\"",[148,762,503],{"class":189},[148,764,760],{"class":169},[148,766,611],{"class":169},[148,768,614],{"class":169},[148,770,771],{"class":545},"client",[148,773,611],{"class":169},[148,775,622],{"class":545},[148,777,778],{"class":169},"})",[148,780,553],{"class":552},[148,782,216],{"class":169},[148,784,785,788,790,793,795,798,801,804],{"class":150,"line":229},[148,786,787],{"class":154},"    if",[148,789,343],{"class":176},[148,791,792],{"class":165},"userStore",[148,794,498],{"class":169},[148,796,797],{"class":165},"authToken",[148,799,800],{"class":176},") ",[148,802,803],{"class":169},"{",[148,805,806],{"class":176}," \n",[148,808,809,812,814,816,818,820,822],{"class":150,"line":239},[148,810,811],{"class":165},"      token",[148,813,498],{"class":169},[148,815,653],{"class":165},[148,817,572],{"class":169},[148,819,739],{"class":165},[148,821,498],{"class":169},[148,823,824],{"class":165},"authToken\n",[148,826,827],{"class":150,"line":256},[148,828,265],{"class":169},[148,830,831,833],{"class":150,"line":262},[148,832,667],{"class":169},[148,834,280],{"class":176},[148,836,837,839],{"class":150,"line":268},[148,838,277],{"class":169},[148,840,280],{"class":165},[53,842,843],{},"Either of these will insert the appropriate authorization headers into your outgoing Apollo requests.",[282,845,847],{"type":846},"warning",[53,848,849,850,852,853,856],{},"Nuxt composables such as useState, useCookie, useRequestHeaders and more, should not be called directly in the ",[57,851,503],{}," hook. This would result in a ",[57,854,855],{},"nuxt instance unavailable"," error on the server-side.",[858,859,860],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}",{"title":144,"searchDepth":173,"depth":173,"links":862},[863,866,870],{"id":67,"depth":173,"text":68,"children":864},[865],{"id":114,"depth":201,"text":115},{"id":298,"depth":173,"text":299,"children":867},[868,869],{"id":320,"depth":201,"text":320},{"id":472,"depth":201,"text":475},{"id":488,"depth":173,"text":489},"Configure Nuxt Apollo via the apollo property.","md",null,{},{"title":32,"description":871},"SUIt5-ctRpJiyWshXR9bgO8J5DNhYVD_finrFVhyPiQ",[878,880],{"title":22,"path":23,"stem":24,"description":879,"children":-1},"Helper functions for working with authentication in Apollo.",{"title":36,"path":37,"stem":38,"description":881,"children":-1},"Capture GraphQL errors and handle them accordingly.",1785308701006]