[{"data":1,"prerenderedAt":386},["ShallowReactive",2],{"docs:doc:\u002Fen\u002Fdocs\u002Fguides\u002Fquickstarts":3,"docs:pages:docs_en":325},{"id":4,"title":5,"alt":6,"body":7,"description":314,"extension":315,"key":316,"meta":317,"navigation":318,"order":319,"path":320,"placeholder":321,"seo":322,"stem":323,"__hash__":324},"docs_en\u002Fen\u002Fdocs\u002Fguides\u002Fquickstarts\u002Findex.md","Framework quickstarts","\u002Fpl\u002Fdocs\u002Fprzewodniki\u002Fframeworki",{"type":8,"value":9,"toc":306},"minimark",[10,41,44,96,101,104,157,172,182,189,233,239,249,256,278,292,296],[11,12,15],"callout",{"title":13,"type":14},"The packages are not on the registries yet","warning",[16,17,18,19,23,24,27,28,31,32,35,36,40],"p",{},"Every SDK is at version ",[20,21,22],"code",{},"0.1.0",". They reach npm and PyPI with the ",[20,25,26],{},"1.0.0","\nrelease, so the ",[20,29,30],{},"npm install"," and ",[20,33,34],{},"pip install"," commands on these pages are the\nones that ",[37,38,39],"strong",{},"will"," fetch them — today they resolve to nothing. Everything else\non these pages is the shipped behaviour of the packages themselves.",[16,42,43],{},"Four pages, one per stack. They differ only in where the callback lives and who\nowns the client instance; the sign-in itself is the same authorization-code flow\nwith PKCE in every one of them.",[45,46,47,62,71,87],"ul",{},[48,49,50,57,58,61],"li",{},[37,51,52],{},[53,54,56],"a",{"href":55},"\u002Fen\u002Fdocs\u002Fguides\u002Fquickstarts\u002Fbrowser","Plain browser"," — any bundler, any\nframework with no module of ours. ",[20,59,60],{},"@kleora-io\u002Fbrowser",".",[48,63,64,70],{},[37,65,66],{},[53,67,69],{"href":68},"\u002Fen\u002Fdocs\u002Fguides\u002Fquickstarts\u002Fnextjs","Next.js"," — the App Router, with the\nsame package used from a client component.",[48,72,73,79,80,83,84,61],{},[37,74,75],{},[53,76,78],{"href":77},"\u002Fen\u002Fdocs\u002Fguides\u002Fquickstarts\u002Fnuxt","Nuxt"," — ",[20,81,82],{},"@kleora-io\u002Fnuxt",", which\nbrings its own callback page, route middleware and authenticated ",[20,85,86],{},"$fetch",[48,88,89,95],{},[37,90,91],{},[53,92,94],{"href":93},"\u002Fen\u002Fdocs\u002Fguides\u002Fquickstarts\u002Fexpress","Express"," — the other half:\nverifying on your API what the browser signed in with.",[97,98,100],"h2",{"id":99},"what-every-one-of-them-needs-first","What every one of them needs first",[16,102,103],{},"An App, and from its environment overview three values:",[105,106,107,120],"table",{},[108,109,110],"thead",{},[111,112,113,117],"tr",{},[114,115,116],"th",{},"Value",[114,118,119],{},"Looks like",[121,122,123,134,149],"tbody",{},[111,124,125,129],{},[126,127,128],"td",{},"Issuer",[126,130,131],{},[20,132,133],{},"https:\u002F\u002Facme.sandbox.kleora.eu",[111,135,136,139],{},[126,137,138],{},"Client id",[126,140,141,142,145,146],{},"the ",[20,143,144],{},"Default"," client's ",[20,147,148],{},"client_id",[111,150,151,154],{},[126,152,153],{},"Redirect URI",[126,155,156],{},"one you register yourself, below",[16,158,159,163,164,167,168,171],{},[53,160,162],{"href":161},"\u002Fen\u002Fdocs\u002Fgetting-started\u002Fquickstart","Quickstart"," walks through creating the App\nif you have not. Develop against the ",[37,165,166],{},"sandbox"," issuer: it is the environment\nthat accepts ",[20,169,170],{},"http:\u002F\u002Flocalhost"," redirect URIs at all, and its users never touch\nproduction.",[97,173,175,176,31,179],{"id":174},"register-both-callback-and-authcallback","Register both ",[20,177,178],{},"\u002Fcallback",[20,180,181],{},"\u002Fauth\u002Fcallback",[16,183,184,185,188],{},"A redirect URI is matched ",[37,186,187],{},"exactly"," — scheme, host, port and path. The two\nbrowser packages mount their callback in different places:",[105,190,191,201],{},[108,192,193],{},[111,194,195,198],{},[114,196,197],{},"Package",[114,199,200],{},"Where it lands",[121,202,203,218],{},[111,204,205,209],{},[126,206,207],{},[20,208,60],{},[126,210,211,212,215,216,61],{},"Wherever you point ",[20,213,214],{},"redirectUri",". The examples use ",[20,217,178],{},[111,219,220,224],{},[126,221,222],{},[20,223,82],{},[126,225,226,228,229,232],{},[20,227,181],{}," — the page the module adds, ",[20,230,231],{},"callbackPath","'s default.",[16,234,235,236,238],{},"So on the ",[20,237,144],{}," client of your sandbox environment, register both:",[240,241,246],"pre",{"className":242,"code":244,"language":245},[243],"language-text","http:\u002F\u002Flocalhost:3000\u002Fcallback\nhttp:\u002F\u002Flocalhost:3000\u002Fauth\u002Fcallback\n","text",[20,247,244],{"__ignoreMap":248},"",[16,250,251,252,255],{},"Registering only the one your first stack happens to use is the mistake worth\navoiding: the next person to try the Nuxt module against the same App gets\n",[20,253,254],{},"invalid_redirect_uri"," on their very first sign-in, from an App that was working\na minute earlier. Two entries cost nothing and the failure costs an afternoon.",[16,257,258,259,262,263,266,267,270,271,273,274,277],{},"Register a ",[37,260,261],{},"post-logout redirect URI"," too — ",[20,264,265],{},"http:\u002F\u002Flocalhost:3000\u002F"," — because\n",[20,268,269],{},"logout()"," sends the browser there and that list is matched exactly as well.\n",[20,272,82],{}," defaults ",[20,275,276],{},"returnTo"," to the site root, so the root is the\none entry it cannot do without.",[11,279,282],{"title":280,"type":281},"Ports and paths are yours","note",[16,283,284,287,288,291],{},[20,285,286],{},"3000"," above is Next.js's and Nuxt's default; Vite's is ",[20,289,290],{},"5173",". Whatever your\ndev server uses, the registered URI has to say the same thing — a different port\nis a different URI.",[97,293,295],{"id":294},"production-differs-in-one-way-that-bites-early","Production differs in one way that bites early",[16,297,298,299,302,303,305],{},"A production environment accepts ",[20,300,301],{},"https:\u002F\u002F"," redirect URIs only. The\n",[20,304,170],{}," entries you develop against cannot be carried across, so\nproduction gets its own list on its own client, with your real origin in it.",{"title":248,"searchDepth":307,"depth":307,"links":308},3,[309,311,313],{"id":99,"depth":310,"text":100},2,{"id":174,"depth":310,"text":312},"Register both \u002Fcallback and \u002Fauth\u002Fcallback",{"id":294,"depth":310,"text":295},"One page per stack — Next.js, Nuxt, Express and the plain browser — and the two redirect URIs all of them share.","md","guides\u002Fquickstarts\u002Findex",{},true,10,"\u002Fen\u002Fdocs\u002Fguides\u002Fquickstarts",false,{"title":5,"description":314},"en\u002Fdocs\u002Fguides\u002Fquickstarts\u002Findex","zS0_qpwgHlh__3SlzkE6M-pjYzBGTIkL_z0QMDYzs2k",[326,331,337,340,346,351,356,359,363,364,367,370,376,381],{"path":327,"title":328,"description":329,"order":319,"key":330},"\u002Fen\u002Fdocs\u002Fgetting-started","Getting started","From an empty project to a working sign-in, and the packages that get you there.","getting-started\u002Findex",{"path":332,"title":333,"description":334,"order":335,"key":336},"\u002Fen\u002Fdocs\u002Fgetting-started\u002Finstallation","Installing an SDK","The five packages we publish, what each one is for, and the configuration each one takes.",20,"getting-started\u002Finstallation",{"path":161,"title":162,"description":338,"order":319,"key":339},"Create an App, wire up the browser SDK, and sign in for the first time — entirely in sandbox.","getting-started\u002Fquickstart",{"path":341,"title":342,"description":343,"order":344,"key":345},"\u002Fen\u002Fdocs\u002Fguides\u002Farchitecture","How Kleora is put together","The shape of the hosted service — one address per environment, two API surfaces, and where state lives. And why self-hosting is not something we support today.",30,"guides\u002Farchitecture",{"path":347,"title":348,"description":349,"order":335,"key":350},"\u002Fen\u002Fdocs\u002Fguides\u002Fconcepts","Workspaces, roles and environments","The five words the product is built from, which of them your tokens carry, and how a change to a role reaches a running application.","guides\u002Fconcepts",{"path":352,"title":353,"description":354,"order":335,"key":355},"\u002Fen\u002Fdocs\u002Fguides","Guides","Wiring Kleora into your stack, the words the product uses, and how the hosted service is put together.","guides\u002Findex",{"path":55,"title":56,"description":357,"order":319,"key":358},"One client instance, one callback route, and an access token for every request your application makes.","guides\u002Fquickstarts\u002Fbrowser",{"path":93,"title":94,"description":360,"order":361,"key":362},"Verifying the access token on your own API — middleware, permissions, and the three answers a refusal can have.",40,"guides\u002Fquickstarts\u002Fexpress",{"path":320,"title":5,"description":314,"order":319,"key":316},{"path":68,"title":69,"description":365,"order":335,"key":366},"The browser SDK in an App Router application — a lazy client, a callback route, and token verification in a route handler.","guides\u002Fquickstarts\u002Fnextjs",{"path":77,"title":78,"description":368,"order":344,"key":369},"The Nuxt module — two lines of config, a callback page you do not write, and a route middleware that protects a page from its own meta.","guides\u002Fquickstarts\u002Fnuxt",{"path":371,"title":372,"description":373,"order":374,"key":375},"\u002Fen\u002Fdocs","Kleora documentation","Add hosted sign-in to your application, verify the token on your API, and manage users, workspaces and roles from one console.",0,"index",{"path":377,"title":378,"description":379,"order":319,"key":380},"\u002Fen\u002Fdocs\u002Freference\u002Fcode-highlighting","Code highlighting","One fence per preloaded Shiki grammar — a fixture, not a reference page.","reference\u002Fcode-highlighting",{"path":382,"title":383,"description":384,"order":344,"key":385},"\u002Fen\u002Fdocs\u002Freference","Reference","Reference material for the HTTP APIs and the SDK packages.","reference\u002Findex",1790698197379]