[{"data":1,"prerenderedAt":631},["ShallowReactive",2],{"navigation":3,"/sanctum/cookie":51,"/sanctum/cookie-surround":626},[4,18,43],{"title":5,"path":6,"stem":7,"children":8,"icon":17},"Getting Started","/getting-started","1.getting-started/1.index",[9,12],{"title":10,"path":6,"stem":7,"icon":11},"Introduction","i-simple-icons-laravel",{"title":13,"path":14,"stem":15,"icon":16},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",false,{"title":19,"path":20,"stem":21,"children":22,"page":17},"Sanctum","/sanctum","2.sanctum",[23,28,33,38],{"title":24,"path":25,"stem":26,"icon":27},"Configuration","/sanctum/configuration","2.sanctum/1.configuration","i-lucide-cog",{"title":29,"path":30,"stem":31,"icon":32},"Cookie Authentication","/sanctum/cookie","2.sanctum/2.cookie","i-lucide-cookie",{"title":34,"path":35,"stem":36,"icon":37},"Sanctum 2FA Flow","/sanctum/2fa","2.sanctum/3.2fa","i-lucide-shield-check",{"title":39,"path":40,"stem":41,"icon":42},"Server Proxy","/sanctum/proxy","2.sanctum/4.proxy","i-lucide-waypoints",{"title":44,"path":45,"stem":46,"children":47,"page":17},"Passport","/passport","3.passport",[48],{"title":24,"path":49,"stem":50,"icon":27},"/passport/configuration","3.passport/1.configuration",{"id":52,"title":29,"body":53,"description":619,"extension":620,"links":621,"meta":622,"navigation":623,"path":30,"seo":624,"stem":31,"__hash__":625},"docs/2.sanctum/2.cookie.md",{"type":54,"value":55,"toc":611},"minimark",[56,61,70,73,83,109,112,116,119,144,149,182,185,457,461,464,470,513,516,533,536,542,546,549,598,607],[57,58,60],"h2",{"id":59},"overview","Overview",[62,63,64,65,69],"p",{},"Nuxt-Umbu provides first-class support for ",[66,67,68],"strong",{},"Laravel Sanctum SPA authentication"," using secure HTTP-only cookies and CSRF protection.",[62,71,72],{},"This is the recommended authentication strategy when your Nuxt and Laravel applications share the same top-level domain.",[62,74,75,76],{},"Official Laravel documentation:\n",[77,78,82],"a",{"href":79,"rel":80},"https://laravel.com/docs/12.x/sanctum#spa-authentication",[81],"nofollow","SPA Authentication",[84,85,86,89,92],"warning",{},[62,87,88],{},"Nuxt and Laravel applications must share the same top-level domain.",[62,90,91],{},"Example:",[93,94,95,103],"ul",{},[96,97,98,99],"li",{},"Nuxt application → ",[100,101,102],"code",{},"domain.com",[96,104,105,106],{},"Laravel API → ",[100,107,108],{},"api.domain.com",[110,111],"hr",{},[57,113,115],{"id":114},"how-cookie-authentication-works","How Cookie Authentication Works",[62,117,118],{},"When using the Sanctum provider, Nuxt-Umbu automatically handles:",[93,120,121,128,135,138,141],{},[96,122,123,124,127],{},"CSRF cookie retrieval (",[100,125,126],{},"/sanctum/csrf-cookie",")",[96,129,130,131,134],{},"Sending the ",[100,132,133],{},"X-XSRF-TOKEN"," header",[96,136,137],{},"Managing HTTP-only session cookies",[96,139,140],{},"Forwarding cookies and headers between CSR and SSR",[96,142,143],{},"Authentication state handling",[145,146,148],"h3",{"id":147},"authentication-flow","Authentication Flow",[150,151,152,158,161,164,176,179],"ol",{},[96,153,154,155],{},"User submits credentials to the configured ",[100,156,157],{},"endpoints.login",[96,159,160],{},"Nuxt-Umbu ensures a CSRF cookie is retrieved",[96,162,163],{},"Laravel authenticates the user and sets a session cookie",[96,165,166,167],{},"All subsequent requests automatically include:\n",[93,168,169,172],{},[96,170,171],{},"Session cookie",[96,173,174,134],{},[100,175,133],{},[96,177,178],{},"The promise resolves on success or rejects on error",[96,180,181],{},"The developer must handle redirection manually",[62,183,184],{},"Example using .then() / .catch()",[186,187,192],"pre",{"className":188,"code":189,"language":190,"meta":191,"style":191},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const { $auth } = useNuxtApp()\n\nconst form = ref({\n    email: '',\n    password: ''\n})\n\nconst submit = () => {\n    $auth.loginWith('sanctum', form.value)\n        .then((response) => {\n            // authentication successful\n            navigateTo('/dashboard')\n        })\n        .catch((error) => {\n            // handle validation or authentication errors\n            console.error(error)\n        })\n}\n","typescript","",[100,193,194,224,231,251,267,278,286,291,310,346,369,376,393,401,422,428,444,451],{"__ignoreMap":191},[195,196,199,203,207,211,214,217,221],"span",{"class":197,"line":198},"line",1,[195,200,202],{"class":201},"spNyl","const",[195,204,206],{"class":205},"sMK4o"," {",[195,208,210],{"class":209},"sTEyZ"," $auth ",[195,212,213],{"class":205},"}",[195,215,216],{"class":205}," =",[195,218,220],{"class":219},"s2Zo4"," useNuxtApp",[195,222,223],{"class":209},"()\n",[195,225,227],{"class":197,"line":226},2,[195,228,230],{"emptyLinePlaceholder":229},true,"\n",[195,232,234,236,239,242,245,248],{"class":197,"line":233},3,[195,235,202],{"class":201},[195,237,238],{"class":209}," form ",[195,240,241],{"class":205},"=",[195,243,244],{"class":219}," ref",[195,246,247],{"class":209},"(",[195,249,250],{"class":205},"{\n",[195,252,254,258,261,264],{"class":197,"line":253},4,[195,255,257],{"class":256},"swJcz","    email",[195,259,260],{"class":205},":",[195,262,263],{"class":205}," ''",[195,265,266],{"class":205},",\n",[195,268,270,273,275],{"class":197,"line":269},5,[195,271,272],{"class":256},"    password",[195,274,260],{"class":205},[195,276,277],{"class":205}," ''\n",[195,279,281,283],{"class":197,"line":280},6,[195,282,213],{"class":205},[195,284,285],{"class":209},")\n",[195,287,289],{"class":197,"line":288},7,[195,290,230],{"emptyLinePlaceholder":229},[195,292,294,296,299,301,304,307],{"class":197,"line":293},8,[195,295,202],{"class":201},[195,297,298],{"class":209}," submit ",[195,300,241],{"class":205},[195,302,303],{"class":205}," ()",[195,305,306],{"class":201}," =>",[195,308,309],{"class":205}," {\n",[195,311,313,316,319,322,324,327,331,333,336,339,341,344],{"class":197,"line":312},9,[195,314,315],{"class":209},"    $auth",[195,317,318],{"class":205},".",[195,320,321],{"class":219},"loginWith",[195,323,247],{"class":256},[195,325,326],{"class":205},"'",[195,328,330],{"class":329},"sfazB","sanctum",[195,332,326],{"class":205},[195,334,335],{"class":205},",",[195,337,338],{"class":209}," form",[195,340,318],{"class":205},[195,342,343],{"class":209},"value",[195,345,285],{"class":256},[195,347,349,352,355,357,359,363,365,367],{"class":197,"line":348},10,[195,350,351],{"class":205},"        .",[195,353,354],{"class":219},"then",[195,356,247],{"class":256},[195,358,247],{"class":205},[195,360,362],{"class":361},"sHdIc","response",[195,364,127],{"class":205},[195,366,306],{"class":201},[195,368,309],{"class":205},[195,370,372],{"class":197,"line":371},11,[195,373,375],{"class":374},"sHwdD","            // authentication successful\n",[195,377,379,382,384,386,389,391],{"class":197,"line":378},12,[195,380,381],{"class":219},"            navigateTo",[195,383,247],{"class":256},[195,385,326],{"class":205},[195,387,388],{"class":329},"/dashboard",[195,390,326],{"class":205},[195,392,285],{"class":256},[195,394,396,399],{"class":197,"line":395},13,[195,397,398],{"class":205},"        }",[195,400,285],{"class":256},[195,402,404,406,409,411,413,416,418,420],{"class":197,"line":403},14,[195,405,351],{"class":205},[195,407,408],{"class":219},"catch",[195,410,247],{"class":256},[195,412,247],{"class":205},[195,414,415],{"class":361},"error",[195,417,127],{"class":205},[195,419,306],{"class":201},[195,421,309],{"class":205},[195,423,425],{"class":197,"line":424},15,[195,426,427],{"class":374},"            // handle validation or authentication errors\n",[195,429,431,434,436,438,440,442],{"class":197,"line":430},16,[195,432,433],{"class":209},"            console",[195,435,318],{"class":205},[195,437,415],{"class":219},[195,439,247],{"class":256},[195,441,415],{"class":209},[195,443,285],{"class":256},[195,445,447,449],{"class":197,"line":446},17,[195,448,398],{"class":205},[195,450,285],{"class":256},[195,452,454],{"class":197,"line":453},18,[195,455,456],{"class":205},"}\n",[57,458,460],{"id":459},"csrf-handling","CSRF Handling",[62,462,463],{},"By default, Nuxt-Umbu follows Laravel Sanctum's standard CSRF naming conventions.",[62,465,466,467,260],{},"Currently, these values are ",[66,468,469],{},"fixed and not configurable",[471,472,473,486],"table",{},[474,475,476],"thead",{},[477,478,479,483],"tr",{},[480,481,482],"th",{},"Option",[480,484,485],{},"Default Value",[487,488,489,502],"tbody",{},[477,490,491,497],{},[492,493,494],"td",{},[100,495,496],{},"csrf.cookie",[492,498,499],{},[100,500,501],{},"XSRF-TOKEN",[477,503,504,509],{},[492,505,506],{},[100,507,508],{},"csrf.header",[492,510,511],{},[100,512,133],{},[62,514,515],{},"The module automatically:",[93,517,518,524,530],{},[96,519,520,521,523],{},"Extracts the ",[100,522,501],{}," cookie from the server response",[96,525,526,527,529],{},"Sends its value in the ",[100,528,133],{}," header on subsequent requests",[96,531,532],{},"Ensures CSRF protection works in both CSR and SSR environments",[62,534,535],{},"These defaults match Laravel Sanctum's expected behavior and require no additional configuration.",[537,538,539],"blockquote",{},[62,540,541],{},"Note: Future versions of Nuxt-Umbu may allow customization of CSRF cookie and header names.",[57,543,545],{"id":544},"laravel-configuration","Laravel configuration",[62,547,548],{},"Your Laravel API should be configured properly to support Nuxt domain and share cookies:",[93,550,551,561,571,580,587],{},[96,552,553,554,557,558,127],{},"The Nuxt application domain should be registered in ",[100,555,556],{},"stateful"," domain list (",[100,559,560],{},"SANCTUM_STATEFUL_DOMAINS",[96,562,553,563,566,567,570],{},[100,564,565],{},"config/cors.php"," in ",[100,568,569],{},"allowed_origins"," domain list",[96,572,573,574,576,577],{},"Also ",[100,575,565],{}," configuration should have ",[100,578,579],{},"support_credentials=true",[96,581,582,583,586],{},"Sanctum ",[100,584,585],{},"statefulApi"," middleware should be enabled",[96,588,589,590,593,594,597],{},"The top-level domain should be used for the session (",[100,591,592],{},"SESSION_DOMAIN=.domain.com","), or ",[100,595,596],{},"localhost"," during development (without port)",[62,599,600,601,606],{},"If you notice incorrect behavior of the module or authentication flow,\nfeel free to ",[77,602,605],{"href":603,"rel":604},"https://github.com/4sllan/nuxt-umbu/issues/new/choose",[81],"raise an issue","!",[608,609,610],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 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 .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}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);}",{"title":191,"searchDepth":198,"depth":226,"links":612},[613,614,617,618],{"id":59,"depth":226,"text":60},{"id":114,"depth":226,"text":115,"children":615},[616],{"id":147,"depth":233,"text":148},{"id":459,"depth":226,"text":460},{"id":544,"depth":226,"text":545},"Set up cookie CSRF authentication for Sanctum","md",null,{},{"icon":32},{"title":29,"description":619},"wNxTt5jxt-SOnJVVD5vrTravPChIntDe-XkPN4Uo56U",[627,629],{"title":24,"path":25,"stem":26,"description":628,"icon":27,"children":-1},"How to configure Laravel Sanctum authentication in Nuxt Umbu",{"title":34,"path":35,"stem":36,"description":630,"icon":37,"children":-1},"Complete 2FA flow with optional middleware in Nuxt Umbu",1774883773199]