/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const chCodeConfig = { "staticMediaQuery": "not screen, (max-width: 768px)", "lineNumbers": true, "showCopyButton": true, "themeName": "supabase" }; function _createMdxContent(props) { const _components = Object.assign({ p: "p", code: "code", a: "a", h2: "h2", h3: "h3", h4: "h4", strong: "strong", em: "em", ul: "ul", li: "li" }, _provideComponents(), props.components), {Admonition, Accordion, Tabs, TabPanel, GetSessionWarning, CH} = _components; if (!Accordion) _missingMdxReference("Accordion", true); if (!Accordion.Item) _missingMdxReference("Accordion.Item", true); if (!Admonition) _missingMdxReference("Admonition", true); if (!CH) _missingMdxReference("CH", false); if (!CH.Code) _missingMdxReference("CH.Code", true); if (!GetSessionWarning) _missingMdxReference("GetSessionWarning", true); if (!TabPanel) _missingMdxReference("TabPanel", true); if (!Tabs) _missingMdxReference("Tabs", true); return _jsxs(_Fragment, { children: [_jsx("style", { dangerouslySetInnerHTML: { __html: "[data-ch-theme=\"supabase\"] { --ch-t-colorScheme: var(--ch-0);--ch-t-foreground: var(--ch-4);--ch-t-background: var(--ch-16);--ch-t-editor-background: var(--ch-16);--ch-t-editor-foreground: var(--ch-4);--ch-t-editor-rangeHighlightBackground: var(--ch-19);--ch-t-editor-infoForeground: var(--ch-18);--ch-t-editor-selectionBackground: var(--ch-17);--ch-t-tab-activeBackground: var(--ch-16);--ch-t-tab-activeForeground: var(--ch-4);--ch-t-tab-inactiveBackground: var(--ch-21);--ch-t-tab-inactiveForeground: var(--ch-15);--ch-t-tab-border: var(--ch-22);--ch-t-tab-activeBorder: var(--ch-16);--ch-t-editorGroupHeader-tabsBackground: var(--ch-21);--ch-t-editorLineNumber-foreground: var(--ch-20);--ch-t-input-foreground: var(--ch-4);--ch-t-sideBar-foreground: var(--ch-4);--ch-t-list-hoverBackground: var(--ch-25);--ch-t-list-hoverForeground: var(--ch-4); }" } }), "\n", _jsx(Admonition, { type: "caution", children: _jsxs(_components.p, { children: ["We generally recommend using the new ", _jsx(_components.code, { children: "@supabase/ssr" }), " package instead of ", _jsx(_components.code, { children: "auth-helpers" }), ". ", _jsx(_components.code, { children: "@supabase/ssr" }), " takes the core concepts of the Auth Helpers package and makes them available to any server framework. Check out the ", _jsx(_components.a, { href: "/docs/guides/auth/server-side/migrating-to-ssr-from-auth-helpers", children: "migration doc" }), " to learn more."] }) }), "\n", _jsx(Accordion, { type: "default", openBehaviour: "multiple", chevronAlign: "right", justified: true, size: "medium", className: "text-foreground-light border-b mt-8 pb-2", children: _jsxs(Accordion.Item, { header: "See legacy docs", id: "legacy-docs", children: [_jsxs(_components.p, { children: ["This submodule provides convenience helpers for implementing user authentication in ", _jsx(_components.a, { href: "https://kit.svelte.dev/", children: "SvelteKit" }), " applications."] }), _jsx(_components.h2, { children: "Configuration" }), _jsx(_components.h3, { children: "Install SvelteKit Auth helpers library" }), _jsxs(_components.p, { children: ["This library supports Node.js ", _jsx(_components.code, { children: "^16.15.0" }), "."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["Terminal"], "active": "Terminal", "heightRatio": 1 }, files: [{ "name": "Terminal", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "npm ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "install @supabase/auth-helpers-sveltekit @supabase/supabase-js", "props": { "style": { "color": "var(--ch-8)" } } }] }], "lang": "sh" }, "annotations": [] }] }), _jsx(_components.h3, { children: "Declare environment variables" }), _jsxs(_components.p, { children: ["Retrieve your project's URL and anon key from your ", _jsx(_components.a, { href: "https://supabase.com/dashboard/project/_/settings/api", children: "API settings" }), ", and create a ", _jsx(_components.code, { children: ".env.local" }), " file with the following environment variables:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [".env.local"], "active": ".env.local", "heightRatio": 1 }, files: [{ "name": ".env.local", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "# Find these in your Supabase project settings https://supabase.com/dashboard/project/_/settings/api", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "https://your-project.supabase.co", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "your-anon-key", "props": { "style": { "color": "var(--ch-8)" } } }] }], "lang": "bash" }, "annotations": [] }] }), _jsx(_components.h3, { children: "Creating a Supabase client" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsxs(TabPanel, { id: "js", label: "JavaScript", children: [_jsxs(_components.p, { children: ["Create a new ", _jsx(_components.code, { children: "hooks.server.js" }), " file in the root of your project and populate with the following to retrieve the user session."] }), _jsx(GetSessionWarning, {}), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.js"], "active": "src/hooks.server.js", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/hooks.server.js", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/static/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event.locals.supabase ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseUrl: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseKey: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /**", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * Unlike `supabase.auth.getSession`, which is unsafe on the server because it", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * doesn't validate the JWT, this function validates the JWT by first calling", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * `getUser` and aborts early if the JWT signature is invalid.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", user: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session, user }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " filterSerializedResponseHeaders", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " name ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'content-range'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsxs(_components.p, { children: ["Create a new ", _jsx(_components.code, { children: "hooks.server.ts" }), " file in the root of your project and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.ts"], "active": "src/hooks.server.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/hooks.server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/static/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Handle } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Handle ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event.locals.supabase ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseUrl: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseKey: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /**", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * Unlike `supabase.auth.getSession`, which is unsafe on the server because it", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * doesn't validate the JWT, this function validates the JWT by first calling", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * `getUser` and aborts early if the JWT signature is invalid.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", user: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session, user }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " filterSerializedResponseHeaders", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " name ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'content-range'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] })] }), _jsx(Admonition, { type: "note", children: _jsx(_components.p, { children: "Note that we are specifying filterSerializedResponseHeaders here. We need to tell SvelteKit that supabase needs the content-range header." }) }), _jsx(_components.h3, { children: "Code Exchange route" }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "Code Exchange" }), " route is required for the ", _jsx(_components.a, { href: "https://supabase.com/docs/guides/auth/server-side-rendering", children: "server-side auth flow" }), " implemented by the SvelteKit Auth Helpers. It exchanges an auth ", _jsx(_components.code, { children: "code" }), " for the user's ", _jsx(_components.code, { children: "session" }), ", which is set as a cookie for future requests made to Supabase."] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsxs(TabPanel, { id: "js", label: "JavaScript", children: [_jsxs(_components.p, { children: ["Create a new file at ", _jsx(_components.code, { children: "src/routes/auth/callback/+server.js" }), " and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/auth/callback/+server.js"], "active": "src/routes/auth/callback/+server.js", "heightRatio": 1 }, files: [{ "name": "src/routes/auth/callback/+server.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "url", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "code ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " url.searchParams.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'code'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (code) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "exchangeCodeForSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(code)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsxs(_components.p, { children: ["Create a new file at ", _jsx(_components.code, { children: "src/routes/auth/callback/+server.ts" }), " and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/auth/callback/+server.ts"], "active": "src/routes/auth/callback/+server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/auth/callback/+server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "url", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "code ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " url.searchParams.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'code'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (code) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "exchangeCodeForSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(code)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] })] }), _jsx(_components.h3, { children: "Generate types from your database" }), _jsxs(_components.p, { children: ["In order to get the most out of TypeScript and it's intellisense, you should import the generated Database types into the ", _jsx(_components.code, { children: "app.d.ts" }), " type definition file that comes with your SvelteKit project, where ", _jsx(_components.code, { children: "import('./DatabaseDefinitions')" }), " points to the generated types file outlined in ", _jsx(_components.a, { href: "https://supabase.com/docs/reference/javascript/release-notes#typescript-support", children: "v2 docs here" }), " after you have logged in, linked, and generated types through the Supabase CLI."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/app.d.ts"], "active": "src/app.d.ts", "heightRatio": 1 }, files: [{ "name": "src/app.d.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/app.d.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { SupabaseClient, Session, User } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./DatabaseDefinitions'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "declare", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " global {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " namespace ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "App", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "SupabaseClient", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Promise", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "<{ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Session ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "; ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "User ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }>", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Session ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "User ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Error {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // interface Platform {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(_components.h2, { children: "Authentication" }), _jsxs(_components.p, { children: ["Authentication can be initiated ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/sveltekit#client-side", children: "client" }), " or ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/sveltekit#server-side", children: "server-side" }), ". All of the ", _jsx(_components.a, { href: "/docs/reference/javascript/auth-api", children: "supabase-js authentication strategies" }), " are supported with the Auth Helpers client."] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["Note: The authentication flow requires the ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/sveltekit#code-exchange-route", children: "Code Exchange Route" }), " to exchange a ", _jsx(_components.code, { children: "code" }), " for the user's ", _jsx(_components.code, { children: "session" }), "."] }) }), _jsx(_components.h3, { children: "Client-side" }), _jsx(_components.h4, { children: "Send session to client" }), _jsx(_components.p, { children: "To make the session available across the UI, including pages and layouts, it is crucial to pass the session as a parameter in the root layout's server load function." }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.server.js"], "active": "src/routes/+layout.server.js", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.server.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/+layout.server.js", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "ts", label: "TypeScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.server.ts"], "active": "src/routes/+layout.server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/+layout.server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) })] }), _jsx(_components.h4, { children: "Shared load functions and pages" }), _jsx(_components.p, { children: "To utilize Supabase in shared load functions and within pages, it is essential to create a Supabase client in the root layout load." }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.js"], "active": "src/routes/+layout.js", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/+layout.js", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/static/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseLoadClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "fetch", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "depends", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " depends", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'supabase:auth'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseLoadClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseUrl: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseKey: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event: { fetch },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " serverSession: data.session,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /**", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * It's fine to use `getSession` here, because on the client, `getSession` is", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * safe, and on the server, it reads `session` from the `LayoutData`, which", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * safely checked the session using `safeGetSession`.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabase, session }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.ts"], "active": "src/routes/+layout.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/+layout.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/static/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseLoadClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'../DatabaseDefinitions'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "fetch", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "depends", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " depends", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'supabase:auth'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseLoadClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseUrl: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseKey: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event: { fetch },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " serverSession: data.session,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /**", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * It's fine to use `getSession` here, because on the client, `getSession` is", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * safe, and on the server, it reads `session` from the `LayoutData`, which", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * safely checked the session using `safeGetSession`.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabase, session }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "https://supabase.com/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createSupabaseLoadClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsxs(_components.p, { children: ["Access the client inside pages by ", _jsx(_components.code, { children: "$page.data.supabase" }), " or ", _jsx(_components.code, { children: "data.supabase" }), " when using ", _jsx(_components.code, { children: "export let data" }), "."] }), _jsxs(_components.p, { children: ["The usage of ", _jsx(_components.code, { children: "depends" }), " tells sveltekit that this load function should be executed whenever ", _jsx(_components.code, { children: "invalidate" }), " is called to keep the page store in sync."] }), _jsxs(_components.p, { children: [_jsx(_components.code, { children: "createSupabaseLoadClient" }), " caches the client when running in a browser environment and therefore does not create a new client for every time the load function runs."] }), _jsx(_components.h4, { children: "Setting up the event listener on the client side" }), _jsxs(_components.p, { children: ["We need to create an event listener in the root ", _jsx(_components.code, { children: "+layout.svelte" }), " file in order to catch supabase events being triggered."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.svelte"], "active": "src/routes/+layout.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { invalidate } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/navigation'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { onMount } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'svelte'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabase, session } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ({ supabase, session } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " onMount", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "subscription", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "onAuthStateChange", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "((", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "_session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (_session?.expires_at ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!==", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " session?.expires_at) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " invalidate", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'supabase:auth'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " subscription.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "unsubscribe", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " });", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "slot", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsxs(_components.p, { children: ["The usage of ", _jsx(_components.code, { children: "invalidate" }), " tells SvelteKit that the root ", _jsx(_components.code, { children: "+layout.ts" }), " load function should be executed whenever the session updates to keep the page store in sync."] }), _jsx(_components.h4, { children: "Sign in / sign up / sign out" }), _jsxs(_components.p, { children: ["We can access the supabase instance in our ", _jsx(_components.code, { children: "+page.svelte" }), " file through the data object."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/auth/+page.svelte"], "active": "src/routes/auth/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/auth/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabase } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ({ supabase } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " email", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " password", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignUp ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "location", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/auth/callback`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignIn ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signInWithPassword", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignOut ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signOut", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "form ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "on", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "submit", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignUp", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"email\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "bind", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "value", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "type", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"password\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"password\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "bind", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "value", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Sign up", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "on", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "click", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignIn", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Sign in", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "on", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "click", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignOut", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Sign out", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsx(_components.h3, { children: "Server-side" }), _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://kit.svelte.dev/docs/form-actions", children: "Form Actions" }), " can be used to trigger the authentication process from form submissions."] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsxs(TabPanel, { id: "js", label: "JavaScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/login/+page.server.js"], "active": "src/routes/login/+page.server.js", "heightRatio": 1 }, files: [{ "name": "src/routes/login/+page.server.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/login/+page.server.js", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { fail } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "actions ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " default", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "url", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "formData ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'email'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'password'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "url", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/auth/callback`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "fail", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "500", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", { message: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Server error. Try again later.'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", success: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", email })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " message: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Please check your email for a magic link to log into the website.'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " success: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "true", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/login/+page.svelte"], "active": "src/routes/login/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/login/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "\timport", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { enhance } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/forms'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "\texport let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " form", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "form ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "method", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"post\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "use", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "enhance", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"email\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "value", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "form?.email ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "?? ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "''", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "type", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"password\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Sign up", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/login/+page.server.ts"], "active": "src/routes/login/+page.server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/login/+page.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/login/+page.server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { fail } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "actions ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " default", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "url", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "formData ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'email'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "as ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'password'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "as ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "url", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/auth/callback`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "fail", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "500", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", { message: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Server error. Try again later.'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", success: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", email })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " message: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Please check your email for a magic link to log into the website.'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " success: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "true", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/login/+page.svelte"], "active": "src/routes/login/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/login/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "\timport", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { enhance } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/forms'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "\texport let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " form", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "form ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "method", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"post\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "use", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "enhance", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"email\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "value", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "form?.email ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "?? ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "''", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "type", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"password\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Sign up", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] })] })] }), _jsx(_components.h2, { children: "Authorization" }), _jsx(_components.h3, { children: "Protecting API routes" }), _jsxs(_components.p, { children: ["Wrap an API Route to check that the user has a valid session. If they're not logged in the session is ", _jsx(_components.code, { children: "null" }), "."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/api/protected-route/+server.ts"], "active": "src/routes/api/protected-route/+server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/api/protected-route/+server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/api/protected-route/+server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json, error } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // the user is not signed in", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " throw ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "401", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", { message: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Unauthorized'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ data })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsxs(_components.p, { children: ["If you visit ", _jsx(_components.code, { children: "/api/protected-route" }), " without a valid session cookie, you will get a 401 response."] }), _jsx(_components.h3, { children: "Protecting actions" }), _jsxs(_components.p, { children: ["Wrap an Action to check that the user has a valid session. If they're not logged in the session is ", _jsx(_components.code, { children: "null" }), "."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/posts/+page.server.ts"], "active": "src/routes/posts/+page.server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/posts/+page.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/posts/+page.server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { error, fail } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "actions ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " createPost", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // the user is not signed in", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " throw ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "401", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", { message: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Unauthorized'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // we are save, let the user create the post", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "formData ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "content ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'content'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "createPostError", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "newPost", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " .", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'posts'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " .", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ content })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (createPostError) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "fail", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "500", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseErrorMessage: createPostError.message,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " newPost,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsxs(_components.p, { children: ["If you try to submit a form with the action ", _jsx(_components.code, { children: "?/createPost" }), " without a valid session cookie, you will get a 401 error response."] }), _jsx(_components.h3, { children: "Protecting multiple routes" }), _jsxs(_components.p, { children: ["To avoid writing the same auth logic in every single route you can also use the handle hook to\nprotect multiple routes at once. For this to work with your Supabase session, you need to use\nSveltekit's ", _jsx(_components.a, { href: "https://kit.svelte.dev/docs/modules#sveltejs-kit-hooks", children: "sequence helper" }), " function.\nEdit your ", _jsx(_components.code, { children: "/src/hooks.server.js" }), " with the below:"] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.js"], "active": "src/hooks.server.js", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/hooks.server.js", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/static/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect, error } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { sequence } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit/hooks'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event.locals.supabase ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseUrl: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseKey: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /**", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * Unlike `supabase.auth.getSession`, which is unsafe on the server because it", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * doesn't validate the JWT, this function validates the JWT by first calling", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * `getUser` and aborts early if the JWT signature is invalid.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", user: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session, user }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " filterSerializedResponseHeaders", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " name ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'content-range'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "authorization", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // protect requests to all routes that start with /protected-routes", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (event.url.pathname.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "startsWith", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/protected-routes'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "&&", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.request.method ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'GET'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // the user is not signed in", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // protect POST requests to all routes that start with /protected-posts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (event.url.pathname.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "startsWith", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/protected-posts'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "&&", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.request.method ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'POST'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // the user is not signed in", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " throw ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "sequence", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(supabase, authorization)", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "ts", label: "TypeScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.ts"], "active": "src/hooks.server.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/hooks.server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " Handle, redirect, error } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/static/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { sequence } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit/hooks'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event.locals.supabase ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseUrl: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseKey: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /**", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * Unlike `supabase.auth.getSession`, which is unsafe on the server because it", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * doesn't validate the JWT, this function validates the JWT by first calling", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * `getUser` and aborts early if the JWT signature is invalid.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", user: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session, user }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " filterSerializedResponseHeaders", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " name ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'content-range'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "authorization", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // protect requests to all routes that start with /protected-routes", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (event.url.pathname.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "startsWith", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/protected-routes'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "&&", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.request.method ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'GET'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // the user is not signed in", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // protect POST requests to all routes that start with /protected-posts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (event.url.pathname.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "startsWith", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/protected-posts'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "&&", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.request.method ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'POST'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // the user is not signed in", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " throw ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Handle ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "sequence", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(supabase, authorization)", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) })] }), _jsx(_components.h2, { children: "Data fetching" }), _jsx(_components.h3, { children: "Client-side data fetching with RLS" }), _jsxs(_components.p, { children: ["For ", _jsx(_components.a, { href: "https://supabase.com/docs/guides/auth/row-level-security", children: "row level security" }), " to work properly when fetching data client-side, you need to use ", _jsx(_components.code, { children: "supabaseClient" }), " from ", _jsx(_components.code, { children: "PageData" }), " and only run your query once the session is defined client-side:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+page.svelte"], "active": "src/routes/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " loadedData ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " []", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "loadData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "result", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data.supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "limit", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "20", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " loadedData ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " result", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (data.session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " loadData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "{#", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data.session}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">client-side data fetching with RLS", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(loadedData, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "{/", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsx(_components.h3, { children: "Server-side data fetching with RLS" }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/profile/+page.svelte"], "active": "src/routes/profile/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/profile/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { user, tableData } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ({ user, tableData } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Protected content for ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(tableData, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/profile/+page.ts"], "active": "src/routes/profile/+page.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/profile/+page.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/profile/+page.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "parent", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "parent", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user: session.user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " tableData,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(_components.h2, { children: "Saving and deleting the session" }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { fail, redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { AuthApiError } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "actions ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " signin", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "formData ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'email'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "as ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'password'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "as ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signInWithPassword", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "instanceof ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "AuthApiError ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "&&", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " error.status ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "400", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "fail", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "400", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Invalid credentials.'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " values: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "fail", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "500", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Server error. Try again later.'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " values: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/dashboard'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " signout", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signOut", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(_components.h2, { children: "Migration guide [#migration]" }), _jsx(_components.h3, { children: "Migrate to 0.10" }), _jsx(_components.h4, { children: "PKCE Auth flow" }), _jsxs(_components.p, { children: ["Proof Key for Code Exchange (PKCE) is the new server-side auth flow implemented by the SvelteKit Auth Helpers. It requires a server endpoint for ", _jsx(_components.code, { children: "/auth/callback" }), " that exchanges an auth ", _jsx(_components.code, { children: "code" }), " for the user's ", _jsx(_components.code, { children: "session" }), "."] }), _jsxs(_components.p, { children: ["Check the ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/sveltekit#code-exchange-route", children: "Code Exchange Route steps" }), " above to implement this server endpoint."] }), _jsx(_components.h4, { children: "Authentication" }), _jsxs(_components.p, { children: ["For authentication methods that have a ", _jsx(_components.code, { children: "redirectTo" }), " or ", _jsx(_components.code, { children: "emailRedirectTo" }), ", this must be set to this new code exchange route handler - ", _jsx(_components.code, { children: "/auth/callback" }), ". This is an example with the ", _jsx(_components.code, { children: "signUp" }), " function:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'jon@example.com'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'sup3rs3cur3'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'http://localhost:3000/auth/callback'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(_components.h3, { children: "Migrate from 0.8.x to 0.9 [#migration-0-9]" }), _jsx(_components.h4, { children: "Set up the Supabase client [#migration-set-up-supabase-client]" }), _jsxs(_components.p, { children: ["In version 0.9 we now setup our Supabase client for the server inside of a ", _jsx(_components.code, { children: "hooks.server.ts" }), " file."] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0.8", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older-0.8", label: "0.8.x", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/lib/db.ts"], "active": "src/lib/db.ts", "heightRatio": 1 }, files: [{ "name": "src/lib/db.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/lib/db.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { env } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/dynamic/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "// or use the static env", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.9.0", label: "0.9.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.ts"], "active": "src/hooks.server.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/hooks.server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/static/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Handle } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Handle ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event.locals.supabase ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseUrl: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseKey: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /**", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * Unlike `supabase.auth.getSession`, which is unsafe on the server because it", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * doesn't validate the JWT, this function validates the JWT by first calling", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * `getUser` and aborts early if the JWT signature is invalid.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " event.locals.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "safeGetSession ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (error) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", user: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals.supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session, user }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "resolve", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " filterSerializedResponseHeaders", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " name ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'content-range'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }) })] }), _jsx(_components.h4, { children: "Initialize the client [#migration-initialize-client]" }), _jsxs(_components.p, { children: ["In order to use the Supabase library in your client code you will need to setup a shared load function inside the root ", _jsx(_components.code, { children: "+layout.ts" }), " and create a ", _jsx(_components.code, { children: "+layout.svelte" }), " to handle our event listening for Auth events."] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0.8", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older-0.8", label: "0.8.x", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.svelte"], "active": "src/routes/+layout.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabaseClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { invalidate } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/navigation'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { onMount } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'svelte'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " onMount", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "subscription", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "onAuthStateChange", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " invalidate", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'supabase:auth'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " subscription.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "unsubscribe", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "slot", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "0.9.0", label: "0.9.0", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.ts"], "active": "src/routes/+layout.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/+layout.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { invalidate } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/navigation'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/static/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseLoadClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { LayoutLoad } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'../DatabaseDefinitions'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LayoutLoad ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "fetch", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "depends", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " depends", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'supabase:auth'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseLoadClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseUrl: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseKey: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " event: { fetch },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " serverSession: data.session,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabase, session }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.svelte"], "active": "src/routes/+layout.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { invalidate } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/navigation'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { onMount } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'svelte'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { LayoutData } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LayoutData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ({ supabase, session } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data);", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " onMount", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "subscription", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "onAuthStateChange", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "((", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "_session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (_session?.expires_at ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!==", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " session?.expires_at) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " invalidate", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'supabase:auth'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " });", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " subscription.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "unsubscribe", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "();", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " });", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "slot", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] })] })] }), _jsx(_components.h4, { children: "Set up hooks [#migration-set-up-hooks]" }), _jsxs(_components.p, { children: ["Since version 0.9 relies on ", _jsx(_components.code, { children: "hooks.server.ts" }), " to setup our client, we no longer need the ", _jsx(_components.code, { children: "hooks.client.ts" }), " in our project for Supabase related code."] }), _jsx(_components.h4, { children: "Typings [#migration-typings]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0-8", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older-0-8", label: "0.8.x", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/app.d.ts"], "active": "src/app.d.ts", "heightRatio": 1 }, files: [{ "name": "src/app.d.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/app.d.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "/// <", "props": { "style": { "color": "var(--ch-1)" } } }, { "content": "reference ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "types", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"@sveltejs/kit\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// See https://kit.svelte.dev/docs/types#app", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// for information about these interfaces", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// and what to do when importing types", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "declare namespace ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "App", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'./DatabaseDefinitions'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " SchemaName", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Locals {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SupabaseSession", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Error {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // interface Platform {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.9.0", label: "0.9.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/app.d.ts"], "active": "src/app.d.ts", "heightRatio": 1 }, files: [{ "name": "src/app.d.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/app.d.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { SupabaseClient, Session, User } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./DatabaseDefinitions'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "declare", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " global {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " namespace ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "App", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "SupabaseClient", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " safeGetSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Promise", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "<{ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Session ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "; ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "User ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }>", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Session ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "User ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Error {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // interface Platform {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) })] }), _jsx(_components.h4, { children: "Protecting a page [#migration-protecting-a-page]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0-8", queryGroup: "migration-version", children: [_jsxs(TabPanel, { id: "older-0-8", label: "0.8.x", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/profile/+page.svelte"], "active": "src/routes/profile/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/profile/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /** ", "props": { "style": { "color": "var(--ch-1)" } } }, { "content": "@type ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "{import('./$types').PageData}", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ({ user, tableData } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Protected content for ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(tableData, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/profile/+page.ts"], "active": "src/routes/profile/+page.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/profile/+page.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/profile/+page.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PageLoad } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { getSupabase } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageLoad ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSupabase", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user: session.user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " tableData,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "0.9.0", label: "0.9.0", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/profile/+page.svelte"], "active": "src/routes/profile/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/profile/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PageData } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } = ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "div", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">Protected content for {user.email}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(tableData, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/profile/+page.ts"], "active": "src/routes/profile/+page.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/profile/+page.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/profile/+page.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PageLoad } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageLoad ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "parent", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "parent", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user: session.user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " tableData,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] })] }), _jsx(_components.h4, { children: "Protecting a API route [#migration-protecting-a-api-route]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0-8", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older-0-8", label: "0.8.x", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/api/protected-route/+server.ts"], "active": "src/routes/api/protected-route/+server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/api/protected-route/+server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/api/protected-route/+server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { RequestHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { getSupabase } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json, redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "RequestHandler ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSupabase", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ data })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.9.0", label: "0.9.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/api/protected-route/+server.ts"], "active": "src/routes/api/protected-route/+server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/api/protected-route/+server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/api/protected-route/+server.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { RequestHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json, error } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "RequestHandler ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // the user is not signed in", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " throw ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "401", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", { message: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Unauthorized'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ data })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) })] }), _jsx(_components.h3, { children: "Migrate from 0.7.x to 0.8 [#migration-0-8]" }), _jsx(_components.h4, { children: "Set up the Supabase client [#migration-set-up-supabase-client-0-8]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0.7", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older-0.7", label: "0.7.x", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/lib/db.ts"], "active": "src/lib/db.ts", "heightRatio": 1 }, files: [{ "name": "src/lib/db.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { setupSupabaseHelpers } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { dev } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/environment'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { env } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/dynamic/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "// or use the static env", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " persistSession: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " autoRefreshToken: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "setupSupabaseHelpers", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseClient,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " cookieOptions: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " secure: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "dev,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.8.0", label: "0.8.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/lib/db.ts"], "active": "src/lib/db.ts", "heightRatio": 1 }, files: [{ "name": "src/lib/db.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { env } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/dynamic/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "// or use the static env", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }) })] }), _jsx(_components.h4, { children: "Initialize the client [#migration-initialize-client-0-8]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0.7", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older-0.7", label: "0.7.x", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.svelte"], "active": "src/routes/+layout.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // make sure the supabase instance is initialized on the client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " import ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { startSupabaseSessionSync } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { page } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/stores'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { invalidateAll } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/navigation'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // this sets up automatic token refreshing", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " startSupabaseSessionSync", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " page,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " handleRefresh", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "invalidateAll", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(),", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "slot", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.8.0", label: "0.8.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.svelte"], "active": "src/routes/+layout.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabaseClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { invalidate } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/navigation'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { onMount } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'svelte'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " onMount", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "subscription", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "onAuthStateChange", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " invalidate", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'supabase:auth'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " subscription.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "unsubscribe", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "slot", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }) })] }), _jsx(_components.h4, { children: "Set up hooks [#migration-set-up-hooks-0-8]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0-7", queryGroup: "migration-version", children: [_jsxs(TabPanel, { id: "older-0-7", label: "0.7.x", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.ts"], "active": "src/hooks.server.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// make sure the supabase instance is initialized on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { dev } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/environment'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { auth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit/server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "auth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Optional" }), " ", _jsx(_components.em, { children: "if using additional handle methods" })] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.ts"], "active": "src/hooks.server.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// make sure the supabase instance is initialized on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { dev } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/environment'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { auth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit/server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { sequence } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit/hooks'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "sequence", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "auth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(), yourHandler)", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "0.8.0", label: "0.8.0", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.ts"], "active": "src/hooks.server.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// make sure the supabase instance is initialized on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.client.ts"], "active": "src/hooks.client.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.client.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// make sure the supabase instance is initialized on the client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }], "lang": "ts" }, "annotations": [] }] })] })] }), _jsx(_components.h4, { children: "Typings [#migration-typings-0-8]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0-7", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older-0-7", label: "0.7.x", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/app.d.ts"], "active": "src/app.d.ts", "heightRatio": 1 }, files: [{ "name": "src/app.d.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "/// <", "props": { "style": { "color": "var(--ch-1)" } } }, { "content": "reference ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "types", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"@sveltejs/kit\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// See https://kit.svelte.dev/docs/types#app", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// for information about these interfaces", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// and what to do when importing types", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "declare namespace ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "App", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SupabaseSession", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SupabaseSession", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Error {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // interface Platform {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.8.0", label: "0.8.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/app.d.ts"], "active": "src/app.d.ts", "heightRatio": 1 }, files: [{ "name": "src/app.d.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "/// <", "props": { "style": { "color": "var(--ch-1)" } } }, { "content": "reference ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "types", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"@sveltejs/kit\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// See https://kit.svelte.dev/docs/types#app", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// for information about these interfaces", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// and what to do when importing types", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "declare namespace ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "App", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Supabase", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'./DatabaseDefinitions'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " SchemaName", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Locals {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SupabaseSession", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Error {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // interface Platform {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) })] }), _jsxs(_components.h4, { children: [_jsx(_components.code, { children: "withPageAuth" }), " [#migration-with-page-auth-0-8]"] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0-7", queryGroup: "migration-version", children: [_jsxs(TabPanel, { id: "older-0-7", label: "0.7.x", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/protected-route/+page.svelte"], "active": "src/routes/protected-route/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/protected-route/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PageData } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } = ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "div", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">Protected content for {user.email}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">server-side fetched data with RLS:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(tableData, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">user:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/protected-route/+page.ts"], "active": "src/routes/protected-route/+page.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/protected-route/+page.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { withAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PageLoad } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageLoad ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "withAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSupabaseClient", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session.user) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSupabaseClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "().", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { tableData, user: session.user }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "0.8.0", label: "0.8.0", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/protected-route/+page.svelte"], "active": "src/routes/protected-route/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/protected-route/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " /** ", "props": { "style": { "color": "var(--ch-1)" } } }, { "content": "@type ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "{import('./$types').PageData}", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ({ user, tableData } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Protected content for ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(tableData, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/protected-route/+page.ts"], "active": "src/routes/protected-route/+page.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/protected-route/+page.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// src/routes/profile/+page.ts", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PageLoad } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { getSupabase } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageLoad ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSupabase", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user: session.user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " tableData,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] })] }), _jsxs(_components.h4, { children: [_jsx(_components.code, { children: "withApiAuth" }), " [#migration-with-api-auth-0-8]"] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older-0-7", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older-0-7", label: "0.7.x", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/api/protected-route/+server.ts"], "active": "src/routes/api/protected-route/+server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/api/protected-route/+server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { RequestHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { withAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json, redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "TestTable", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " id", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " created_at", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "RequestHandler ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "withAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSupabaseClient", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session.user) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSupabaseClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "().", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "TestTable", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ data })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.8.0", label: "0.8.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/api/protected-route/+server.ts"], "active": "src/routes/api/protected-route/+server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/api/protected-route/+server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { RequestHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { getSupabase } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json, redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "RequestHandler ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSupabase", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(event)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ data })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) })] }), _jsx(_components.h3, { children: "Migrate from 0.6.11 and below to 0.7.0 [#migration-0-7]" }), _jsx(_components.p, { children: "There are numerous breaking changes in the latest 0.7.0 version of this library." }), _jsx(_components.h4, { children: "Environment variable prefix" }), _jsxs(_components.p, { children: ["The environment variable prefix is now ", _jsx(_components.code, { children: "PUBLIC_" }), " instead of ", _jsx(_components.code, { children: "VITE_" }), " (e.g., ", _jsx(_components.code, { children: "VITE_SUPABASE_URL" }), " is now ", _jsx(_components.code, { children: "PUBLIC_SUPABASE_URL" }), ")."] }), _jsx(_components.h4, { children: "Set up the Supabase client [#migration-set-up-supabase-client-0-7]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older", label: "0.6.11 and below", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/lib/db.ts"], "active": "src/lib/db.ts", "heightRatio": 1 }, files: [{ "name": "src/lib/db.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createSupabaseClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createSupabaseClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "meta", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "VITE_SUPABASE_URL ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "as ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "meta", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "VITE_SUPABASE_ANON_KEY ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "as ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": ");", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabaseClient };", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.7.0", label: "0.7.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/lib/db.ts"], "active": "src/lib/db.ts", "heightRatio": 1 }, files: [{ "name": "src/lib/db.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { setupSupabaseHelpers } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { dev } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/environment'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { env } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$env/dynamic/public'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "// or use the static env", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " persistSession: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " autoRefreshToken: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "setupSupabaseHelpers", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabaseClient,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " cookieOptions: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " secure: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "dev,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] }) })] }), _jsx(_components.h4, { children: "Initialize the client [#migration-initialize-client-0-7]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older", label: "0.6.11 and below", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/__layout.svelte"], "active": "src/routes/__layout.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/__layout.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/stores'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabaseClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { SupaAuthHelper } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-svelte'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SupaAuthHelper ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "} {", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "slot", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "0.7.0", label: "0.7.0", children: [_jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "@supabase/auth-helpers-svelte" }), " library is no longer required as the ", _jsx(_components.code, { children: "@supabase/auth-helpers-sveltekit" }), " library handles all the client-side code."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+layout.svelte"], "active": "src/routes/+layout.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/+layout.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // make sure the supabase instance is initialized on the client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " import ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { startSupabaseSessionSync } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { page } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/stores'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { invalidateAll } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/navigation'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // this sets up automatic token refreshing", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " startSupabaseSessionSync", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " page,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " handleRefresh", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "invalidateAll", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(),", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "slot", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] })] })] }), _jsx(_components.h4, { children: "Set up hooks [#migration-set-up-hooks-0-7]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older", label: "0.6.11 and below", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.ts"], "active": "src/hooks.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { handleAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { GetSession, Handle } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { sequence } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit/hooks'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Handle ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "sequence", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "...", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "())", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GetSession ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "event", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "accessToken", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "error", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " event.locals", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " accessToken,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "0.7.0", label: "0.7.0", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.ts"], "active": "src/hooks.server.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// make sure the supabase instance is initialized on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { dev } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/environment'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { auth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit/server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "auth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Optional" }), " ", _jsx(_components.em, { children: "if using additional handle methods" })] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/hooks.server.ts"], "active": "src/hooks.server.ts", "heightRatio": 1 }, files: [{ "name": "src/hooks.server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// make sure the supabase instance is initialized on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$lib/db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { dev } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/environment'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { auth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit/server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { sequence } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit/hooks'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handle ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "sequence", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "auth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(), yourHandler)", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] })] }), _jsx(_components.h4, { children: "Typings [#migration-typings-0-7]" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older", label: "0.6.11 and below", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/app.d.ts"], "active": "src/app.d.ts", "heightRatio": 1 }, files: [{ "name": "src/app.d.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "/// <", "props": { "style": { "color": "var(--ch-1)" } } }, { "content": "reference ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "types", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"@sveltejs/kit\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// See https://kit.svelte.dev/docs/types#app", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// for information about these interfaces", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "declare namespace ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "App", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "UserSession", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "User", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " accessToken", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "?: ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Locals ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "extends ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "UserSession", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "ApiError", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Session ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "extends ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "UserSession", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " {}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Platform {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // interface Stuff {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.7.0", label: "0.7.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/app.d.ts"], "active": "src/app.d.ts", "heightRatio": 1 }, files: [{ "name": "src/app.d.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "/// <", "props": { "style": { "color": "var(--ch-1)" } } }, { "content": "reference ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "types", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"@sveltejs/kit\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// See https://kit.svelte.dev/docs/types#app", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// for information about these interfaces", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "// and what to do when importing types", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "declare namespace ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "App", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SupabaseSession", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SupabaseSession", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // interface Error {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // interface Platform {}", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) })] }), _jsx(_components.h4, { children: "Check the user on the client" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older", label: "0.6.11 and below", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/index.svelte"], "active": "src/routes/index.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/index.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { session } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/stores'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "{#", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "if !", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "$session.user}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "h1", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">I am not logged in", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "{:", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "else", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "h1", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Welcome ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "$session.user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">I am logged in!", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "{/", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.7.0", label: "0.7.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/+page.svelte"], "active": "src/routes/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { page } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'$app/stores'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "{#", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "if !", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "$page.data.session.user}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "h1", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">I am not logged in", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "{:", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "else", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "h1", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Welcome ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "$page.data.session.user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">I am logged in!", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "{/", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }) })] }), _jsx(_components.h4, { children: _jsx(_components.code, { children: "withPageAuth" }) }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older", label: "0.6.11 and below", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/protected-route.svelte"], "active": "src/routes/protected-route.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/protected-route.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "context", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"module\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabaseServerClient, withPageAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Load } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./__types/protected-page'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Load ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " withPageAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user: session.user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(session.accessToken).", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { props: { data, user: session.user } }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " user", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Protected content for ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">server-side fetched data with RLS:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">user:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "0.7.0", label: "0.7.0", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/protected-route/+page.svelte"], "active": "src/routes/protected-route/+page.svelte", "heightRatio": 1 }, files: [{ "name": "src/routes/protected-route/+page.svelte", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "script ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "lang", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "\"ts\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PageData } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " export let", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " data", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageData", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": " $", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " } = ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "div", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">Protected content for {user.email}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">server-side fetched data with RLS:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(tableData, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">user:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "svelte" }, "annotations": [] }] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/protected-route/+page.ts"], "active": "src/routes/protected-route/+page.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/protected-route/+page.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { withAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { PageLoad } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "load", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "PageLoad ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "withAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSupabaseClient", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session.user) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "tableData", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSupabaseClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "().", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { tableData, user: session.user }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] })] })] }), _jsx(_components.h4, { children: _jsx(_components.code, { children: "withApiAuth" }) }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "older", queryGroup: "migration-version", children: [_jsx(TabPanel, { id: "older", label: "0.6.11 and below", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/api/protected-route.ts"], "active": "src/routes/api/protected-route.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/api/protected-route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { supabaseServerClient, withApiAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { RequestHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./__types/protected-route'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "TestTable", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " id", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " created_at", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GetOutput", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "TestTable", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "[]", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "RequestHandler", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "GetOutput", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "> ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "locals", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " withApiAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ user: locals.user }, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Run queries with RLS on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request).", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " status: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "200", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " body: { data },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "0.7.0", label: "0.7.0", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["src/routes/api/protected-route/+server.ts"], "active": "src/routes/api/protected-route/+server.ts", "heightRatio": 1 }, files: [{ "name": "src/routes/api/protected-route/+server.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { RequestHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'./$types'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { withAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-sveltekit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json, redirect } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@sveltejs/kit'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "interface ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "TestTable", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " id", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " created_at", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "string", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "RequestHandler ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "withAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSupabaseClient", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session.user) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "303", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ");", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getSupabaseClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " .", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "TestTable", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " .", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ");", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ data });", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": ");", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }) })] }), _jsx(_components.h2, { children: "Additional links" }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/supabase/auth-helpers", children: "Auth Helpers Source code" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/supabase/auth-helpers/tree/main/examples/sveltekit", children: "SvelteKit example" }) }), "\n"] })] }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { chCodeConfig, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Supabase Auth with SvelteKit