"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h1: "h1", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Alert, Badge} = _components; if (!Alert) _missingMdxReference("Alert", true); if (!Badge) _missingMdxReference("Badge", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h1, { id: "building-secure-authentication-with-nextjs-and-supabase", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#building-secure-authentication-with-nextjs-and-supabase", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Building Secure Authentication with Next.js and Supabase"] }), "\n", _jsx(_components.p, { children: "Authentication is a critical component of modern web applications. In this comprehensive guide, we'll explore how to implement secure authentication using Next.js and Supabase." }), "\n", _jsx(Alert, { type: "info", children: _jsx(_components.p, { children: "This tutorial assumes you have basic knowledge of React and Next.js. If you're new to these technologies, consider checking out our beginner guides first." }) }), "\n", _jsxs(_components.h2, { id: "setting-up-supabase", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#setting-up-supabase", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Setting Up Supabase"] }), "\n", _jsx(_components.p, { children: "First, let's set up our Supabase project and install the necessary dependencies." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm install @supabase/supabase-js @supabase/auth-helpers-nextjs\nnpm install -D @types/node\n" }) }), "\n", _jsxs(_components.h3, { id: "environment-variables", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#environment-variables", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Environment Variables"] }), "\n", _jsxs(_components.p, { children: ["Create a ", _jsx(_components.code, { children: ".env.local" }), " file in your project root:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-env", children: "NEXT_PUBLIC_SUPABASE_URL=your_supabase_url\nNEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key\n" }) }), "\n", _jsxs(_components.h2, { id: "creating-the-supabase-client", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#creating-the-supabase-client", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Creating the Supabase Client"] }), "\n", _jsx(_components.p, { children: "Let's create a Supabase client that we can use throughout our application." }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// lib/supabase.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createClient } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@supabase/supabase-js'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabaseUrl = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_URL" }), "!\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabaseAnonKey = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_SUPABASE_ANON_KEY" }), "!\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " supabase = ", _jsx(_components.span, { className: "hljs-title function_", children: "createClient" }), "(supabaseUrl, supabaseAnonKey)\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Database" }), " = {\n ", _jsx(_components.span, { className: "hljs-attr", children: "public" }), ": {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Tables" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "profiles" }), ": {\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Row" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "full_name" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "avatar_url" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "created_at" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n }\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Insert" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "full_name" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "avatar_url" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n }\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Update" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "full_name" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "avatar_url" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n }\n }\n }\n }\n}\n"] }) }), "\n", _jsxs(_components.h2, { id: "authentication-hook", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#authentication-hook", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Authentication Hook"] }), "\n", _jsx(_components.p, { children: "Now let's create a custom hook to manage authentication state:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// hooks/useAuth.ts" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useEffect, useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@supabase/supabase-js'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { supabase } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/lib/supabase'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "useAuth" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [user, setUser] = useState<", _jsx(_components.span, { className: "hljs-title class_", children: "User" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ">(", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [loading, setLoading] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Get initial session" }), "\n supabase.", _jsx(_components.span, { className: "hljs-property", children: "auth" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "getSession" }), "().", _jsx(_components.span, { className: "hljs-title function_", children: "then" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "{ data: { session } }" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setUser" }), "(session?.", _jsx(_components.span, { className: "hljs-property", children: "user" }), " ?? ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ")\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n })\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Listen for auth changes" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": { subscription } } = supabase.", _jsx(_components.span, { className: "hljs-property", children: "auth" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "onAuthStateChange" }), "(\n ", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsx(_components.span, { className: "hljs-params", children: "event, session" }), ") =>"] }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setUser" }), "(session?.", _jsx(_components.span, { className: "hljs-property", children: "user" }), " ?? ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), ")\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n )\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " subscription.", _jsx(_components.span, { className: "hljs-title function_", children: "unsubscribe" }), "()\n }, [])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "signIn" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "email" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "password" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { data, error } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase.", _jsx(_components.span, { className: "hljs-property", children: "auth" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "signInWithPassword" }), "({\n email,\n password,\n })\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { data, error }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "signUp" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "email" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "password" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { data, error } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase.", _jsx(_components.span, { className: "hljs-property", children: "auth" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "signUp" }), "({\n email,\n password,\n })\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { data, error }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "signOut" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { error } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " supabase.", _jsx(_components.span, { className: "hljs-property", children: "auth" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "signOut" }), "()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { error }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " {\n user,\n loading,\n signIn,\n signUp,\n signOut,\n }\n}\n"] }) }), "\n", _jsxs(_components.h2, { id: "login-component", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#login-component", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Login Component"] }), "\n", _jsx(_components.p, { children: "Let's create a login component that uses our authentication hook:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/LoginForm.tsx" }), "\n", _jsx(_components.span, { className: "hljs-string", children: "'use client'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'react'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useAuth } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/hooks/useAuth'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Button" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/button'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Input" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/input'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Label" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/components/ui/label'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "LoginForm" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [email, setEmail] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-string", children: "''" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [password, setPassword] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-string", children: "''" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [isLoading, setIsLoading] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { signIn, signUp } = ", _jsx(_components.span, { className: "hljs-title function_", children: "useAuth" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handleSignIn" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "e" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ".", _jsx(_components.span, { className: "hljs-title class_", children: "FormEvent" })] }), ") => {\n e.", _jsx(_components.span, { className: "hljs-title function_", children: "preventDefault" }), "()\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { error } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "signIn" }), "(email, password)\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Error signing in:'" }), ", error.", _jsx(_components.span, { className: "hljs-property", children: "message" }), ")\n }\n \n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handleSignUp" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "e" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ".", _jsx(_components.span, { className: "hljs-title class_", children: "FormEvent" })] }), ") => {\n e.", _jsx(_components.span, { className: "hljs-title function_", children: "preventDefault" }), "()\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { error } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "signUp" }), "(email, password)\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Error signing up:'" }), ", error.", _jsx(_components.span, { className: "hljs-property", children: "message" }), ")\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "else" }), " {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "log" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Check your email for confirmation!'" }), ")\n }\n \n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"max-w-md mx-auto p-6 glass-card\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-bold mb-6\"" }), ">"] }), "Sign In", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "form" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "htmlFor" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"email\"" }), ">"] }), "Email", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"email\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"email\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{email}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{(e)" }), " =>"] }), " setEmail(e.target.value)}\n required\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "htmlFor" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"password\"" }), ">"] }), "Password", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"password\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"password\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{password}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{(e)" }), " =>"] }), " setPassword(e.target.value)}\n required\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex space-x-2\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"button\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{handleSignIn}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "disabled" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{isLoading}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-1\"" }), "\n >"] }), "\n Sign In\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "Button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"button\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{handleSignUp}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "disabled" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{isLoading}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "variant" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"outline\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-1\"" }), "\n >"] }), "\n Sign Up\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }), "\n", _jsxs(_components.h2, { id: "protected-routes", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#protected-routes", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Protected Routes"] }), "\n", _jsx(_components.p, { children: "To protect routes, create a higher-order component:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-tsx", children: [_jsx(_components.span, { className: "hljs-comment", children: "// components/ProtectedRoute.tsx" }), "\n", _jsx(_components.span, { className: "hljs-string", children: "'use client'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useAuth } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@/hooks/useAuth'" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "LoginForm" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'./LoginForm'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ProtectedRouteProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "children" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "React" }), ".", _jsx(_components.span, { className: "hljs-property", children: "ReactNode" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "ProtectedRoute" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{ children }: ", _jsx(_components.span, { className: "hljs-title class_", children: "ProtectedRouteProps" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { user, loading } = ", _jsx(_components.span, { className: "hljs-title function_", children: "useAuth" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (loading) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"min-h-screen flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!user) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"min-h-screen flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "LoginForm" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsxs(_components.span, { className: "xml", children: [_jsx(_components.span, { className: "hljs-tag", children: "<>" }), "{children}", _jsx(_components.span, { className: "hljs-tag", children: "" })] }), "\n}\n"] }) }), "\n", _jsxs(_components.h2, { id: "row-level-security-rls", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#row-level-security-rls", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Row Level Security (RLS)"] }), "\n", _jsx(_components.p, { children: "Don't forget to set up Row Level Security in your Supabase database:" }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-sql", children: [_jsx(_components.span, { className: "hljs-comment", children: "-- Enable RLS on profiles table" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "ALTER TABLE" }), " profiles ENABLE ", _jsx(_components.span, { className: "hljs-type", children: "ROW" }), " LEVEL SECURITY;\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Create policy for users to read their own profile" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Users can read own profile\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "SELECT" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (auth.uid() ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " id);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Create policy for users to update their own profile" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Users can update own profile\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "UPDATE" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "USING" }), " (auth.uid() ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " id);\n\n", _jsx(_components.span, { className: "hljs-comment", children: "-- Create policy for users to insert their own profile" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "CREATE" }), " POLICY \"Users can insert own profile\" ", _jsx(_components.span, { className: "hljs-keyword", children: "ON" }), " profiles\n ", _jsx(_components.span, { className: "hljs-keyword", children: "FOR" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "INSERT" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "WITH" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "CHECK" }), " (auth.uid() ", _jsx(_components.span, { className: "hljs-operator", children: "=" }), " id);\n"] }) }), "\n", _jsxs(_components.h2, { id: "conclusion", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#conclusion", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Conclusion"] }), "\n", _jsx(_components.p, { children: "You now have a solid foundation for authentication in your Next.js application using Supabase. This setup provides:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Secure user authentication" }), " with email/password"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Real-time auth state management" }), " with custom hooks"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Protected routes" }), " with automatic redirects"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Type safety" }), " with TypeScript"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Database security" }), " with Row Level Security"] }), "\n"] }), "\n", _jsx(Alert, { type: "success", children: _jsx(_components.p, { children: "Remember to always validate user input on both client and server sides, and consider implementing additional security measures like rate limiting and CAPTCHA for production applications." }) }), "\n", _jsxs(_components.h2, { id: "next-steps", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#next-steps", children: _jsx(_components.span, { className: "icon icon-link" }) }), "Next Steps"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Implement social authentication (Google, GitHub, etc.)" }), "\n", _jsx(_components.li, { children: "Add email verification and password reset" }), "\n", _jsx(_components.li, { children: "Create user profile management" }), "\n", _jsx(_components.li, { children: "Implement role-based access control" }), "\n", _jsx(_components.li, { children: "Add two-factor authentication" }), "\n"] }), "\n", _jsx(Badge, { children: "Authentication" }), "\n", _jsx(Badge, { children: "Security" }), "\n", _jsx(Badge, { children: "Next.js" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { 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."); }

Related Articles

QR Code Security: How Hackers Exploit Them and How to Stay Safe with QRGuard

How to Self-Host Matrix Chat on Local and VPS