/*@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", ul: "ul", li: "li", h3: "h3", blockquote: "blockquote", h4: "h4" }, _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: [_jsx(_components.p, { children: "This submodule provides convenience helpers for implementing user authentication in Remix applications." }), _jsx("div", { className: "video-container", children: _jsx("iframe", { src: "https://www.youtube-nocookie.com/embed/Viaed7XWCY8", frameBorder: "1", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["For a complete implementation example, check out ", _jsx(_components.a, { href: "https://egghead.io/courses/build-a-realtime-chat-app-with-remix-and-supabase-d36e2618", children: "this free egghead course" }), " or ", _jsx(_components.a, { href: "https://github.com/supabase/auth-helpers/tree/main/examples/remix", children: "this GitHub repo" }), "."] }) }), _jsx(_components.h2, { children: "Install the Remix helper library" }), _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-remix @supabase/supabase-js", "props": { "style": { "color": "var(--ch-8)" } } }] }], "lang": "sh" }, "annotations": [] }] }), _jsx(_components.p, { children: "This library supports the following tooling versions:" }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Remix: ", _jsx(_components.code, { children: ">=1.7.2" })] }), "\n"] }), _jsx(_components.h2, { children: "Set up environment variables" }), _jsxs(_components.p, { children: ["Retrieve your project URL and anon key in your project's ", _jsx(_components.a, { href: "https://supabase.com/dashboard/project/_/settings/api", children: "API settings" }), " in the Dashboard to set up the following environment variables. For local development you can set them in a ", _jsx(_components.code, { children: ".env" }), " file. See an ", _jsx(_components.a, { href: "https://github.com/supabase/auth-helpers/blob/main/examples/remix/.env.example", children: "example" }), "."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [".env"], "active": ".env", "heightRatio": 1 }, files: [{ "name": ".env", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "YOUR_SUPABASE_URL", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "YOUR_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-8)" } } }] }], "lang": "bash" }, "annotations": [] }] }), _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 Remix 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: "app/routes/auth.callback.jsx" }), " and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/routes/auth.callback.jsx"], "active": "app/routes/auth.callback.jsx", "heightRatio": 1 }, files: [{ "name": "app/routes/auth.callback.jsx", "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": "'@remix-run/node'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "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": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "url ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "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": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { request, response }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.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": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "redirect", "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": " headers: response.headers,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsxs(_components.p, { children: ["Create a new file at ", _jsx(_components.code, { children: "app/routes/auth.callback.tsx" }), " and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/routes/auth.callback.tsx"], "active": "app/routes/auth.callback.tsx", "heightRatio": 1 }, files: [{ "name": "app/routes/auth.callback.tsx", "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": "'@remix-run/node'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "'db_types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { LoaderFunctionArgs } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node'", "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": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LoaderFunctionArgs", "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": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "url ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "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": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerClient", "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": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { request, response }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.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": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "redirect", "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": " headers: response.headers,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Database" }), " is a TypeScript definitions file ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support#generating-types", children: "generated by the Supabase CLI" }), "."] }), "\n"] })] })] }), _jsx(_components.h2, { children: "Server-side" }), _jsxs(_components.p, { children: ["The Supabase client can now be used server-side - in loaders and actions - by calling the ", _jsx(_components.code, { children: "createServerClient" }), " function."] }), _jsx(_components.h3, { children: "Loader" }), _jsxs(_components.p, { children: ["Loader functions run on the server immediately before the component is rendered. They respond to all GET requests on a route. You can create an authenticated Supabase client by calling the ", _jsx(_components.code, { children: "createServerClient" }), " function and passing it your ", _jsx(_components.code, { children: "SUPABASE_URL" }), ", ", _jsx(_components.code, { children: "SUPABASE_ANON_KEY" }), ", and a ", _jsx(_components.code, { children: "Request" }), " and ", _jsx(_components.code, { children: "Response" }), "."] }), _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": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node' ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "// change this import to whatever runtime you are using", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "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": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // an empty response is required for the auth helpers", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // to set cookies to manage auth", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { request, response }", "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": " 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": " // in order for the set-cookie header to be set,", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " // headers must be returned as part of the loader response", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { data },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " headers: response.headers,", "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": "jsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["Supabase will set cookie headers to manage the user's auth session, therefore, the ", _jsx(_components.code, { children: "response.headers" }), " must be returned from the ", _jsx(_components.code, { children: "Loader" }), " function."] }) })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_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": " { json } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node' ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "// change this import to whatever runtime you are using", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { LoaderFunctionArgs } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node' ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "// change this import to whatever runtime you are using", "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": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LoaderFunctionArgs", "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": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { request, response }", "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": " 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": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { data },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " headers: response.headers,", "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": "jsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["Supabase will set cookie headers to manage the user's auth session, therefore, the ", _jsx(_components.code, { children: "response.headers" }), " must be returned from the ", _jsx(_components.code, { children: "Loader" }), " function."] }) })] })] }), _jsx(_components.h3, { children: "Action" }), _jsxs(_components.p, { children: ["Action functions run on the server and respond to HTTP requests to a route, other than GET - POST, PUT, PATCH, DELETE etc. You can create an authenticated Supabase client by calling the ", _jsx(_components.code, { children: "createServerClient" }), " function and passing it your ", _jsx(_components.code, { children: "SUPABASE_URL" }), ", ", _jsx(_components.code, { children: "SUPABASE_ANON_KEY" }), ", and a ", _jsx(_components.code, { children: "Request" }), " and ", _jsx(_components.code, { children: "Response" }), "."] }), _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": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node' ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "// change this import to whatever runtime you are using", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "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": "action ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "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": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { request, response }", "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": " 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": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { data },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " headers: response.headers,", "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": "jsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["Supabase will set cookie headers to manage the user's auth session, therefore, the ", _jsx(_components.code, { children: "response.headers" }), " must be returned from the ", _jsx(_components.code, { children: "Action" }), " function."] }) })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_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": " { json } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node' ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "// change this import to whatever runtime you are using", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ActionFunctionArgs } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node' ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "// change this import to whatever runtime you are using", "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": "action ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ActionFunctionArgs", "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": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "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": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { request, response }", "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": " 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": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " { data },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " headers: response.headers,", "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": "jsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["Supabase will set cookie headers to manage the user's auth session, therefore, the ", _jsx(_components.code, { children: "response.headers" }), " must be returned from the ", _jsx(_components.code, { children: "Action" }), " function."] }) })] })] }), _jsx(_components.h2, { children: "Session and user" }), _jsxs(_components.p, { children: ["You can determine if a user is authenticated by checking their session using the ", _jsx(_components.code, { children: "getSession" }), " function."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "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": " supabaseClient.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsx(_components.p, { children: "The session contains a user property. This is the user metadata saved, unencoded, to the local storage medium. It's unverified and can be tampered by the user, so don't use it for authorization or sensitive purposes." }), _jsx(GetSessionWarning, {}), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " session?.user", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsxs(_components.p, { children: ["Or, if you need trusted user data, you can call the ", _jsx(_components.code, { children: "getUser()" }), " function, which retrieves the trusted user data by making a request to the Supabase Auth server."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "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": "} ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsx(_components.h2, { children: "Client-side" }), _jsx(_components.p, { children: "We still need to use Supabase client-side for things like authentication and realtime subscriptions. Anytime we use Supabase client-side it needs to be a single instance." }), _jsx(_components.h3, { children: "Creating a singleton Supabase client" }), _jsx(_components.p, { children: "Since our environment variables are not available client-side, we need to plumb them through from the loader." }), _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": ["app/root.jsx"], "active": "app/root.jsx", "heightRatio": 1 }, files: [{ "name": "app/root.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "=", "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": "env ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " SUPABASE_URL: process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " SUPABASE_ANON_KEY: process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "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": " return ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ env })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["These may not be stored in ", _jsx(_components.code, { children: "process.env" }), " for environments other than Node."] }) }), _jsxs(_components.p, { children: ["Next, we call the ", _jsx(_components.code, { children: "useLoaderData" }), " hook in our component to get the ", _jsx(_components.code, { children: "env" }), " object."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.jsx"], "active": "app/root.jsx", "heightRatio": 1 }, files: [{ "name": "app/root.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "env", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useLoaderData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsx(_components.p, { children: "We then want to instantiate a single instance of a Supabase browser client, to be used across our client-side components." }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.jsx"], "active": "app/root.jsx", "heightRatio": 1 }, files: [{ "name": "app/root.jsx", "focus": "", "code": { "lines": [{ "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": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createBrowserClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "))", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsx(_components.p, { children: "And then we can share this instance across our application with Outlet Context." }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.jsx"], "active": "app/root.jsx", "heightRatio": 1 }, files: [{ "name": "app/root.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Outlet ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "context", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "{ supabase }", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.tsx"], "active": "app/root.tsx", "heightRatio": 1 }, files: [{ "name": "app/root.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " ({}", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LoaderFunctionArgs", "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": "env ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " SUPABASE_URL: process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " SUPABASE_ANON_KEY: process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "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": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ env })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["These may not be stored in ", _jsx(_components.code, { children: "process.env" }), " for environments other than Node."] }) }), _jsxs(_components.p, { children: ["Next, we call the ", _jsx(_components.code, { children: "useLoaderData" }), " hook in our component to get the ", _jsx(_components.code, { children: "env" }), " object."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.tsx"], "active": "app/root.tsx", "heightRatio": 1 }, files: [{ "name": "app/root.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "env", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useLoaderData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "typeof", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " loader>()", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(_components.p, { children: "We then want to instantiate a single instance of a Supabase browser client, to be used across our client-side components." }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.tsx"], "active": "app/root.tsx", "heightRatio": 1 }, files: [{ "name": "app/root.tsx", "focus": "", "code": { "lines": [{ "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": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " createBrowserClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">(env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(_components.p, { children: "And then we can share this instance across our application with Outlet Context." }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.tsx"], "active": "app/root.tsx", "heightRatio": 1 }, files: [{ "name": "app/root.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Outlet ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "context", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "{ supabase }", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] })] })] }), _jsx(_components.h3, { children: "Syncing server and client state" }), _jsx(_components.p, { children: "Since authentication happens client-side, we need to tell Remix to re-call all active loaders when the user signs in or out." }), _jsxs(_components.p, { children: ["Remix provides a hook ", _jsx(_components.code, { children: "useRevalidator" }), " that can be used to revalidate all loaders on the current route."] }), _jsx(_components.p, { children: "Now to determine when to submit a post request to this action, we need to compare the server and client state for the user's access token." }), _jsx(_components.p, { children: "Let's pipe that through from our loader." }), _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": ["app/root.jsx"], "active": "app/root.jsx", "heightRatio": 1 }, files: [{ "name": "app/root.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "env ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " SUPABASE_URL: process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " SUPABASE_ANON_KEY: process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "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": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "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": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " request,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " response,", "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": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " env,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": " headers: response.headers,", "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": "jsx" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "ts", label: "TypeScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.tsx"], "active": "app/root.tsx", "heightRatio": 1 }, files: [{ "name": "app/root.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LoaderFunctionArgs", "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": "env ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " SUPABASE_URL: process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " SUPABASE_ANON_KEY: process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "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": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "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": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ", process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " request,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " response,", "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": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " env,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": " headers: response.headers,", "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": "tsx" }, "annotations": [] }] }) })] }), _jsxs(_components.p, { children: ["And then use the revalidator, inside the ", _jsx(_components.code, { children: "onAuthStateChange" }), " hook."] }), _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": ["app/root.jsx"], "active": "app/root.jsx", "heightRatio": 1 }, files: [{ "name": "app/root.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "env", "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": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useLoaderData", "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": "revalidate", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useRevalidator", "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": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createBrowserClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "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": "serverAccessToken ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " session?.access_token", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "useEffect", "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?.access_token ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!==", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " serverAccessToken) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // server and client are out of sync.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " revalidate", "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": " 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": "}, [serverAccessToken, supabase, revalidate])", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "ts", label: "TypeScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/root.tsx"], "active": "app/root.tsx", "heightRatio": 1 }, files: [{ "name": "app/root.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "env", "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": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useLoaderData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "typeof", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " loader>()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "revalidate", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useRevalidator", "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": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabase", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " createBrowserClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">(env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "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": "serverAccessToken ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " session?.access_token", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "useEffect", "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": " (event ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!== ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'INITIAL_SESSION' ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "&&", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " session?.access_token ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!==", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " serverAccessToken) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // server and client are out of sync.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " revalidate", "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": " 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": "}, [serverAccessToken, supabase, revalidate])", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) })] }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["Check out ", _jsx(_components.a, { href: "https://github.com/supabase/auth-helpers/tree/main/examples/remix", children: "this repo" }), " for full implementation example"] }) }), _jsx(_components.h3, { children: "Authentication" }), _jsxs(_components.p, { children: ["Now we can use our outlet context to access our single instance of Supabase and use any of the ", _jsxs(_components.a, { href: "/docs/reference/javascript/auth-signup", children: ["supported authentication strategies from ", _jsx(_components.code, { children: "supabase-js" })] }), "."] }), _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": ["app/components/login.jsx"], "active": "app/components/login.jsx", "heightRatio": 1 }, files: [{ "name": "app/components/login.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Login", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "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": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useOutletContext", "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": "handleEmailLogin ", "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)" } } }, { "content": "'jon@supabase.com'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password: ", "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": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleGitHubLogin ", "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": "signInWithOAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " provider: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'github'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirectTo: ", "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)" } } }] }, { "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": "handleLogout ", "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": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "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": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleEmailLogin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Email Login", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleGitHubLogin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">GitHub Login", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleLogout", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Logout", "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": "jsx" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "ts", label: "TypeScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/components/login.tsx"], "active": "app/components/login.tsx", "heightRatio": 1 }, files: [{ "name": "app/components/login.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Login", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "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": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useOutletContext", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<{ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleEmailLogin ", "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)" } } }, { "content": "'jon@supabase.com'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password: ", "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": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleGitHubLogin ", "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": "signInWithOAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " provider: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'github'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirectTo: ", "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)" } } }] }, { "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": "handleLogout ", "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": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "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": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleEmailLogin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Email Login", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleGitHubLogin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">GitHub Login", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleLogout", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Logout", "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": "tsx" }, "annotations": [] }] }) })] }), _jsx(_components.h3, { children: "Subscribe to realtime events" }), _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": ["app/routes/realtime.jsx"], "active": "app/routes/realtime.jsx", "heightRatio": 1 }, files: [{ "name": "app/routes/realtime.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { useLoaderData, useOutletContext } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { useEffect, useState } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'react'", "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": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": "createServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " request,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " response,", "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": " supabase.", "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)" } } }, { "content": "select", "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": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ serverPosts: data ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "??", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [] }, { headers: response.headers })", "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 default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Index", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "serverPosts", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useLoaderData", "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": "posts", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setPosts", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(serverPosts)", "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": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useOutletContext", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " useEffect", "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": " setPosts", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(serverPosts)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }, [serverPosts])", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " useEffect", "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": "channel ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " .", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "channel", "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)" } } }, { "content": "on", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'postgres_changes'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", { event: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'INSERT'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", schema: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'public'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", table: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'posts'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " }, (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "payload", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " setPosts", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "([", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "...", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "posts, payload.new])", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " .", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "subscribe", "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)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "removeChannel", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(channel)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }, [supabase, posts, setPosts])", "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": "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": "(posts, ", "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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/routes/realtime.tsx"], "active": "app/routes/realtime.tsx", "heightRatio": 1 }, files: [{ "name": "app/routes/realtime.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { useLoaderData, useOutletContext } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { json } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { useEffect, useState } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { SupabaseClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-remix'", "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": "'db_types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "type ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Post ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "[", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'public'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "][", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Tables'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "][", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'posts'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "][", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Row'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "]", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { LoaderFunctionArgs } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@remix-run/node'", "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": "loader ", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LoaderFunctionArgs", "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": "response ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Response", "props": { "style": { "color": "var(--ch-5)" } } }, { "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": "createServerClient", "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": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " request,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " response,", "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": " { ", "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": "'posts'", "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)" } } }] }, { "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": "({ serverPosts: data ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "??", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [] }, { headers: response.headers })", "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 default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Index", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "serverPosts", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useLoaderData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "typeof", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " loader>()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "posts", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setPosts", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(serverPosts)", "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": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useOutletContext", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<{ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " useEffect", "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": " setPosts", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(serverPosts)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }, [serverPosts])", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " useEffect", "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": "channel ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " .", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "channel", "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)" } } }, { "content": "on", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'postgres_changes'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", { event: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'INSERT'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", schema: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'public'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", table: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'posts'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " }, (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "payload", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " setPosts", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "([", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "...", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "posts, payload.new ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "as ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Post", "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)" } } }, { "content": "subscribe", "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)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "removeChannel", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(channel)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }, [supabase, posts, setPosts])", "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": "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": "(posts, ", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsxs(_components.blockquote, { children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Database" }), " is a TypeScript definitions file ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support#generating-types", children: "generated by the Supabase CLI" }), "."] }), "\n"] })] })] }), _jsx(Admonition, { type: "tip", children: _jsxs(_components.p, { children: ["Ensure you have ", _jsx(_components.a, { href: "https://supabase.com/dashboard/project/_/database/publications", children: "enabled replication" }), " on the table you are subscribing to."] }) }), _jsx(_components.h2, { children: "Migration guide" }), _jsx(_components.h3, { children: "Migrating to v0.2.0" }), _jsx(_components.h4, { children: "PKCE Auth flow" }), _jsxs(_components.p, { children: ["PKCE is the new server-side auth flow implemented by the Remix Auth Helpers. It requires a new ", _jsx(_components.code, { children: "loader" }), " route 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/remix#code-exchange-route", children: "Code Exchange Route steps" }), " above to implement this route."] }), _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 API Route - ", _jsx(_components.code, { children: "/api/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": "supabaseClient.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": "jsx" }, "annotations": [] }] })] }) })] }); } 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 Remix