"use strict"; const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const LoggedInForm = ({sampleApp}) => { const _components = { a: "a", button: "button", div: "div", form: "form", h2: "h2", input: "input", label: "label", li: "li", optgroup: "optgroup", option: "option", p: "p", path: "path", polyline: "polyline", select: "select", span: "span", svg: "svg", ul: "ul", ..._provideComponents() }; const LS_APPS_KEY = "auth_demo_apps"; const LS_APP_CFG_KEY = "auth_demo_app_cfg"; const CHANNEL = "auth_flows_sync_v1"; const mkChannel = () => new BroadcastChannel(CHANNEL); function uid() { return Math.random().toString(36).slice(2) + Date.now().toString(36); } function loadApps() { const raw = localStorage.getItem(LS_APPS_KEY); if (raw) return JSON.parse(raw); const seeded = [{ id: "mz9iNEIo2PHu7oeh8QRt19ndTyyCIgai", name: "Default App" }]; localStorage.setItem(LS_APPS_KEY, JSON.stringify(seeded)); return seeded; } function saveApps(apps) { localStorage.setItem(LS_APPS_KEY, JSON.stringify(apps)); } function loadCfg() { const raw = localStorage.getItem(LS_APP_CFG_KEY); return raw ? JSON.parse(raw) : {}; } function saveCfg(cfg) { localStorage.setItem(LS_APP_CFG_KEY, JSON.stringify(cfg)); } const RightChevron = ({className = "w-5 h-5", ...props}) => _jsx(_components.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", stroke: "currentColor", fill: "none", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, ...props, children: _jsx(_components.polyline, { points: "9 18 15 12 9 6" }) }); const LightningIcon = () => _jsxs(_components.svg, { width: "24", height: "24", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", className: "mint-fill-[#3F59E4] dark:mint-fill-[#99A7F1]", d: "M24.971 30.152H7.088c-1.786 0-2.745-2.103-1.574-3.453l19.07-21.988c1.33-1.532 3.835-.4 3.569 1.607L24.97 30.152z" }), _jsx(_components.path, { fillRule: "evenodd", clipRule: "evenodd", className: "mint-fill-[#3F59E4] dark:mint-fill-[#99A7F1]", d: "M23.201 17.885h17.885c1.787 0 2.746 2.102 1.575 3.453l-19.073 21.99c-1.33 1.532-3.835.4-3.568-1.607L23.2 17.885z" })] }); const LayersIcon = () => _jsxs(_components.svg, { width: "24", height: "24", viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx(_components.path, { className: "mint-fill-[#3F59E4] dark:mint-fill-[#99A7F1]", d: "M34.54 29.135l6.373 3.183c1.566.782 1.566 3.017 0 3.8l-14.815 7.396a4.623 4.623 0 01-4.125 0L7.174 36.12c-1.565-.782-1.565-3.017 0-3.798l6.532-3.214" }), _jsx(_components.path, { className: "mint-fill-[#AAB6F3] dark:mint-fill-[#3449BA]", d: "M34.54 18.86l6.373 3.183c1.566.782 1.566 3.016 0 3.8L26.098 33.24a4.623 4.623 0 01-4.125 0L7.174 25.843c-1.565-.781-1.565-3.016 0-3.798l6.33-3.164" }), _jsx(_components.path, { className: "mint-fill-[#CFD6F8] dark:mint-fill-[#22307C]", d: "M21.94 23.058L7.306 15.745c-1.62-.81-1.62-3.123 0-3.932l14.631-7.319a4.693 4.693 0 014.194 0l14.648 7.319c1.622.81 1.62 3.124 0 3.932L26.13 23.058c-1.321.66-2.873.66-4.191 0z" })] }); const GithubIcon = () => _jsx(_components.svg, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "mint-w-5 mint-h-5", children: _jsx(_components.path, { d: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" }) }); function IconTile({children}) { return _jsx(_components.div, { className: " mint-shrink-0 mint-grid mint-place-items-center mint-w-10 mint-h-10 mint-rounded-lg mint-bg-indigo-50 mint-ring-1 mint-ring-indigo-200/60 dark:mint-bg-indigo-950/40 dark:mint-ring-white/10 ", children: children }); } function Card({className = "", children}) { return _jsx(_components.div, { className: `mint-rounded-2xl mint-shadow-sm mint-ring-1 mint-ring-zinc-200 dark:mint-ring-zinc-800 ${className}`, children: children }); } function Button({variant = "primary", type = "button", onClick, children}) { const base = "inline-flex items-center justify-center gap-2 h-10 px-4 rounded-xl font-medium transition"; let styles = ""; if (variant === "primary") { styles = "mint-bg-indigo-600 text-white hover:mint-bg-indigo-700"; } else if (variant === "outline") { styles = "border border-zinc-300 dark:border-zinc-700 mint-bg-transparent hover:mint-bg-zinc-50 dark:hover:mint-bg-zinc-800"; } else if (variant === "ghost") { styles = "hover:mint-bg-zinc-100 dark:hover:mint-bg-zinc-800"; } return _jsx(_components.button, { type: type, onClick: onClick, className: `${base} ${styles}`, children: children }); } function Input({id, label, value, onChange, placeholder, name}) { return _jsxs(_components.label, { className: "mint-block mint-space-y-1", children: [_jsx(_components.span, { className: "mint-text-sm mint-text-zinc-700 dark:mint-text-zinc-300", children: label }), _jsx(_components.input, { id: id, name: name, className: "mint-w-full mint-h-11 mint-px-3 mint-rounded-xl mint-border mint-border-zinc-300 dark:mint-border-zinc-700 mint-bg-white dark:mint-bg-zinc-900 mint-text-zinc-900 dark:mint-text-zinc-100 focus:mint-outline-none focus:mint-ring-2 focus:mint-ring-indigo-500", placeholder: placeholder, value: value, onChange: e => onChange(e.target.value) })] }); } function Select({label, value, onChange, options}) { return _jsxs(_components.label, { className: "mint-block mint-space-y-1 mint-max-w-[300px]", children: [_jsx(_components.span, { className: "mint-text-sm mint-text-zinc-700 dark:mint-text-zinc-300", children: label }), _jsxs(_components.div, { className: "mint-relative", children: [_jsx(_components.select, { className: "mint-w-full mint-h-11 mint-appearance-none mint-px-3 mint-pr-9 mint-rounded-xl mint-border mint-border-zinc-300 dark:mint-border-zinc-700 mint-bg-white dark:mint-bg-zinc-900 mint-text-zinc-900 dark:mint-text-zinc-100 focus:mint-outline-none focus:mint-ring-2 focus:mint-ring-indigo-500", value: value, onChange: e => onChange(e.target.value), children: _jsx(_components.optgroup, { label: "Generic Applications", children: options.map(o => _jsx(_components.option, { value: o.id, children: o.name }, o.id)) }) }), _jsx(_components.svg, { className: "mint-pointer-events-none mint-absolute mint-right-3 mint-top-1/2 mint--translate-y-1/2 mint-w-5 mint-h-5 mint-text-zinc-500", viewBox: "0 0 24 24", children: _jsx(_components.path, { d: "M7 10l5 5 5-5z", fill: "currentColor" }) })] })] }); } function Toast({open, onClose, children}) { useEffect(() => { if (!open) return; const t = setTimeout(onClose, 2200); return () => clearTimeout(t); }, [open, onClose]); return _jsx(_components.div, { className: `mint-fixed mint-right-4 mint-top-4 mint-z-50 mint-transition ${open ? "mint-opacity-100 mint-translate-y-0" : "mint-opacity-0 mint--translate-y-2 mint-pointer-events-none"}`, children: _jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-2 mint-rounded-xl mint-shadow mint-ring-1 mint-ring-emerald-200 mint-bg-white dark:mint-bg-zinc-900 mint-px-4 mint-py-2", children: [_jsx(_components.span, { className: "mint-w-1.5 mint-h-8 mint-rounded-l mint-bg-emerald-500" }), _jsx(_components.svg, { className: "mint-w-5 mint-h-5 mint-text-emerald-600", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx(_components.path, { d: "M20 6L9 17l-5-5" }) }), _jsx(_components.span, { className: "mint-text-sm mint-text-zinc-900 dark:mint-text-zinc-100", children: children })] }) }); } function Flows() { const [route, setRoute] = useState("menu"); const [apps, setApps] = useState(loadApps()); const [cfg, setCfg] = useState(loadCfg()); const [selected, setSelected] = useState(apps[0]?.id || ""); const [toast, setToast] = useState(false); const [bc] = useState(() => mkChannel()); useEffect(() => { if (!apps.find(a => a.id === selected)) { setSelected(apps[0]?.id || ""); } }, [apps, selected]); useEffect(() => { const onMsg = e => { const {type, payload} = e.data || ({}); switch (type) { case "NAV": setRoute(payload.route); break; case "SELECT": setSelected(payload.appId); break; case "APPS_UPDATED": setApps(loadApps()); break; case "CFG_UPDATED": setCfg(loadCfg()); setToast(true); break; default: break; } }; bc.addEventListener("message", onMsg); return () => bc.removeEventListener("message", onMsg); }, [bc]); const nav = nextRoute => { setRoute(nextRoute); bc.postMessage({ type: "NAV", payload: { route: nextRoute } }); }; const selectApp = appId => { setSelected(appId); bc.postMessage({ type: "SELECT", payload: { appId } }); }; const onCreate = name => { const id = uid(); const next = [...apps, { id, name: name || "Untitled" }]; setApps(next); saveApps(next); bc.postMessage({ type: "APPS_UPDATED" }); selectApp(id); nav("integrate"); }; const onSaveCfg = (appId, data) => { const next = { ...cfg, [appId]: data }; setCfg(next); saveCfg(next); setToast(true); bc.postMessage({ type: "CFG_UPDATED" }); }; return _jsxs(_components.div, { children: [route === "menu" && _jsx(Menu, { onCreate: () => nav("create"), onIntegrate: () => nav("integrate") }), route === "create" && _jsx(CreateForm, { onCancel: () => nav("menu"), onSave: onCreate }), route === "integrate" && _jsx(IntegrateForm, { apps: apps, selected: selected, onSelect: selectApp, saved: cfg[selected], onSave: data => onSaveCfg(selected, data), onCancel: () => nav("menu") }), _jsx(Toast, { open: toast, onClose: () => setToast(false), children: "Successfully saved your changes." })] }); } function Menu({onCreate, onIntegrate}) { return _jsxs(_components.ul, { className: "mint-space-y-4 mint-list-none login_list", children: [_jsx(_components.li, { className: "mint-list-none !mint-px-0", children: _jsx(_components.button, { onClick: onCreate, className: "mint-w-full mint-text-left", children: _jsx(Card, { className: "mint-p-5 hover:mint-shadow-md mint-transition", children: _jsxs(_components.div, { className: "mint-flex mint-items-center mint-justify-between", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-4", children: [_jsx(IconTile, { children: _jsx(LightningIcon, {}) }), _jsx(_components.h2, { className: "mint-text-lg", children: "Create a new application" })] }), _jsx(RightChevron, { className: "mint-w-4 mint-h-4 mint-text-zinc-500" })] }) }) }) }), _jsx(_components.li, { className: "mint-list-none !mint-px-0", children: _jsx(_components.button, { onClick: onIntegrate, className: "mint-w-full mint-text-left", children: _jsx(Card, { className: "mint-p-5 hover:mint-shadow-md mint-transition", children: _jsxs(_components.div, { className: "mint-flex mint-items-center mint-justify-between", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-4", children: [_jsx(IconTile, { children: _jsx(LayersIcon, {}) }), _jsx(_components.h2, { className: "mint-text-lg", children: "Integrate with an existing application" })] }), _jsx(RightChevron, { className: "mint-w-4 mint-h-4 mint-text-zinc-500" })] }) }) }) }), _jsx(_components.li, { className: "mint-list-none !mint-px-0", children: _jsx(_components.a, { className: "no_external_icon mint-block", href: sampleApp ? sampleApp : "/", target: "_blank", rel: "noreferrer", children: _jsx(Card, { className: "mint-p-5 hover:mint-shadow-md mint-transition", children: _jsxs(_components.div, { className: "mint-flex mint-items-center mint-justify-between", children: [_jsxs(_components.div, { className: "mint-flex mint-items-center mint-gap-4", children: [_jsx(IconTile, { children: _jsx(GithubIcon, {}) }), _jsx(_components.h2, { className: "mint-text-lg", children: "View a sample application" })] }), _jsx(RightChevron, { className: "mint-w-4 mint-h-4 mint-text-zinc-500" })] }) }) }) })] }); } function CreateForm({onSave, onCancel}) { const [name, setName] = useState(""); return _jsxs(_components.div, { className: "mint-space-y-6", children: [_jsx(Input, { id: "app-name", label: "Application Name", placeholder: "My App", value: name, onChange: setName }), _jsx(_components.p, { className: "mint-text-sm mint-text-zinc-500", children: "You can change this later in the application settings." }), _jsxs(_components.div, { className: "mint-flex mint-gap-3", children: [_jsx(Button, { onClick: () => onSave(name), children: "Save" }), _jsx(Button, { variant: "outline", onClick: onCancel, children: "Cancel" })] })] }); } function IntegrateForm({apps, selected, onSelect, saved, onSave, onCancel}) { const [callbacks, setCallbacks] = useState(saved?.callbacks ?? ""); const [logouts, setLogouts] = useState(saved?.logouts ?? ""); const [origins, setOrigins] = useState(saved?.origins ?? ""); useEffect(() => { setCallbacks(loadCfg()[selected]?.callbacks ?? ""); setLogouts(loadCfg()[selected]?.logouts ?? ""); setOrigins(loadCfg()[selected]?.origins ?? ""); }, [selected]); return _jsxs(_components.div, { className: "mint-space-y-6", children: [_jsxs(_components.div, { children: [_jsx(_components.span, { className: "mint-block mint-text-sm mint-text-zinc-600 dark:mint-text-zinc-300 mint-mb-1", children: "Select your Application" }), _jsx(Select, { label: "", value: selected, onChange: onSelect, options: apps })] }), _jsxs(_components.form, { className: "mint-space-y-4", onSubmit: e => { e.preventDefault(); onSave({ callbacks, logouts, origins }); }, children: [_jsx(Input, { id: "callbacks", name: "callbacks", label: "Callback URLs", placeholder: "http://localhost:3000", value: callbacks, onChange: setCallbacks }), _jsx(Input, { id: "logout", name: "allowed_logout_urls", label: "Logout URLs", placeholder: "http://localhost:3000", value: logouts, onChange: setLogouts }), _jsx(Input, { id: "origins", name: "web_origins", label: "Allowed Web Origins", placeholder: "http://localhost:3000", value: origins, onChange: setOrigins }), _jsxs(_components.div, { className: "mint-flex mint-gap-3 mint-pt-2", children: [_jsx(Button, { type: "submit", children: "Save" }), _jsx(Button, { variant: "outline", type: "button", onClick: onCancel, children: "Cancel" })] })] })] }); } return _jsx(_components.div, { className: "mint-w-full mint-mx-auto mint-py-8", children: _jsx(Flows, {}) }); }; const SignUpForm = () => { const _components = { a: "a", button: "button", div: "div", img: "img", span: "span", ..._provideComponents() }; return _jsxs(_components.div, { className: "mint-flex mint-flex-col mint-gap-2 mint-items-center mint-h-full", children: [_jsx(_components.img, { noZoom: true, src: "/docs/img/quickstarts/action_hero_dashboard.svg", alt: "Sign up for an Auth0 account", style: { width: "250px", height: "250px" } }), _jsxs(_components.span, { className: "mint-text-center", style: { width: "400px" }, children: ["Sign up for an", " ", _jsx(_components.a, { href: "https://auth0.com/signup", target: "_blank", rel: "noopener noreferrer", children: "Auth0 account" }), " ", "or", " ", _jsx(_components.span, { className: "mint-font-semibold text-primary mint-cursor-pointer", onClick: () => console.log("log in"), children: "log in" }), " ", "to your existing account to integrate directly with your own tenant."] }), _jsx(_components.button, { onClick: () => console.log("sign up"), className: "bg-primary dark:bg-primary-light mint-text-white mint-px-4 mint-py-2 mint-rounded-md mint-mt-4 mint-font-medium", style: { width: "140px" }, children: "Sign up" })] }); }; const SideMenuSectionItem = ({id, children}) => { const _components = { div: "div", ..._provideComponents() }; return _jsx(_components.div, { id: `side-menu-item-${id}`, className: "recipe-side-menu-item mint-flex mint-flex-col mint-w-full mint-h-full", children: children }); }; const SideMenu = ({sections, children}) => { const _components = { div: "div", ..._provideComponents() }; const [visibleSection, setVisibleSection] = useState(sections[0]?.id ?? null); const checkVisibility = () => { let currentVisible = null; const viewportHeight = window.innerHeight; const scrollY = window.scrollY; sections.forEach(({id}) => { const section = document.getElementById(id); if (section) { const rect = section.getBoundingClientRect(); const sectionTop = rect.top + scrollY; const sectionBottom = sectionTop + rect.height; const multiplier = viewportHeight > 1600 ? 0.34 : 0.22; if (scrollY + viewportHeight * multiplier >= sectionTop && scrollY <= sectionBottom) { currentVisible = id; } } }); if (currentVisible && currentVisible !== visibleSection) { setVisibleSection(currentVisible); } }; useEffect(() => { const throttledCheck = () => { setTimeout(checkVisibility, 100); }; checkVisibility(); window.addEventListener("scroll", throttledCheck); return () => { window.removeEventListener("scroll", throttledCheck); }; }, [sections, visibleSection]); useEffect(() => { sections.forEach(({id}) => { const section = document.getElementById(id); const sideMenuItem = document.getElementById(`side-menu-item-${id}`); if (section) { if (id === visibleSection) { section.classList.add("active-section"); } else { section.classList.remove("active-section"); } } if (sideMenuItem) { if (id === visibleSection) { sideMenuItem.classList.add("active-side-menu-item"); } else { sideMenuItem.classList.remove("active-side-menu-item"); } } }); }, [visibleSection, sections]); return _jsx(_components.div, { className: "recipe-side-menu mint-sticky mint-px-2 mint-py-1", style: { height: "calc(100vh - 7rem)", top: "7rem", scrollMarginTop: "var(--scroll-mt)" }, children: children.map(child => { if (child.props.id === visibleSection) { return child; } return null; }) }); }; const Section = ({id, title, stepNumber, children, isSingleColumn = false}) => { const _components = { div: "div", ..._provideComponents() }, {Step} = _components; if (!Step) _missingMdxReference("Step", true); return _jsx(_components.div, { id: id, className: `recipe-section mint-flex mint-flex-col mint-transition-opacity mint-duration-200 ${isSingleColumn ? "mint-opacity-100 dark:mint-opacity-100" : "mint-opacity-60 dark:mint-opacity-60"}`, children: _jsx(Step, { title: title, stepNumber: stepNumber, titleSize: "h3", children: children }) }); }; const Content = ({title, children}) => { const _components = { div: "div", h1: "h1", ..._provideComponents() }; return _jsxs(_components.div, { className: "recipe-content mint-flex mint-flex-col", children: [title && _jsx(_components.h1, { className: "mint-text-3xl", children: title }), children] }); }; const Recipe = ({children, isSingleColumn = false}) => { const _components = { div: "div", ..._provideComponents() }; return _jsx(_components.div, { className: `mint-pl-4 recipe-container mint-mx-auto mint-grid mint-grid-cols-1 mint-gap-10 mint-relative ${isSingleColumn ? "md:mint-grid-cols-1" : "md:mint-grid-cols-2"}`, children: children }); }; const sections = [{ id: "configure-auth0", title: "Configure Auth0" }, { id: "install-dependencies", title: "Install dependencies" }, { id: "configure-your-env-file", title: "Configure your .env file" }, { id: "create-an-application", title: "Create an application" }, { id: "update-settings-py", title: "Update settings.py" }, { id: "setup-your-application", title: "Setup your application" }, { id: "setup-your-route-handlers", title: "Setup your route handlers" }, { id: "register-your-routes", title: "Register your routes" }, { id: "add-templates", title: "Add templates" }, { id: "run-your-application", title: "Run your application" }]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h5: "h5", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Callout, CodeBlock, CodeGroup, Heading} = _components; if (!Callout) _missingMdxReference("Callout", true); if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!CodeGroup) _missingMdxReference("CodeGroup", true); if (!Heading) _missingMdxReference("Heading", true); return _jsxs(Recipe, { children: [_jsxs(Content, { children: [_jsxs(_components.p, { children: ["Auth0 allows you to add authentication and gain access to user profile information in your application. This guide\r\ndemonstrates how to integrate Auth0 with a Python ", _jsx(_components.a, { href: "https://www.djangoproject.com/", children: "Django" }), " application using the ", _jsx(_components.a, { href: "https://authlib.org/", children: "Authlib" }), " SDK."] }), _jsxs(Section, { id: sections[0].id, title: sections[0].title, stepNumber: "1", children: [_jsx(_components.p, { children: "To use Auth0 services, you’ll need to have an application set up in the Auth0 Dashboard. The Auth0 application is\r\nwhere you will configure how you want authentication to work for the project you are developing." }), _jsx(Heading, { level: "3", id: "configure-an-application", children: "Configure an application" }), _jsx(_components.p, { children: "Use the interactive selector to create a new Auth0 application or select an existing application that represents\r\nthe project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID\r\nthat your application code will use to call Auth0 APIs through the SDK." }), _jsxs(_components.p, { children: ["Any settings you configure using this quickstart will automatically update for your Application in the ", _jsx(_components.a, { href: "https://manage.auth0.com/dashboard/us/auth0-dsepaid/", children: "Dashboard" }), ", which is where you can manage your Applications in the future."] }), _jsx(_components.p, { children: "If you would rather explore a complete configuration, you can view a sample application instead." }), _jsx(Heading, { level: "3", id: "configure-callback-urls", children: "Configure Callback URLs" }), _jsx(_components.p, { children: "A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have\r\nauthenticated. If not set, users will not be returned to your application after they log in." }), _jsx(Callout, { icon: "file-lines", iconType: "regular", children: _jsxs(_components.p, { children: ["If you are following along with our sample project, set this to\r\n", _jsx(_components.code, { children: "http://localhost:3000/callback" }), "."] }) }), _jsx(Heading, { level: "3", id: "configure-logout-urls", children: "Configure Logout URLs" }), _jsx(_components.p, { children: "A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged\r\nout. If not set, users will not be able to log out from your application and will receive an error." }), _jsx(Callout, { icon: "file-lines", iconType: "regular", children: _jsxs(_components.p, { children: ["If you are following along with our sample project, set this to ", _jsx(_components.code, { children: "http://localhost:3000" }), "."] }) })] }), _jsxs(Section, { id: sections[1].id, title: sections[1].title, stepNumber: "2", children: [_jsxs(_components.p, { children: ["For this integration, you will add several library dependencies, such as Authlib. Create a\r\n", _jsx(_components.code, { children: "requirements.txt" }), " file in your project directory, and include the following:"] }), _jsx(CodeBlock, { filename: "", lines: "true", numberOfLines: "5", language: "text", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "text", children: _jsxs(_components.code, { language: "text", numberOfLines: "5", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "authlib ~= 1.0" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "django ~= 4.0" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "python-dotenv ~= 0.19" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "requests ~= 2.27" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }) }), _jsx(_components.p, { children: "Run the following command from your shell to make these dependencies available:" }), _jsx(CodeBlock, { filename: "", lines: "true", numberOfLines: "2", language: "text", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "text", children: _jsxs(_components.code, { language: "text", numberOfLines: "2", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "pip install -r requirements.txt" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }) })] }), _jsxs(Section, { id: sections[2].id, title: sections[2].title, stepNumber: "3", children: [_jsxs(_components.p, { children: ["Next, create an ", _jsx(_components.code, { children: ".env" }), " file in your project directory. This file will hold your client keys and other\r\nconfiguration details."] }), _jsx(CodeBlock, { filename: "", lines: "true", numberOfLines: "4", language: "text", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "text", children: _jsxs(_components.code, { language: "text", numberOfLines: "4", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "AUTH0_CLIENT_ID=mz9iNEIo2PHu7oeh8QRt19ndTyyCIgai" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "AUTH0_CLIENT_SECRET=yLTW7npKO4g1HHsCENiZbOaHHXLmhVefJxdNnXcyhOBOomZ2tgjJjSC2pMK7Swvr" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "AUTH0_DOMAIN=dev-gja8kxz4ndtex3rq.us.auth0.com" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }) })] }), _jsxs(Section, { id: sections[3].id, title: sections[3].title, stepNumber: "4", children: [_jsx(_components.p, { children: "If you already have a Django application setup, skip to the next step. For a new application project, run the\r\nfollowing command:" }), _jsx(CodeBlock, { filename: "", lines: "true", numberOfLines: "2", language: "text", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "text", children: _jsxs(_components.code, { language: "text", numberOfLines: "2", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "django-admin startproject webappexample" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }) }), _jsx(_components.p, { children: "Change to the new project folder:" }), _jsx(CodeBlock, { filename: "", lines: "true", numberOfLines: "2", language: "text", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "text", children: _jsxs(_components.code, { language: "text", numberOfLines: "2", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "cd webappexample" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }) })] }), _jsxs(Section, { id: sections[4].id, title: sections[4].title, stepNumber: "5", children: [_jsxs(_components.p, { children: ["Open the ", _jsx(_components.code, { children: "webappexample/settings.py" }), " file to review the ", _jsx(_components.code, { children: ".env" }), " values."] }), _jsxs(_components.p, { children: ["At the top of the file, add the ", _jsx(_components.code, { children: "os" }), " and ", _jsx(_components.code, { children: "dotenv" }), " imports."] }), _jsxs(_components.p, { children: ["Next, beneath the ", _jsx(_components.code, { children: "BASE_DIR" }), " definition, add the ", _jsx(_components.code, { children: "TEMPLATE_DIR" }), " variable."] }), _jsxs(_components.p, { children: ["Next, find the ", _jsx(_components.code, { children: "TEMPLATES" }), " variable and update the ", _jsx(_components.code, { children: "DIRS" }), " value to add our\r\n", _jsx(_components.code, { children: "TEMPLATE_DIR" }), " string. This determines the path of the template files, which you will create in a\r\nfuture step. Keep any other content of this array the same."] }), _jsx(_components.p, { children: "At the end of this file, add the code to load the Auth0 config." })] }), _jsxs(Section, { id: sections[5].id, title: sections[5].title, stepNumber: "6", children: [_jsxs(_components.p, { children: ["To begin creating your application, open the ", _jsx(_components.code, { children: "webappexample/views.py" }), " file in your IDE."] }), _jsx(_components.p, { children: "Import all the libraries your application needs." }), _jsx(_components.p, { children: "Now you can configure Authlib to handle your application’s authentication with Auth0." }), _jsxs(_components.p, { children: ["Learn more about the configuration options available for Authlib’s OAuth ", _jsx(_components.code, { children: "register()" }), " method from ", _jsx(_components.a, { href: "https://docs.authlib.org/en/latest/client/frameworks.html#using-oauth-2-0-to-log-in", children: "their documentation." })] })] }), _jsxs(Section, { id: sections[6].id, title: sections[6].title, stepNumber: "7", children: [_jsx(_components.p, { children: "In this example, you will add four routes for your application: the login, callback, logout, and index routes." }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "login" }), " - When visitors to your app visit the ", _jsx(_components.code, { children: "/login" }), " route, they will reach Auth0 to\r\nbegin the authentication flow."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "callback" }), " - After your users finish logging in with Auth0, they will return to your application\r\nat the ", _jsx(_components.code, { children: "/callback" }), " route. This route saves the session for the user and bypasses the need for them\r\nto login again when they return."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "logout" }), " - The ", _jsx(_components.code, { children: "/logout" }), " route signs users out from your application. This route clears\r\nthe user session in your app and redirects to the Auth0 logout endpoint to ensure the session is no longer\r\nsaved. Then, the application redirects the user to your home route."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "index" }), " - The home route will render an authenticated user’s details or allow visitors to sign in."] }), "\n"] })] }), _jsxs(Section, { id: sections[7].id, title: sections[7].title, stepNumber: "8", children: [_jsxs(_components.p, { children: ["Replace the contents of your ", _jsx(_components.code, { children: "webappexample/urls.py" }), " file with the code on the right to connect to\r\nthese new routes."] }), _jsxs(_components.p, { children: ["This will route the ", _jsx(_components.code, { children: "/login" }), ", ", _jsx(_components.code, { children: "/callback" }), ", ", _jsx(_components.code, { children: "/logout" }), " and ", _jsx(_components.code, { children: "/" }), " routes\r\nto the correct handlers."] })] }), _jsxs(Section, { id: sections[8].id, title: sections[8].title, stepNumber: "9", children: [_jsx(_components.p, { children: "Next, you will create a template file used in the home page route." }), _jsxs(_components.p, { children: ["Create a new sub-directory within the ", _jsx(_components.code, { children: "webappexample" }), " folder named ", _jsx(_components.code, { children: "templates" }), ", and create\r\na ", _jsx(_components.code, { children: "index.html" }), " file."] }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "index.html" }), " file will contain template code to display the user’s info if logged in or present\r\nthem with a login button if logged out."] })] }), _jsxs(Section, { id: sections[9].id, title: sections[9].title, stepNumber: "10", children: [_jsx(_components.p, { children: "You’re ready to run your application! From your project directory, open a shell and use:" }), _jsx(CodeBlock, { filename: "", lines: "true", numberOfLines: "3", language: "text", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "text", children: _jsxs(_components.code, { language: "text", numberOfLines: "3", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "python3 manage.py migrate" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { children: "python3 manage.py runserver 3000" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, {}) })] }) }) }), _jsxs(_components.p, { children: ["Your application should now be ready to open from your browser at ", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "."] }), _jsxs(Callout, { icon: "file-lines", iconType: "regular", children: [_jsx(_components.h5, { children: "Checkpoint" }), _jsxs(_components.p, { children: ["Visit ", _jsx(_components.a, { href: "http://localhost:3000/", children: "http://localhost:3000" }), " to verify. You should find a login button routing to\r\nAuth0 for login, then back to your application to see your profile information."] })] })] }), _jsx(Heading, { level: "2", id: "next-steps", children: "Next Steps" }), _jsx(_components.p, { children: "Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application." }), _jsx(_components.p, { children: "This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:" }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://manage.auth0.com/dashboard/us/dev-gja8kxz4ndtex3rq", children: "Auth0 Dashboard" }), " - Learn how to configure and manage your Auth0 tenant and applications"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://marketplace.auth0.com/", children: "Auth0 Marketplace" }), " - Discover integrations you can enable to extend Auth0’s functionality"] }), "\n"] })] }), _jsxs(SideMenu, { sections: sections, children: [_jsx(SideMenuSectionItem, { id: sections[0].id, children: _jsx(SignUpForm, {}) }), _jsx(SideMenuSectionItem, { id: sections[1].id, children: _jsx(SignUpForm, {}) }), _jsx(SideMenuSectionItem, { id: sections[2].id, children: _jsx(SignUpForm, {}) }), _jsx(SideMenuSectionItem, { id: sections[3].id, children: _jsx(SignUpForm, {}) }), _jsx(SideMenuSectionItem, { id: sections[4].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "webappexample/templates/index.html", lines: "true", numberOfLines: "16", language: "html", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "html", children: _jsxs(_components.code, { language: "html", numberOfLines: "16", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "html" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "head" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "meta" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " charset" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"utf-8\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "title" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Auth0 Example" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "body" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% if session %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome {{session.userinfo.name}}!" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'logout' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "pre" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{{pretty}}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% else %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome Guest" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'login' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% endif %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/settings.py", lines: "true", numberOfLines: "28", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "28", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " pathlib " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " dotenv " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv, find_dotenv" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Build paths inside the project like this: BASE_DIR / 'subdir'." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: "__file__" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ").resolve().parent.parent" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.path.join(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"webappexample\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"templates\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATES" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Leave other lines as they are; we're just updating `DIRS`." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"DIRS\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": [" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load environment definition file" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " find_dotenv()" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "if" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: " ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load Auth0 application settings into memory" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_DOMAIN\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_ID\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_SECRET\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/urls.py", lines: "true", numberOfLines: "10", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "10", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " . " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " views" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "urlpatterns " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.index, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.login, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.logout, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.callback, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/views.py", lines: "true", highlight: "[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]", numberOfLines: "52", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "52", children: [_jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " json" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " authlib.integrations.django_client " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.conf " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " settings" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.shortcuts " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect, render, redirect" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " reverse" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urllib.parse " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " quote_plus, urlencode" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth()" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth.register(" }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"auth0\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_id" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_secret" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_kwargs" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"scope\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"openid profile email\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " server_metadata_url" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/.well-known/openid-configuration\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_redirect(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request, request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " callback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_access_token(request)" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session[" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "] " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")))" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session.clear()" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/v2/logout?\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " +" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urlencode(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"returnTo\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"client_id\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " quote_via" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "quote_plus," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " index" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " render(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"index.html\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " context" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"session\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"pretty\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": json.dumps(request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "), " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "indent" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "4" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[5].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "webappexample/views.py", lines: "true", highlight: "[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]", numberOfLines: "52", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "52", children: [_jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " json" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " authlib.integrations.django_client " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.conf " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " settings" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.shortcuts " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect, render, redirect" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " reverse" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urllib.parse " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " quote_plus, urlencode" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth()" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth.register(" }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"auth0\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_id" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_secret" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_kwargs" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"scope\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"openid profile email\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " server_metadata_url" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/.well-known/openid-configuration\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_redirect(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request, request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " callback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_access_token(request)" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session[" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "] " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")))" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session.clear()" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/v2/logout?\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " +" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urlencode(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"returnTo\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"client_id\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " quote_via" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "quote_plus," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " index" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " render(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"index.html\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " context" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"session\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"pretty\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": json.dumps(request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "), " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "indent" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "4" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/templates/index.html", lines: "true", numberOfLines: "16", language: "html", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "html", children: _jsxs(_components.code, { language: "html", numberOfLines: "16", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "html" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "head" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "meta" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " charset" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"utf-8\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "title" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Auth0 Example" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "body" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% if session %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome {{session.userinfo.name}}!" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'logout' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "pre" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{{pretty}}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% else %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome Guest" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'login' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% endif %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/settings.py", lines: "true", numberOfLines: "28", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "28", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " pathlib " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " dotenv " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv, find_dotenv" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Build paths inside the project like this: BASE_DIR / 'subdir'." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: "__file__" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ").resolve().parent.parent" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.path.join(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"webappexample\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"templates\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATES" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Leave other lines as they are; we're just updating `DIRS`." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"DIRS\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": [" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load environment definition file" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " find_dotenv()" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "if" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: " ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load Auth0 application settings into memory" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_DOMAIN\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_ID\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_SECRET\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/urls.py", lines: "true", numberOfLines: "10", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "10", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " . " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " views" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "urlpatterns " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.index, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.login, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.logout, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.callback, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[6].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "webappexample/views.py", lines: "true", highlight: "[20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52]", numberOfLines: "52", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "52", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " json" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " authlib.integrations.django_client " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.conf " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " settings" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.shortcuts " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect, render, redirect" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " reverse" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urllib.parse " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " quote_plus, urlencode" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth()" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth.register(" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"auth0\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_id" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_secret" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_kwargs" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"scope\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"openid profile email\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " server_metadata_url" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/.well-known/openid-configuration\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_redirect(" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request, request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))" })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " callback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_access_token(request)" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session[" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "] " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")))" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session.clear()" }) }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/v2/logout?\"" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " +" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urlencode(" })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"returnTo\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"client_id\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " quote_via" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "quote_plus," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )," }) }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " index" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " render(" })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request," }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"index.html\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " context" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"session\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"pretty\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": json.dumps(request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "), " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "indent" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "4" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/templates/index.html", lines: "true", numberOfLines: "16", language: "html", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "html", children: _jsxs(_components.code, { language: "html", numberOfLines: "16", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "html" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "head" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "meta" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " charset" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"utf-8\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "title" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Auth0 Example" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "body" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% if session %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome {{session.userinfo.name}}!" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'logout' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "pre" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{{pretty}}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% else %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome Guest" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'login' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% endif %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/settings.py", lines: "true", numberOfLines: "28", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "28", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " pathlib " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " dotenv " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv, find_dotenv" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Build paths inside the project like this: BASE_DIR / 'subdir'." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: "__file__" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ").resolve().parent.parent" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.path.join(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"webappexample\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"templates\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATES" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Leave other lines as they are; we're just updating `DIRS`." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"DIRS\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": [" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load environment definition file" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " find_dotenv()" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "if" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: " ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load Auth0 application settings into memory" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_DOMAIN\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_ID\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_SECRET\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/urls.py", lines: "true", numberOfLines: "10", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "10", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " . " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " views" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "urlpatterns " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.index, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.login, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.logout, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.callback, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[7].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "webappexample/urls.py", lines: "true", numberOfLines: "10", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "10", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " . " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " views" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "urlpatterns " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.index, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.login, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.logout, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.callback, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/templates/index.html", lines: "true", numberOfLines: "16", language: "html", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "html", children: _jsxs(_components.code, { language: "html", numberOfLines: "16", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "html" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "head" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "meta" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " charset" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"utf-8\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "title" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Auth0 Example" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "body" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% if session %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome {{session.userinfo.name}}!" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'logout' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "pre" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{{pretty}}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% else %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome Guest" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'login' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% endif %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/settings.py", lines: "true", numberOfLines: "28", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "28", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " pathlib " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " dotenv " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv, find_dotenv" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Build paths inside the project like this: BASE_DIR / 'subdir'." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: "__file__" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ").resolve().parent.parent" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.path.join(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"webappexample\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"templates\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATES" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Leave other lines as they are; we're just updating `DIRS`." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"DIRS\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": [" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load environment definition file" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " find_dotenv()" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "if" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: " ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load Auth0 application settings into memory" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_DOMAIN\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_ID\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_SECRET\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/views.py", lines: "true", highlight: "[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]", numberOfLines: "52", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "52", children: [_jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " json" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " authlib.integrations.django_client " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.conf " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " settings" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.shortcuts " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect, render, redirect" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " reverse" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urllib.parse " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " quote_plus, urlencode" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth()" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth.register(" }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"auth0\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_id" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_secret" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_kwargs" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"scope\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"openid profile email\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " server_metadata_url" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/.well-known/openid-configuration\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_redirect(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request, request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " callback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_access_token(request)" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session[" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "] " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")))" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session.clear()" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/v2/logout?\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " +" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urlencode(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"returnTo\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"client_id\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " quote_via" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "quote_plus," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " index" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " render(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"index.html\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " context" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"session\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"pretty\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": json.dumps(request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "), " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "indent" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "4" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[8].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "webappexample/templates/index.html", lines: "true", numberOfLines: "16", language: "html", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "html", children: _jsxs(_components.code, { language: "html", numberOfLines: "16", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "html" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "head" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "meta" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " charset" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"utf-8\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "title" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Auth0 Example" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "<" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "body" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% if session %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome {{session.userinfo.name}}!" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'logout' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "pre" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{{pretty}}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% else %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "h1" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Welcome Guest" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "><" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "a" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " href" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"{% url 'login' %}\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{% endif %}" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: "" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/settings.py", lines: "true", numberOfLines: "28", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "28", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " pathlib " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " dotenv " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv, find_dotenv" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Build paths inside the project like this: BASE_DIR / 'subdir'." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Path(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: "__file__" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ").resolve().parent.parent" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.path.join(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "BASE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"webappexample\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"templates\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATES" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Leave other lines as they are; we're just updating `DIRS`." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"DIRS\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": [" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "TEMPLATE_DIR" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# ... other settings ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load environment definition file" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " find_dotenv()" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "if" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: " ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ":" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " load_dotenv(" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "ENV_FILE" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "# Load Auth0 application settings into memory" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_DOMAIN\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_ID\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " os.environ.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"AUTH0_CLIENT_SECRET\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/urls.py", lines: "true", numberOfLines: "10", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "10", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " . " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " views" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "urlpatterns " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " [" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.index, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.login, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"login\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.logout, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"logout\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " path(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", views.callback, " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "webappexample/views.py", lines: "true", highlight: "[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]", numberOfLines: "52", language: "python", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "python", children: _jsxs(_components.code, { language: "python", numberOfLines: "52", children: [_jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " json" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " authlib.integrations.django_client " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.conf " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " settings" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.shortcuts " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect, render, redirect" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " django.urls " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " reverse" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urllib.parse " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " quote_plus, urlencode" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " OAuth()" })] }), "\n", _jsx(_components.span, { className: "line line-highlight" }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "oauth.register(" }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"auth0\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_id" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_secret" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_SECRET" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " client_kwargs" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"scope\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": " }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"openid profile email\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line line-highlight", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " server_metadata_url" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/.well-known/openid-configuration\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line line-highlight", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_redirect(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request, request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"callback\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " callback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " oauth.auth0.authorize_access_token(request)" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session[" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "] " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " token" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")))" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " logout" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request.session.clear()" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " redirect(" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " f" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"https://" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_DOMAIN" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "/v2/logout?\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " +" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " urlencode(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"returnTo\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.build_absolute_uri(reverse(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"index\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "))," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"client_id\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": settings." }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#D4D4D4" }, children: "AUTH0_CLIENT_ID" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " quote_via" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "quote_plus," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "def" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " index" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "request" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "):" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " render(" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " request," }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"index.html\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: " context" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"session\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"pretty\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ": json.dumps(request.session.get(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"user\"" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "), " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "indent" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "4" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " )" }) }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[9].id, children: _jsx(SignUpForm, {}) })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { LoggedInForm, SignUpForm, SideMenuSectionItem, SideMenu, Section, Content, Recipe, sections, 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."); }

Regular Web App

Single Page App

Native/Mobile App

Backend/API