/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const chCodeConfig = { "staticMediaQuery": "not screen, (max-width: 768px)", "lineNumbers": true, "showCopyButton": true, "themeName": "supabase" }; function _createMdxContent(props) { const _components = Object.assign({ p: "p", code: "code", a: "a", h2: "h2", h3: "h3", h4: "h4", ul: "ul", li: "li" }, _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", 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: [_jsxs(_components.p, { children: ["The ", _jsx(_components.a, { href: "https://github.com/supabase/auth-helpers", children: "Next.js Auth Helpers package" }), " configures Supabase Auth to store the user's ", _jsx(_components.code, { children: "session" }), " in a ", _jsx(_components.code, { children: "cookie" }), ", rather than ", _jsx(_components.code, { children: "localStorage" }), ". This makes it available across the client and server of the App Router - ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#client-components", children: "Client Components" }), ", ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#server-components", children: "Server Components" }), ", ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#server-actions", children: "Server Actions" }), ", ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#route-handlers", children: "Route Handlers" }), " and ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#middleware", children: "Middleware" }), ". The ", _jsx(_components.code, { children: "session" }), " is automatically sent along with any requests to Supabase."] }), _jsx("div", { className: "video-container", children: _jsx("iframe", { src: "https://www.youtube-nocookie.com/embed/w3LD0Z73vgU", frameBorder: "1", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["If you are using the ", _jsx(_components.code, { children: "pages" }), " directory, check out ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs-pages", children: "Auth Helpers in Next.js Pages Directory" }), "."] }) }), _jsx(_components.h2, { children: "Install Next.js Auth helpers 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.h2, { children: "Declare environment variables" }), _jsxs(_components.p, { children: ["Retrieve your project's URL and anon key from your ", _jsx(_components.a, { href: "https://supabase.com/dashboard/project/_/settings/api", children: "API settings" }), ", and create a ", _jsx(_components.code, { children: ".env.local" }), " file with the following environment variables:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [".env.local"], "active": ".env.local", "heightRatio": 1 }, files: [{ "name": ".env.local", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "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: "Managing session with middleware" }), _jsx(_components.p, { children: "When using the Supabase client on the server, you must perform extra steps to ensure the user's auth session remains active. Since the user's session is tracked in a cookie, we need to read this cookie and update it if necessary." }), _jsx(_components.p, { children: "Next.js Server Components allow you to read a cookie but not write back to it. Middleware on the other hand allow you to both read and write to cookies." }), _jsxs(_components.p, { children: ["Next.js ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/routing/middleware", children: "Middleware" }), " runs immediately before each route is rendered. To avoid unnecessary execution, we include a matcher config to decide when the middleware should run. You can read more on matching paths in the Next.js ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/routing/middleware#matching-paths", children: "documentation" }), ". We'll use Middleware to refresh the user's session before loading Server Component routes."] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsxs(TabPanel, { id: "js", label: "JavaScript", children: [_jsxs(_components.p, { children: ["Create a new ", _jsx(_components.code, { children: "middleware.js" }), " file in the root of your project and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["middleware.js"], "active": "middleware.js", "heightRatio": 1 }, files: [{ "name": "middleware.js", "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": "", "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-4)" } } }] }, { "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Create a Supabase client configured to use cookies", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Refresh session if expired - required for Server Components", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "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": " 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": "// Ensure the middleware is only called for relevant paths.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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)" } } }] }, { "tokens": [{ "content": " /*", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * Match all request paths except for the ones starting with:", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * - _next/static (static files)", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * - _next/image (image optimization files)", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * - favicon.ico (favicon file)", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * Feel free to modify this pattern to include more paths.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " '/((?!_next/static|_next/image|favicon.ico).*)'", "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": "js" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsxs(_components.p, { children: ["Create a new ", _jsx(_components.code, { children: "middleware.ts" }), " file in the root of your project and populate with the following:"] }), _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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "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": "'@/lib/database.types'", "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": " 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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Create a Supabase client configured to use cookies", "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": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">({ req, res })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // Refresh session if expired - required for Server Components", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "getSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " 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": "// Ensure the middleware is only called for relevant paths.", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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)" } } }] }, { "tokens": [{ "content": " /*", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * Match all request paths except for the ones starting with:", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * - _next/static (static files)", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * - _next/image (image optimization files)", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " * - favicon.ico (favicon file)", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " */", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "tokens": [{ "content": " '/((?!_next/static|_next/image|favicon.ico).*)'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " ],", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createMiddlewareClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "getSession" }), " function must be called for any Server Component routes that use a Supabase client."] }) }), _jsx(_components.h2, { children: "Managing sign-in with Code Exchange" }), _jsxs(_components.p, { children: ["The Next.js Auth Helpers are configured to use the ", _jsx(_components.a, { href: "/docs/guides/auth/server-side-rendering", children: "server-side auth flow" }), " to sign users into your application. This requires you to setup a ", _jsx(_components.code, { children: "Code Exchange" }), " route, to exchange 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."] }), _jsx(_components.p, { children: "To make this work with Next.js, we create a callback Route Handler that performs this exchange:" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsxs(TabPanel, { id: "js", label: "JavaScript", children: [_jsxs(_components.p, { children: ["Create a new file at ", _jsx(_components.code, { children: "app/auth/callback/route.js" }), " and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/auth/callback/route.js"], "active": "app/auth/callback/route.js", "heightRatio": 1 }, files: [{ "name": "app/auth/callback/route.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "GET", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "requestUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "code ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " requestUrl.searchParams.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'code'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (code) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "exchangeCodeForSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(code)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // URL to redirect to after sign in process completes", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "(requestUrl.origin)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "js" }, "annotations": [] }] })] }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsxs(_components.p, { children: ["Create a new file at ", _jsx(_components.code, { children: "app/auth/callback/route.ts" }), " and populate with the following:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/auth/callback/route.ts"], "active": "app/auth/callback/route.ts", "heightRatio": 1 }, files: [{ "name": "app/auth/callback/route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "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": "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": "'@/lib/database.types'", "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": "GET", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "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": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "requestUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "code ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " requestUrl.searchParams.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'code'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " if", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (code) {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "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)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "exchangeCodeForSession", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(code)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " // URL to redirect to after sign in process completes", "props": { "style": { "color": "var(--ch-1)" } } }] }, { "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": "(requestUrl.origin)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "ts" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createRouteHandlerClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h2, { children: "Authentication" }), _jsx("div", { className: "video-container", children: _jsx("iframe", { src: "https://www.youtube-nocookie.com/embed/-7K6DRWfEGM", frameBorder: "1", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }), _jsxs(_components.p, { children: ["Authentication can be initiated ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#client-side", children: "client" }), " or ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#server-side", children: "server-side" }), ". All of the ", _jsx(_components.a, { href: "/docs/reference/javascript/auth-api", children: "supabase-js authentication strategies" }), " are supported with the Auth Helpers client."] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["The authentication flow requires the ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange", children: "Code Exchange Route" }), " to exchange a ", _jsx(_components.code, { children: "code" }), " for the user's ", _jsx(_components.code, { children: "session" }), "."] }) }), _jsx(_components.h3, { children: "Client-side" }), _jsx(_components.p, { children: "Client Components can be used to trigger the authentication process from event handlers." }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/login/page.jsx"], "active": "app/login/page.jsx", "heightRatio": 1 }, files: [{ "name": "app/login/page.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "'use client'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClientComponentClient } ", "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": " { useRouter } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/navigation'", "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": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Login", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "email", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setEmail", "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-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "password", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setPassword", "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-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "router ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useRouter", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClientComponentClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignUp ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "location", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/auth/callback`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " router.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "refresh", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignIn ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signInWithPassword", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " router.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "refresh", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignOut ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signOut", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " router.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "refresh", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <>", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"email\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "onChange", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "e", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "setEmail", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(e.target.value)", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "} ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "value", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input", "props": { "style": { "color": "var(--ch-6)" } } }] }, { "tokens": [{ "content": " type", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " onChange", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "e", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "setPassword", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(e.target.value)", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " value", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password", "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": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignUp", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Sign up", "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": "handleSignIn", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Sign in", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignOut", "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)" } } }] }, { "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: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/login/page.tsx"], "active": "app/login/page.tsx", "heightRatio": 1 }, files: [{ "name": "app/login/page.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "'use client'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClientComponentClient } ", "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": " { useRouter } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/navigation'", "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": "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": "'@/lib/database.types'", "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": "Login", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "email", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setEmail", "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-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "password", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setPassword", "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-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "router ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "useRouter", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClientComponentClient", "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": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignUp ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "location", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/auth/callback`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " router.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "refresh", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignIn ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signInWithPassword", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " router.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "refresh", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignOut ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signOut", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " router.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "refresh", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <>", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"email\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "onChange", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "e", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "setEmail", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(e.target.value)", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "} ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "value", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input", "props": { "style": { "color": "var(--ch-6)" } } }] }, { "tokens": [{ "content": " type", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": " onChange", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "e", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=> ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "setPassword", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(e.target.value)", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " value", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password", "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": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignUp", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Sign up", "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": "handleSignIn", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ">Sign in", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "onClick", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "handleSignOut", "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)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createClientComponentClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h3, { children: "Server-side" }), _jsxs(_components.p, { children: ["The combination of ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/react-essentials#server-components", children: "Server Components" }), " and ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/routing/route-handlers", children: "Route Handlers" }), " can be used to trigger the authentication process from form submissions."] }), _jsx(_components.h4, { children: "Sign up route" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/auth/sign-up/route.js"], "active": "app/auth/sign-up/route.js", "heightRatio": 1 }, files: [{ "name": "app/auth/sign-up/route.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "requestUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "formData ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'email'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'password'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "requestUrl", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/auth/callback`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(requestUrl.origin, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " status: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "301", "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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/auth/sign-up/route.ts"], "active": "app/auth/sign-up/route.ts", "heightRatio": 1 }, files: [{ "name": "app/auth/sign-up/route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "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": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "requestUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "formData ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "String", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'email'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "))", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "String", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'password'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "))", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "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)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signUp", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " options: {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " emailRedirectTo: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "`${", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "requestUrl", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/auth/callback`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " },", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(requestUrl.origin, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " status: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "301", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createRouteHandlerClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["Returning a ", _jsx(_components.code, { children: "301" }), " status redirects from a POST to a GET route"] }) }), _jsx(_components.h4, { children: "Login route" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/auth/login/route.js"], "active": "app/auth/login/route.js", "heightRatio": 1 }, files: [{ "name": "app/auth/login/route.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "requestUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "formData ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'email'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'password'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signInWithPassword", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(requestUrl.origin, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " status: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "301", "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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/auth/login/route.ts"], "active": "app/auth/login/route.ts", "heightRatio": 1 }, files: [{ "name": "app/auth/login/route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "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": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "requestUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "formData ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "email ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "String", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'email'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "))", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "password ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "String", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'password'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "))", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "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)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signInWithPassword", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " email,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " password,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "redirect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(requestUrl.origin, {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " status: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "301", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createRouteHandlerClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["Returning a ", _jsx(_components.code, { children: "301" }), " status redirects from a POST to a GET route"] }) }), _jsx(_components.h4, { children: "Logout route" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/auth/logout/route.js"], "active": "app/auth/logout/route.js", "heightRatio": 1 }, files: [{ "name": "app/auth/logout/route.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "requestUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signOut", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "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": "requestUrl", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/login`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " status: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "301", "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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/auth/logout/route.ts"], "active": "app/auth/logout/route.ts", "heightRatio": 1 }, files: [{ "name": "app/auth/logout/route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "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": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "requestUrl ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= new ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "URL", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(request.url)", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "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)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.auth.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "signOut", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "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": "requestUrl", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": ".", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "origin", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "}/login`", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ", {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " status: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "301", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createRouteHandlerClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h4, { children: "Login page" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/login/page.jsx"], "active": "app/login/page.jsx", "heightRatio": 1 }, files: [{ "name": "app/login/page.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Login", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "form ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "action", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"/auth/login\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "method", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"post\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "label ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "htmlFor", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"email\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Email", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"email\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "label ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "htmlFor", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Password", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "type", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Sign In", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "formAction", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"/auth/sign-up\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Sign Up", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "formAction", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"/auth/logout\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Sign Out", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsx(TabPanel, { id: "ts", label: "TypeScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/login/page.tsx"], "active": "app/login/page.tsx", "heightRatio": 1 }, files: [{ "name": "app/login/page.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Login", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "form ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "action", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"/auth/login\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "method", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"post\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "label ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "htmlFor", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"email\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Email", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"email\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "label ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "htmlFor", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Password", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "type", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\" ", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"password\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": " />", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Sign In", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "button ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "formAction", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"/auth/sign-up\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ">Sign Up", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " ", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }) })] }), _jsx(_components.h2, { children: "Creating a Supabase client" }), _jsx(_components.p, { children: "There are 5 ways to access the Supabase client with the Next.js Auth Helpers:" }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#client-components", children: "Client Components" }), " — ", _jsx(_components.code, { children: "createClientComponentClient" }), " in Client Components"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#server-components", children: "Server Components" }), " — ", _jsx(_components.code, { children: "createServerComponentClient" }), " in Server Components"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#server-actions", children: "Server Actions" }), " — ", _jsx(_components.code, { children: "createServerActionClient" }), " in Server Actions"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#route-handlers", children: "Route Handlers" }), " — ", _jsx(_components.code, { children: "createRouteHandlerClient" }), " in Route Handlers"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#middleware", children: "Middleware" }), " — ", _jsx(_components.code, { children: "createMiddlewareClient" }), " in Middleware"] }), "\n"] }), _jsxs(_components.p, { children: ["This allows for the Supabase client to be easily instantiated in the correct context. All you need to change is the context in the middle ", _jsx(_components.code, { children: "create[ClientComponent|ServerComponent|ServerAction|RouteHandler|Middleware]Client" }), " and the Auth Helpers will take care of the rest."] }), _jsx(_components.h3, { children: "Client components" }), _jsx("div", { className: "video-container", children: _jsx("iframe", { src: "https://www.youtube-nocookie.com/embed/6Sb8R1PYhTY", frameBorder: "1", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }), _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/react-essentials#client-components", children: "Client Components" }), " allow the use of client-side hooks - such as ", _jsx(_components.code, { children: "useEffect" }), " and ", _jsx(_components.code, { children: "useState" }), ". They can be used to request data from Supabase client-side, and ", _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx", children: "subscribe to realtime events" }), "."] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/client/page.jsx"], "active": "app/client/page.jsx", "heightRatio": 1 }, files: [{ "name": "app/client/page.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "'use client'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClientComponentClient } ", "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": " { useEffect, useState } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Page", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "todos", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setTodos", "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": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClientComponentClient", "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": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getData ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "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": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " setTodos", "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": " getData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }, [])", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " todos ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "?", "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": "(todos, ", "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)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Loading todos...", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/client/page.tsx"], "active": "app/client/page.tsx", "heightRatio": 1 }, files: [{ "name": "app/client/page.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "'use client'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClientComponentClient } ", "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": " { useEffect, useState } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'react'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "type ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Todo ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "[", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'public'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "][", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Tables'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "][", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "][", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'Row'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": "]", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Page", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " [", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "todos", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ", ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "setTodos", "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": "Todo", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "[] ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "| ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ">(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "null", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClientComponentClient", "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": " useEffect", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(() ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "getData ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "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": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " setTodos", "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": " getData", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " }, [])", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " todos ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "?", "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": "(todos, ", "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)" } } }, { "content": ":", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "p", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": ">Loading todos...", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createClientComponentClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["Check out the ", _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs", children: "Next.js auth example repo" }), " for more examples, including ", _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx", children: "realtime subscriptions" }), "."] }) }), _jsx(_components.h4, { children: "Singleton" }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "createClientComponentClient" }), " function implements a ", _jsx(_components.a, { href: "https://en.wikipedia.org/wiki/Singleton_pattern", children: "Singleton pattern" }), " by default, meaning that all invocations will return the same Supabase client instance. If you need multiple Supabase instances across Client Components, you can pass an additional configuration option ", _jsx(_components.code, { children: "{ isSingleton: false }" }), " to get a new client every time this function is called."] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClientComponentClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ isSingleton: ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "false", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsx(_components.h3, { children: "Server components" }), _jsx("div", { className: "video-container", children: _jsx("iframe", { src: "https://www.youtube-nocookie.com/embed/ywvXGW6P4Gs", frameBorder: "1", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }), _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/react-essentials#server-components", children: "Server Components" }), " allow for asynchronous data to be fetched server-side."] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["In order to use Supabase in Server Components, you need to have implemented the ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware", children: "Middleware" }), " steps above."] }) }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/page.jsx"], "active": "app/page.jsx", "heightRatio": 1 }, files: [{ "name": "app/page.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerComponentClient } ", "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 async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Page", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerComponentClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": "(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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/page.tsx"], "active": "app/page.tsx", "heightRatio": 1 }, files: [{ "name": "app/page.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerComponentClient } ", "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": "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": "'@/lib/database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "ServerComponent", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerComponentClient", "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)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": "(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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createServerComponentClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["Check out the ", _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs", children: "Next.js auth example repo" }), " for more examples, including redirecting unauthenticated users - ", _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/%5Bid%5D/page.tsx", children: "protected pages" }), "."] }) }), _jsx(_components.h3, { children: "Server actions" }), _jsx("div", { className: "video-container", children: _jsx("iframe", { src: "https://www.youtube-nocookie.com/embed/4_epZIxqCho", frameBorder: "1", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }), _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions", children: "Server Actions" }), " allow mutations to be performed server-side."] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["Next.js Server Actions are currently in ", _jsx(_components.code, { children: "alpha" }), " so may change without notice."] }) }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/new-post/page.jsx"], "active": "app/new-post/page.jsx", "heightRatio": 1 }, files: [{ "name": "app/new-post/page.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerActionClient } ", "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": " { revalidatePath } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/cache'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "NewTodo", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "addTodo ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "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": " 'use server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "title ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'title'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerActionClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ cookies })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "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": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ title })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " revalidatePath", "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": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "form ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "action", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "addTodo", "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": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"title\"", "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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/new-post/page.tsx"], "active": "app/new-post/page.tsx", "heightRatio": 1 }, files: [{ "name": "app/new-post/page.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerActionClient } ", "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": " { revalidatePath } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/cache'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "NewTodo", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "addTodo ", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "= async", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "formData", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "FormData", "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": " 'use server'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "title ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " formData.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "get", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'title'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ")", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerActionClient", "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)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "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": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ title })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " revalidatePath", "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": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " (", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " <", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "form ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "action", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "={", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "addTodo", "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": "input ", "props": { "style": { "color": "var(--ch-6)" } } }, { "content": "name", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "=", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "\"title\"", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createServerActionClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h3, { children: "Route handlers" }), _jsx("div", { className: "video-container", children: _jsx("iframe", { src: "https://www.youtube-nocookie.com/embed/r6q7ypXbPFI", frameBorder: "1", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true }) }), _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/routing/router-handlers", children: "Route Handlers" }), " replace API Routes and allow for logic to be performed server-side. They can respond to ", _jsx(_components.code, { children: "GET" }), ", ", _jsx(_components.code, { children: "POST" }), ", ", _jsx(_components.code, { children: "PUT" }), ", ", _jsx(_components.code, { children: "PATCH" }), ", ", _jsx(_components.code, { children: "DELETE" }), ", ", _jsx(_components.code, { children: "HEAD" }), ", and ", _jsx(_components.code, { children: "OPTIONS" }), " requests."] }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/api/todos/route.js"], "active": "app/api/todos/route.js", "heightRatio": 1 }, files: [{ "name": "app/api/todos/route.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "title", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ title }).", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/api/todos/route.ts"], "active": "app/api/todos/route.ts", "heightRatio": 1 }, files: [{ "name": "app/api/todos/route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "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": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "title", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "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)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ title }).", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createRouteHandlerClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h3, { children: "Middleware" }), _jsxs(_components.p, { children: ["See ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware", children: "refreshing session example" }), " above."] }), _jsx(_components.h3, { children: "Edge runtime" }), _jsx(_components.p, { children: "The Next.js Edge Runtime allows you to host Server Components and Route Handlers from Edge nodes, serving the routes as close as possible to your user's location." }), _jsxs(_components.p, { children: ["A route can be configured to use the Edge Runtime by exporting a ", _jsx(_components.code, { children: "runtime" }), " variable set to ", _jsx(_components.code, { children: "edge" }), ". Additionally, the ", _jsx(_components.code, { children: "cookies()" }), " function must be called from the Edge route, before creating a Supabase Client."] }), _jsx(_components.h4, { children: "Server components" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/page.jsx"], "active": "app/page.jsx", "heightRatio": 1 }, files: [{ "name": "app/page.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerComponentClient } ", "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": "runtime ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'edge'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "dynamic ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'force-dynamic'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Page", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerComponentClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": "(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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/page.tsx"], "active": "app/page.tsx", "heightRatio": 1 }, files: [{ "name": "app/page.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createServerComponentClient } ", "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": "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": "'@/lib/database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "runtime ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'edge'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "dynamic ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'force-dynamic'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Page", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createServerComponentClient", "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": " cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": "(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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createServerComponentClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h4, { children: "Route handlers" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/api/todos/route.js"], "active": "app/api/todos/route.js", "heightRatio": 1 }, files: [{ "name": "app/api/todos/route.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "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": "runtime ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'edge'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "dynamic ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'force-dynamic'", "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": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "title", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ title }).", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/api/todos/route.ts"], "active": "app/api/todos/route.ts", "heightRatio": 1 }, files: [{ "name": "app/api/todos/route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createRouteHandlerClient } ", "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", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { cookies } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'next/headers'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "runtime ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'edge'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "export const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "dynamic ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'force-dynamic'", "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": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "title", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "json", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookieStore ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createRouteHandlerClient", "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": " cookies", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": ": () ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "=>", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " cookieStore,", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " })", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ title }).", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createRouteHandlerClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h3, { children: "Static routes" }), _jsxs(_components.p, { children: ["Server Components and Route Handlers are static by default - data is fetched once at build time and the value is cached. Since the request to Supabase now happens at build time, there is no user, session or cookie to pass along with the request to Supabase. Therefore, the ", _jsx(_components.code, { children: "createClient" }), " function from ", _jsx(_components.code, { children: "supabase-js" }), " can be used to fetch data for static routes."] }), _jsx(_components.h4, { children: "Server components" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/page.jsx"], "active": "app/page.jsx", "heightRatio": 1 }, files: [{ "name": "app/page.jsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Page", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "NEXT_PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "NEXT_PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": "(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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/page.tsx"], "active": "app/page.tsx", "heightRatio": 1 }, files: [{ "name": "app/page.tsx", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Page", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "NEXT_PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "NEXT_PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " 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": "(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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h4, { children: "Route handlers" }), _jsxs(Tabs, { scrollable: true, size: "small", type: "underlined", defaultActiveId: "js", queryGroup: "language", children: [_jsx(TabPanel, { id: "js", label: "JavaScript", children: _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/api/todos/route.js"], "active": "app/api/todos/route.js", "heightRatio": 1 }, files: [{ "name": "app/api/todos/route.js", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { 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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export async function ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "title", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "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": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "NEXT_PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "NEXT_PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ title }).", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "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)" } } }] }], "lang": "jsx" }, "annotations": [] }] }) }), _jsxs(TabPanel, { id: "ts", label: "TypeScript", children: [_jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": ["app/api/todos/route.ts"], "active": "app/api/todos/route.ts", "heightRatio": 1 }, files: [{ "name": "app/api/todos/route.ts", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClient } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@supabase/supabase-js'", "props": { "style": { "color": "var(--ch-8)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { 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": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import type", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { Database } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "'@/lib/database.types'", "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": "POST", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ": ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "Request", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ") {", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "title", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " request.", "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": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "<", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "Database", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": ">(", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "NEXT_PUBLIC_SUPABASE_URL", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": ",", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " process.env.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "NEXT_PUBLIC_SUPABASE_ANON_KEY", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "!", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": " )", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "data", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": " } ", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "= await", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " supabase.", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "from", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "(", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "'todos'", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ").", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "insert", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "({ title }).", "props": { "style": { "color": "var(--ch-4)" } } }, { "content": "select", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "()", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " NextResponse.", "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)" } } }] }], "lang": "tsx" }, "annotations": [] }] }), _jsx(Admonition, { type: "note", children: _jsxs(_components.p, { children: ["TypeScript types can be ", _jsx(_components.a, { href: "/docs/reference/javascript/typescript-support", children: "generated with the Supabase CLI" }), " and passed to ", _jsx(_components.code, { children: "createClient" }), " to add type support to the Supabase client."] }) })] })] }), _jsx(_components.h2, { children: "More examples" }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://egghead.io/courses/build-a-twitter-clone-with-the-next-js-app-router-and-supabase-19bebadb", children: "Build a Twitter Clone with the Next.js App Router and Supabase - free egghead course" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF", children: "Cookie-based Auth and the Next.js 13 App Router (free course)" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs", children: "Full App Router example" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx", children: "Realtime Subscriptions" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/%5Bid%5D/page.tsx", children: "Protected Routes" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/login-form.tsx", children: "Conditional Rendering in Client Components with SSR" }) }), "\n"] }), _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 Route Handler for ", _jsx(_components.code, { children: "/auth/callback" }), " that exchanges an auth ", _jsx(_components.code, { children: "code" }), " for the user's ", _jsx(_components.code, { children: "session" }), "."] }), _jsxs(_components.p, { children: ["Check the ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange", children: "Code Exchange Route steps" }), " above to implement this Route Handler."] }), _jsx(_components.h4, { children: "Authentication" }), _jsxs(_components.p, { children: ["For authentication methods that have a ", _jsx(_components.code, { children: "redirectTo" }), " or ", _jsx(_components.code, { children: "emailRedirectTo" }), ", this must be set to this new code exchange Route Handler - ", _jsx(_components.code, { children: "/auth/callback" }), ". This is an example with the ", _jsx(_components.code, { children: "signUp" }), " function:"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "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: "createMiddlewareSupabaseClient" }), ", ", _jsx(_components.code, { children: "createBrowserSupabaseClient" }), ", ", _jsx(_components.code, { children: "createServerComponentSupabaseClient" }), " and ", _jsx(_components.code, { children: "createRouteHandlerSupabaseClient" }), " 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: "createMiddlewareSupabaseClient" }), " has been replaced with ", _jsx(_components.code, { children: "createMiddlewareClient" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "createBrowserSupabaseClient" }), " has been replaced with ", _jsx(_components.code, { children: "createClientComponentClient" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "createServerComponentSupabaseClient" }), " has been replaced with ", _jsx(_components.code, { children: "createServerComponentClient" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "createRouteHandlerSupabaseClient" }), " has been replaced with ", _jsx(_components.code, { children: "createRouteHandlerClient" })] }), "\n"] }), _jsxs(_components.h4, { children: [_jsx(_components.code, { children: "createClientComponentClient" }), " returns singleton"] }), _jsxs(_components.p, { children: ["You no longer need to implement logic to ensure there is only a single instance of the Supabase Client shared across all Client Components - this is now the default and handled by the ", _jsx(_components.code, { children: "createClientComponentClient" }), " function. Call it as many times as you want!"] }), _jsx(CH.Code, { codeConfig: chCodeConfig, northPanel: { "tabs": [""], "active": "", "heightRatio": 1 }, files: [{ "name": "", "focus": "", "code": { "lines": [{ "tokens": [{ "content": "\"use client\"", "props": { "style": { "color": "var(--ch-8)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "import", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": " { createClientComponentClient } ", "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)" } } }, { "content": ";", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": "export default function", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "() ", "props": { "style": { "color": "var(--ch-3)" } } }, { "content": "{", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " const ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "supabase ", "props": { "style": { "color": "var(--ch-2)" } } }, { "content": "= ", "props": { "style": { "color": "var(--ch-7)" } } }, { "content": "createClientComponentClient", "props": { "style": { "color": "var(--ch-5)" } } }, { "content": "();", "props": { "style": { "color": "var(--ch-4)" } } }] }, { "tokens": [{ "content": " return ...", "props": { "style": { "color": "var(--ch-7)" } } }] }, { "tokens": [{ "content": "}", "props": { "style": { "color": "var(--ch-4)" } } }] }], "lang": "jsx" }, "annotations": [] }] }), _jsxs(_components.p, { children: ["For an example of creating multiple Supabase clients, check ", _jsx(_components.a, { href: "/docs/guides/auth/auth-helpers/nextjs#singleton", children: "Singleton section" }), " above."] })] }) })] }); } 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 the Next.js App Router