/*@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", strong: "strong", h3: "h3", h4: "h4" }, _provideComponents(), props.components), {Admonition, Accordion, Tabs, TabPanel, 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 (!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: ["The ", _jsx(_components.code, { children: "auth-helpers" }), " package has been replaced with the ", _jsx(_components.code, { children: "@supabase/ssr" }), " package. We recommend setting up Auth for your Next.js app with ", _jsx(_components.code, { children: "@supabase/ssr" }), " instead. See the ", _jsx(_components.a, { href: "/docs/guides/auth/server-side/nextjs?router=pages", children: "Next.js Server-Side Auth guide" }), " to learn how."] }) }), "\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 Next.js applications using the pages directory." }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["Note: As of ", _jsx(_components.a, { href: "https://nextjs.org/blog/next-13-4", children: "Next.js 13.4" }), ", the App Router has reached stable status. This is now the recommended path for new Next.js app. Check out our guide on using ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs", children: "Auth Helpers with the Next.js App Directory" }), "."] }) }), _jsx(_components.h2, { children: "Install the Next.js 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-nextjs @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: ["Node.js: ", _jsx(_components.code, { children: "^10.13.0 || >=12.0.0" })] }), "\n", _jsxs(_components.li, { children: ["Next.js: ", _jsx(_components.code, { children: ">=10" })] }), "\n"] }), _jsxs(_components.p, { children: ["Additionally, install the ", _jsx(_components.strong, { children: "React Auth Helpers" }), " for components and hooks that can be used across all React-based frameworks."] }), _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-react", "props": { "style": { "color": "var(--ch-8)" } } }] }], "lang": "sh" }, "annotations": [] }] }), _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.local" }), " file. See an ", _jsx(_components.a, { href: "https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example", children: "example" }), "."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [".env.local"], "active": ".env.local", "heightRatio": 1 }, files: [{ "name": ".env.local", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "NEXT_PUBLIC_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": "NEXT_PUBLIC_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.h2, { children: "Basic setup" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsxs(TabPanel, { id: "js", label: "JavaScript", children: [_jsxs(_components.p, { children: ["Wrap your ", _jsx(_components.code, { children: "pages/_app.js" }), " component with the ", _jsx(_components.code, { children: "SessionContextProvider" }), " component:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/_app.js"], "active": "pages/_app.js", "heightRatio": 1 }, files: [{ "name": "pages/_app.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesBrowserClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { SessionContextProvider } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { 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": "function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "MyApp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Component", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pageProps", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": " }) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Create a new supabase browser client on every first render.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createPagesBrowserClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "())", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SessionContextProvider", "props": { "style": { "color": "var(--ch-6)" } } }] }, { "tokens": [{ "content": " supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " initialSession", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "pageProps.initialSession", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " >", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Component ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "{...", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "pageProps", "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)" } } }] }, { "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: ["Wrap your ", _jsx(_components.code, { children: "pages/_app.tsx" }), " component with the ", _jsx(_components.code, { children: "SessionContextProvider" }), " component:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/_app.tsx"], "active": "pages/_app.tsx", "heightRatio": 1 }, files: [{ "name": "pages/_app.tsx", "mark": "2,8", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " AppProps } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/app'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesBrowserClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { SessionContextProvider, Session } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { 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": "function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "MyApp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " Component", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " pageProps", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "AppProps", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "<{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " initialSession", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Session", "props": { "style": { "color": "var(--ch-3)" } } }] }, { "tokens": [{ "content": "}>) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Create a new supabase browser client on every first render.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createPagesBrowserClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "())", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "SessionContextProvider", "props": { "style": { "color": "var(--ch-6)" } } }] }, { "tokens": [{ "content": " supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " initialSession", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "pageProps.initialSession", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " >", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Component ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "{...", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "pageProps", "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)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "MyApp", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [{ "focus": "2,8", "Component": CH.annotations.mark }] }] })] })] }), _jsxs(_components.p, { children: ["You can now determine if a user is authenticated by checking that the ", _jsx(_components.code, { children: "user" }), " object returned by the ", _jsx(_components.code, { children: "useUser()" }), " hook is defined."] }), _jsx(_components.h3, { children: "Code Exchange API route" }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "Code Exchange" }), " API 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 Next.js 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: "pages/api/auth/callback.js" }), " and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/api/auth/callback.js"], "active": "pages/api/auth/callback.js", "heightRatio": 1 }, files: [{ "name": "pages/api/auth/callback.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextApiHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handler ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "res", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "code", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " req.query", "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": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ req, res })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "exchangeCodeForSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "String", "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": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "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": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handler", "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: "pages/api/auth/callback.ts" }), " and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/api/auth/callback.ts"], "active": "pages/api/auth/callback.ts", "heightRatio": 1 }, files: [{ "name": "pages/api/auth/callback.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextApiHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handler", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "NextApiHandler ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "res", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "code", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " req.query", "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": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ req, res })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "exchangeCodeForSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "String", "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": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "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": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handler", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] })] })] }), _jsx(_components.h2, { children: "Usage with TypeScript" }), _jsxs(_components.p, { children: ["You can pass types that were ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support#generating-types", children: "generated with the Supabase CLI" }), " to the Supabase Client to get enhanced type safety and auto completion:"] }), _jsx(_components.h3, { children: "Browser client" }), _jsx(_components.p, { children: "Creating a new supabase client object:" }), _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": " { createPagesBrowserClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'../database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "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": "createPagesBrowserClient", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(_components.p, { children: "Retrieving a supabase client object from the SessionContext:" }), _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": " { useSupabaseClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'../database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "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": "useSupabaseClient", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(_components.h3, { children: "Server client" }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// Creating a new supabase server client object (e.g. in API route):", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextApiRequest, NextApiResponse } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "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": "'types_db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextApiRequest, res", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextApiResponse) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseServerClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createPagesServerClient", "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": " req,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " res,", "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": "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": " supabaseServerClient.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "status", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "200", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ name: user?.name ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "?? ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "''", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(_components.h2, { children: "Client-side data fetching with RLS" }), _jsxs(_components.p, { children: ["For ", _jsx(_components.a, { href: "/docs/learn/auth-deep-dive/auth-row-level-security", children: "row level security" }), " to work properly when fetching data client-side, you need to make sure to use the ", _jsx(_components.code, { children: "supabaseClient" }), " from the ", _jsx(_components.code, { children: "useSupabaseClient" }), " hook and only run your query once the user is defined client-side in the ", _jsx(_components.code, { children: "useUser()" }), " hook:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "mark": "10:17", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Auth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-ui-react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ThemeSupa } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-ui-shared'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { useUser, useSupabaseClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-react'", "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": "const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LoginPage ", "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": "supabaseClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useSupabaseClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "useUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setData", "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)" } } }] }, { "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": " async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "loadData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-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": " setData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Only run query once user is logged in.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (user) ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "loadData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }, [user])", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user)", "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)" } } }, { "content": "Auth", "props": { "style": { "color": "var(--ch-6)" } } }] }, { "tokens": [{ "content": " redirectTo", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"http://localhost:3000/\"", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " appearance", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "{ theme: ThemeSupa }", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " providers", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "[", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'google'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'github'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "]", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " socialLayout", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"horizontal\"", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": "() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabaseClient.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signOut", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Sign out", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">user:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">client-side data fetching with RLS", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "export default ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "LoginPage", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [{ "focus": "10:17", "Component": CH.annotations.mark }] }] }), _jsx(_components.h2, { children: "Server-side rendering (SSR)" }), _jsx(_components.p, { children: "Create a server supabase client to retrieve the logged in user's session:" }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/profile.js"], "active": "pages/profile.js", "heightRatio": 1 }, files: [{ "name": "pages/profile.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Profile", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ user }) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Hello ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.name", "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)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getServerSideProps ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "ctx", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(ctx)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a user", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " destination: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " permanent: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "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: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsx(_components.h2, { children: "Server-side data fetching with RLS" }), _jsxs(_components.p, { children: ["You can use the server supabase client to run ", _jsx(_components.a, { href: "/docs/learn/auth-deep-dive/auth-row-level-security", children: "row level security" }), " authenticated queries server-side:"] }), _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": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedPage", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ user, data }) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "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": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Protected content for ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getServerSideProps ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "ctx", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(ctx)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " destination: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " permanent: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Run queries with RLS on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'users'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " props: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data: data ", "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)" } } }] }, { "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": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { User, createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { GetServerSidePropsContext } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedPage", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ user, data }", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " User; data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "any", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "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": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Protected content for ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getServerSideProps ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "ctx", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GetServerSidePropsContext", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(ctx)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " destination: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " permanent: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Run queries with RLS on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'users'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " props: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data: data ", "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)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) })] }), _jsxs(_components.h2, { children: ["Server-side data fetching to OAuth APIs using ", _jsx(_components.code, { children: "provider token" }), " ", `#oauth-provider-token`] }), _jsxs(_components.p, { children: ["When using third-party auth providers, sessions are initiated with an additional ", _jsx(_components.code, { children: "provider_token" }), " field which is persisted in the auth cookie and can be accessed within the session object. The ", _jsx(_components.code, { children: "provider_token" }), " can be used to make API requests to the OAuth provider's API endpoints on behalf of the logged-in user."] }), _jsxs(_components.p, { children: ["Note that the server accesses data on the session object returned by ", _jsx(_components.code, { children: "auth.getSession" }), ". This data should normally not be trusted, because it is read from the local storage medium. It is not revalidated against the Auth server unless the session is expired, which means the sender can tamper with it."] }), _jsxs(_components.p, { children: ["In this case, the third-party API will validate the ", _jsx(_components.code, { children: "provider_token" }), ", and a malicious actor is unable to forge one."] }), _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": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedPage", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ user, allRepos }) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "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": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Protected content for ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Data fetched with provider token:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(allRepos, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">user:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getServerSideProps ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "ctx", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(ctx)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " destination: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " permanent: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Retrieve provider_token & logged in user's third-party id from metadata", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "provider_token", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " session", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "userId ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " user.user_metadata.user_name", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "allRepos ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "fetch", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`https://api.github.com/search/repositories?q=user:${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "userId", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " method: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'GET'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " headers: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " Authorization: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`token ${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "provider_token", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " ).", "props": { "style": { "color": "var(--ch-4)" } } }, { "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": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { props: { user, allRepos } }", "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": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { User, createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { GetServerSidePropsContext } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedPage", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ user, allRepos }", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " User; allRepos", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "any", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " }) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "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": "div", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Protected content for ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user.email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Data fetched with provider token:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(allRepos, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">user:", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "pre", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "JSON", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "stringify", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getServerSideProps ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "ctx", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GetServerSidePropsContext", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(ctx)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "session", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "session)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " destination: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " permanent: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Retrieve provider_token & logged in user's third-party id from metadata", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "provider_token", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " session", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "userId ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " user.user_metadata.user_name", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "allRepos ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "fetch", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`https://api.github.com/search/repositories?q=user:${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "userId", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " method: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'GET'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " headers: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " Authorization: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`token ${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "provider_token", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " ).", "props": { "style": { "color": "var(--ch-4)" } } }, { "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": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { props: { user, allRepos } }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) })] }), _jsx(_components.h2, { children: "Protecting API routes" }), _jsx(_components.p, { children: "Create a server supabase client to retrieve the logged in user's session:" }), _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": ["pages/api/protected-route.js"], "active": "pages/api/protected-route.js", "heightRatio": 1 }, files: [{ "name": "pages/api/protected-route.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedRoute ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "res", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ req, res })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a user", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "status", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "401", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'not_authenticated'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " description: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'The user does not have an active session or is not authenticated'", "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": " // Run queries with RLS on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedRoute", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "ts", label: "TypeScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/api/protected-route.ts"], "active": "pages/api/protected-route.ts", "heightRatio": 1 }, files: [{ "name": "pages/api/protected-route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextApiHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedRoute", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "NextApiHandler ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "res", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ req, res })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "status", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "401", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'not_authenticated'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " description: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'The user does not have an active session or is not authenticated'", "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": " // Run queries with RLS on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedRoute", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) })] }), _jsx(_components.h2, { children: "Auth with Next.js middleware" }), _jsxs(_components.p, { children: ["As an alternative to protecting individual pages you can use a ", _jsx(_components.a, { href: "https://nextjs.org/docs/middleware", children: "Next.js Middleware" }), " to protect the entire directory or those that match the config object. In the following example, all requests to ", _jsx(_components.code, { children: "/middleware-protected/*" }), " will check whether a user is signed in, if successful the request will be forwarded to the destination route, otherwise the user will be redirected:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["middleware.ts"], "active": "middleware.ts", "heightRatio": 1 }, files: [{ "name": "middleware.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createMiddlewareClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextResponse } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextRequest } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "middleware", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "NextRequest", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // We need to create a response and hand it to the supabase client to be able to modify the response headers.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "res ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "next", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Create authenticated Supabase Client.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createMiddlewareClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ req, res })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check auth condition", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (user?.email?.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "endsWith", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@gmail.com'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Authentication successful, forward request to protected route.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " res", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Auth condition not met, redirect to home page.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "redirectUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " req.nextUrl.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "clone", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirectUrl.pathname ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " redirectUrl.searchParams.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "set", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`redirectedFrom`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", req.nextUrl.pathname)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(redirectUrl)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "config ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " matcher: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/middleware-protected/:path*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(_components.h2, { children: "Migration guide" }), _jsx(_components.h3, { children: "Migrating to v0.7.X" }), _jsx(_components.h4, { children: "PKCE Auth flow" }), _jsxs(_components.p, { children: ["PKCE is the new server-side auth flow implemented by the Next.js Auth Helpers. It requires a new API route for ", _jsx(_components.code, { children: "/api/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/nextjs-pages#code-exchange-api-route", children: "Code Exchange API 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": "supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'jon@example.com'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'sup3rs3cur3'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'http://localhost:3000/auth/callback'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "})", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsx(_components.h4, { children: "Deprecated functions" }), _jsxs(_components.p, { children: ["With v0.7.x of the Next.js Auth Helpers a new naming convention has been implemented for createClient functions. The ", _jsx(_components.code, { children: "createBrowserSupabaseClient" }), " and ", _jsx(_components.code, { children: "createServerSupabaseClient" }), " functions have been marked as deprecated, and will be removed in a future version of the Auth Helpers."] }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "createBrowserSupabaseClient" }), " has been replaced with ", _jsx(_components.code, { children: "createPagesBrowserClient" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "createServerSupabaseClient" }), " has been replaced with ", _jsx(_components.code, { children: "createPagesServerClient" })] }), "\n"] }), _jsx(_components.h3, { children: "Migrating to v0.5.X" }), _jsx(_components.p, { children: "To make these helpers more flexible as well as more maintainable and easier to upgrade for new versions of Next.js, we're stripping them down to the most useful part which is managing the cookies and giving you an authenticated supabase-js client in any environment (client, server, middleware/edge)." }), _jsxs(_components.p, { children: ["Therefore we're marking the ", _jsx(_components.code, { children: "withApiAuth" }), ", ", _jsx(_components.code, { children: "withPageAuth" }), ", and ", _jsx(_components.code, { children: "withMiddlewareAuth" }), " higher order functions as deprecated and they will be removed in the next ", _jsx(_components.strong, { children: "minor" }), " release (v0.6.X)."] }), _jsx(_components.p, { children: "Please follow the steps below to update your API routes, pages, and middleware handlers. Thanks!" }), _jsxs(_components.h4, { children: [_jsx(_components.code, { children: "withApiAuth" }), " deprecated!"] }), _jsxs(_components.p, { children: ["Use ", _jsx(_components.code, { children: "createPagesServerClient" }), " within your ", _jsx(_components.code, { children: "NextApiHandler" }), ":"] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "before", queryGroup: "migration-side", children: [_jsx(TabPanel, { id: "before", label: "Before", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/api/protected-route.ts"], "active": "pages/api/protected-route.ts", "heightRatio": 1 }, files: [{ "name": "pages/api/protected-route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { withApiAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "withApiAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedRoute", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(req, res, supabase) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Run queries with RLS on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-3)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "after", label: "After", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/api/protected-route.ts"], "active": "pages/api/protected-route.ts", "heightRatio": 1 }, files: [{ "name": "pages/api/protected-route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextApiHandler } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedRoute", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "NextApiHandler ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "res", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ req, res })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "status", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "401", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " error: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'not_authenticated'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " description: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'The user does not have an active session or is not authenticated'", "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": " // Run queries with RLS on the server", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'test'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'*'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(data)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ProtectedRoute", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) })] }), _jsxs(_components.h4, { children: [_jsx(_components.code, { children: "withPageAuth" }), " deprecated!"] }), _jsxs(_components.p, { children: ["Use ", _jsx(_components.code, { children: "createPagesServerClient" }), " within ", _jsx(_components.code, { children: "getServerSideProps" }), ":"] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "before", queryGroup: "migration-side", children: [_jsx(TabPanel, { id: "before", label: "Before", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/profile.tsx"], "active": "pages/profile.tsx", "heightRatio": 1 }, files: [{ "name": "pages/profile.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { withPageAuth, User } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Profile", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ user }", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " User }) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "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": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getServerSideProps ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "withPageAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ redirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "after", label: "After", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["pages/profile.js"], "active": "pages/profile.js", "heightRatio": 1 }, files: [{ "name": "pages/profile.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createPagesServerClient, User } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { GetServerSidePropsContext } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Profile", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ user }", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { user", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " User }) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "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": "(user, ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "2", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getServerSideProps ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "ctx", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GetServerSidePropsContext", "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": " // Create authenticated Supabase Client", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createPagesServerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(ctx)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "user)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirect: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " destination: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " permanent: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "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: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " initialSession: session,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " user: session.user,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) })] }), _jsxs(_components.h4, { children: [_jsx(_components.code, { children: "withMiddlewareAuth" }), " deprecated!"] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "before", queryGroup: "migration-side", children: [_jsx(TabPanel, { id: "before", label: "Before", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["middleware.ts"], "active": "middleware.ts", "heightRatio": 1 }, files: [{ "name": "middleware.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { withMiddlewareAuth } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "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": "middleware ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "withMiddlewareAuth", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " authGuard: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " isPermitted", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "user", "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": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " user.email?.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "endsWith", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@gmail.com'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "?? ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/insufficient-permissions'", "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": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "config ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " matcher: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/middleware-protected'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "after", label: "After", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["middleware.ts"], "active": "middleware.ts", "heightRatio": 1 }, files: [{ "name": "middleware.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createMiddlewareClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-nextjs'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextResponse } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextRequest } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "middleware", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "NextRequest", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // We need to create a response and hand it to the supabase client to be able to modify the response headers.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "res ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "next", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Create authenticated Supabase Client.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "createMiddlewareClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ req, res })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check if we have a session", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " data", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "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": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Check auth condition", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (user?.email?.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "endsWith", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'@gmail.com'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Authentication successful, forward request to protected route.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " res", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Auth condition not met, redirect to home page.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "redirectUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " req.nextUrl.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "clone", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " redirectUrl.pathname ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'/'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " redirectUrl.searchParams.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "set", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`redirectedFrom`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", req.nextUrl.pathname)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(redirectUrl)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "config ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " matcher: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'/middleware-protected'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) })] }), _jsx(_components.h3, { children: "Migrating to v0.4.X and supabase-js v2" }), _jsxs(_components.p, { children: ["With the update to ", _jsx(_components.code, { children: "supabase-js" }), " v2 the ", _jsx(_components.code, { children: "auth" }), " API routes are no longer required, therefore you can go ahead and delete your ", _jsx(_components.code, { children: "auth" }), " directory under the ", _jsx(_components.code, { children: "/pages/api/" }), " directory. Please refer to the ", _jsx(_components.a, { href: "/docs/reference/javascript/v1/upgrade-guide", children: "v2 migration guide" }), " for the full set of changes within supabase-js."] }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "/api/auth/logout" }), " API route has been removed, please use the ", _jsx(_components.code, { children: "signout" }), " method instead:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button", "props": { "style": { "color": "var(--ch-6)" } } }] }, { "tokens": [{ "content": " onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "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": " supabaseClient.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signOut", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " router.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "push", "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": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " Logout", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "supabaseClient" }), " and ", _jsx(_components.code, { children: "supabaseServerClient" }), " have been removed in favor of the ", _jsx(_components.code, { children: "createPagesBrowserClient" }), " and ", _jsx(_components.code, { children: "createPagesServerClient" }), " methods. This allows you to provide the CLI-generated types to the client:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "// client-side", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "'types_db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createPagesBrowserClient", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "// server-side API route", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { NextApiRequest, NextApiResponse } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next'", "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": "'types_db'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (req", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextApiRequest, res", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextApiResponse) ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabaseServerClient ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createPagesServerClient", "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": " req,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " res,", "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": "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": " supabaseServerClient.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getUser", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " res.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "status", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "200", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ name: user?.name ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "?? ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "''", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "UserProvider" }), " has been replaced by the ", _jsx(_components.code, { children: "SessionContextProvider" }), ". Make sure to wrap your ", _jsx(_components.code, { children: "pages/_app.js" }), " component with the ", _jsx(_components.code, { children: "SessionContextProvider" }), ". Then, throughout your application you can use the ", _jsx(_components.code, { children: "useSessionContext" }), " hook to get the ", _jsx(_components.code, { children: "session" }), " and the ", _jsx(_components.code, { children: "useSupabaseClient" }), " hook to get an authenticated ", _jsx(_components.code, { children: "supabaseClient" }), "."] }), "\n", _jsxs(_components.li, { children: ["The ", _jsx(_components.code, { children: "useUser" }), " hook now returns the ", _jsx(_components.code, { children: "user" }), " object or ", _jsx(_components.code, { children: "null" }), "."] }), "\n", _jsxs(_components.li, { children: ["Usage with TypeScript: You can pass types that were ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support#generating-types", children: "generated with the Supabase CLI" }), " to the Supabase Client to get enhanced type safety and auto completion:"] }), "\n"] }), _jsx(_components.p, { children: "Creating a new supabase client object:" }), _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": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'../database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "supabaseClient", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useState", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createPagesBrowserClient", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(_components.p, { children: "Retrieving a supabase client object from the SessionContext:" }), _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": " { useSupabaseClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/auth-helpers-react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'../database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "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": "useSupabaseClient", "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)" } } }] }], "lang": "tsx" }, "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 Next.js Pages Directory