"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 dark:mint-text-black 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`, 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: "getting-started", title: "Getting started" }, { id: "configure-auth0", title: "Configure Auth0" }, { id: "install-the-auth0-react-sdk", title: "Install the Auth0 React SDK" }, { id: "configure-the-auth0provider-component", title: "Configure the Auth0Provider component" }, { id: "add-login-to-your-application", title: "Add login to your application" }, { id: "handle-the-login-callback", title: "Handle the login callback" }, { id: "add-logout-to-your-application", title: "Add logout to your application" }, { id: "show-the-user-profile", title: "Show the user profile" }]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h5: "h5", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {CodeBlock, CodeGroup, Heading, Info, Note} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!CodeGroup) _missingMdxReference("CodeGroup", true); if (!Heading) _missingMdxReference("Heading", true); if (!Info) _missingMdxReference("Info", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(Recipe, { children: [_jsxs(Content, { children: [_jsxs(_components.p, { children: ["Auth0 allows you to quickly add authentication and gain access to user profile information in your application.\nThis guide demonstrates how to integrate Auth0 with an Ionic (React) & Capacitor application using the ", _jsx(_components.a, { href: "https://github.com/auth0/auth0-react", children: "Auth0 React SDK" }), "."] }), _jsxs(Section, { id: sections[0].id, title: sections[0].title, stepNumber: "1", children: [_jsxs(_components.p, { children: ["This quickstart assumes you already have an ", _jsx(_components.a, { href: "https://ionicframework.com/", children: "Ionic" }), " application up and running with ", _jsx(_components.a, { href: "https://capacitorjs.com/", children: "Capacitor" }), ". If not, check out the ", _jsx(_components.a, { href: "https://capacitorjs.com/docs/getting-started/with-ionic", children: "Using\nCapacitor with Ionic Framework guide" }), " to get started with a simple app, or clone ", _jsx(_components.a, { href: "https://github.com/auth0-samples/auth0-ionic-samples", children: "our sample\napps" }), "."] }), _jsxs(_components.p, { children: ["You should also be familiar with the ", _jsx(_components.a, { href: "https://capacitorjs.com/docs/basics/workflow", children: "Capacitor development workflow" }), "."] })] }), _jsxs(Section, { id: sections[1].id, title: sections[1].title, stepNumber: "2", children: [_jsx(_components.p, { children: "To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is\nwhere you will configure how you want authentication to work for your project." }), _jsx(Info, { children: _jsxs(_components.p, { children: ["Throughout this article, ", _jsx(_components.code, { children: "YOUR_PACKAGE_ID" }), " is your application’s package ID. This can be\nfound and configured in the ", _jsx(_components.code, { children: "appId" }), " field in your ", _jsx(_components.code, { children: "capacitor.config.ts" }), " file. See\n", _jsx(_components.a, { href: "https://capacitorjs.com/docs/config#schema", children: "Capacitor’s Config schema" }), " for more info."] }) }), _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\nthe project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID\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/#/", children: "Dashboard" }), ", which is where you\ncan 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\nauthenticated. If not set, users will not be returned to your application after they log in." }), _jsxs(Info, { children: [_jsx(_components.p, { children: "If you are following along with our sample project, set this to:" }), _jsx(_components.p, { children: _jsx(_components.code, { children: "YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/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\nout. If not set, users will not be able to log out from your application and will receive an error." }), _jsxs(Info, { children: [_jsx(_components.p, { children: "If you are following along with our sample project, set this to:" }), _jsxs(_components.p, { children: [_jsx(_components.code, { children: "YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback" }), "."] })] }), _jsx(Heading, { level: "3", id: "configure-allowed-origins", children: "Configure Allowed Origins" }), _jsxs(_components.p, { children: ["To be able to make requests from your native application to Auth0, set the following ", _jsx(_components.strong, { children: "Allowed Origins" }), " in\nyour ", _jsx(_components.a, { href: "https://manage.auth0.com/dashboard/#/applications/%7ByourClientId%7D/settings", children: "Application Settings" }), "."] }), _jsx(Info, { children: _jsxs(_components.p, { children: ["If you are following along with our sample project, set this to\n", _jsx(_components.code, { children: "capacitor://localhost, http://localhost" }), " for iOS and Android respectively."] }) }), _jsxs(_components.p, { children: ["Lastly, be sure that the ", _jsx(_components.strong, { children: "Application Type" }), " for your application is set to ", _jsx(_components.strong, { children: "Native" }), " in the ", _jsx(_components.a, { href: "https://manage.auth0.com/dashboard/#/applications/%7ByourClientId%7D/settings", children: "Application Settings" }), "."] })] }), _jsxs(Section, { id: sections[2].id, title: sections[2].title, stepNumber: "3", children: [_jsx(_components.p, { children: "Run the following command within your project directory to install the Auth0 React SDK:" }), _jsx(CodeBlock, { numberOfLines: "1", language: "shellscript", 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: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " @auth0/auth0-react" })] }), "\n"] }) }) }), _jsxs(_components.p, { children: ["The SDK exposes methods and variables that help you integrate Auth0 with your React application idiomatically\nusing ", _jsx(_components.a, { href: "https://reactjs.org/docs/hooks-overview.html", children: "React\nHooks" }), " or ", _jsx(_components.a, { href: "https://reactjs.org/docs/higher-order-components.html", children: "Higher-Order Components" }), "."] }), _jsx(Heading, { level: "3", id: "install-capacitor-plugins", children: "Install Capacitor plugins" }), _jsx(_components.p, { children: "This quickstart and sample make use of some of Capacitor’s official plugins. Install these into your app using\nthe following command:" }), _jsx(CodeBlock, { numberOfLines: "1", language: "shellscript", 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: "shellscript", children: _jsxs(_components.code, { language: "shellscript", numberOfLines: "1", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#DCDCAA" }, children: "npm" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " install" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " @capacitor/browser" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " @capacitor/app" })] }), "\n"] }) }) }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://capacitorjs.com/docs/apis/browser", children: "@capacitor/browser" }), ": Allows you to interact with the device’s\nsystem browser and is used to open the URL to Auth0’s authorization endpoint."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.a, { href: "https://capacitorjs.com/docs/apis/app", children: "@capacitor/app" }), ": Allows you to subscribe to high-level app events,\nuseful for handling callbacks from Auth0."] }), "\n"] }), _jsx(Info, { children: _jsxs(_components.p, { children: ["Capacitor’s Browser plugin on iOS uses ", _jsx(_components.a, { href: "https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller", children: "SFSafariViewController" }), ", which on iOS 11+ does not share\ncookies with Safari on the device. This means that SSO will not work on those devices. If you need\nSSO, please instead use a compatible plugin that uses ", _jsx(_components.a, { href: "https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession", children: "ASWebAuthenticationSession" }), "."] }) })] }), _jsxs(Section, { id: sections[3].id, title: sections[3].title, stepNumber: "4", children: [_jsxs(_components.p, { children: ["Under the hood, the Auth0 React SDK uses ", _jsx(_components.a, { href: "https://reactjs.org/docs/context.html", children: "React Context" }), " to manage the authentication state of your users. One way to\nintegrate Auth0 with your React app is to wrap your root component with an ", _jsx(_components.code, { children: "Auth0Provider" }), " you can\nimport from the SDK."] }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "Auth0Provider" }), " component takes the following props:"] }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "domain" }), ": The ", _jsx(_components.code, { children: "domain" }), "value present under the **Settings **of the application you\ncreated in your Auth0 Dashboard, or your custom domain if using Auth0’s Custom Domains feature."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "clientId" }), ": The Client ID value present under the **Settings **of the application you created\nin your Auth0 Dashboard."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useRefreshTokens" }), ": To use auth0-react with Ionic on Android and iOS, it’s required to enable\nrefresh tokens."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "useRefreshTokensFallback" }), ": To use auth0-react with Ionic on Android and iOS, it’s required to\ndisable the iframe fallback."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "authorizationParams.redirect_uri" }), ": The URL to where you’d like to redirect your users after they\nauthenticate with Auth0."] }), "\n"] }), _jsxs(Info, { children: [_jsxs(_components.p, { children: ["To persist authentication after closing and reopening the application, you may want to set\n", _jsx(_components.code, { children: "cacheLocation" }), " to ", _jsx(_components.code, { children: "localstorage" }), " when configuring the SDK, but please be aware of\n", _jsx(_components.a, { href: "/docs/libraries/auth0-single-page-app-sdk#change-storage-options", children: "the risks of\nstoring tokens in localstorage" }), ". Also, localstorage should be treated as ", _jsx(_components.strong, { children: "transient" }), " in\nCapacitor app as the data might be recovered unexpectedly in certain circumstances. Please read the ", _jsx(_components.a, { href: "https://capacitorjs.com/docs/guides/storage#why-cant-i-just-use-localstorage-or-indexeddb", children: "guidance on storage in the Capacitor docs" }), "."] }), _jsxs(_components.p, { children: ["Additionally, the SDK has the ability to ", _jsx(_components.a, { href: "https://github.com/auth0/auth0-spa-js/blob/master/EXAMPLES.md#creating-a-custom-cache", children: "use a custom cache implementation" }), " to store tokens, if\nyou have a requirement to use a more secure and persistent storage mechanism."] }), _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Note" }), " that we recommend ", _jsx(_components.strong, { children: "against" }), " using ", _jsx(_components.a, { href: "https://capacitorjs.com/docs/apis/storage", children: "Capacitor’s Storage plugin" }), " to store tokens, as this is\nbacked by ", _jsx(_components.a, { href: "https://developer.apple.com/documentation/foundation/userdefaults", children: "UserDefaults" }), " and ", _jsx(_components.a, { href: "https://developer.android.com/reference/android/content/SharedPreferences", children: "SharedPreferences" }), " on iOS and Android respectively. Data stored using\nthese APIs is not encrypted, not secure, and could also be synced to the cloud."] })] }), _jsxs(Note, { children: [_jsx(_components.h5, { children: "Checkpoint" }), _jsxs(_components.p, { children: ["Add the ", _jsx(_components.code, { children: "Auth0Provider" }), " component in a way that wraps your ", _jsx(_components.code, { children: "App" }), " component, then\nrun your application to verify that the SDK is initializing correctly and your application is not throwing\nany errors related to Auth0."] })] })] }), _jsxs(Section, { id: sections[4].id, title: sections[4].title, stepNumber: "5", children: [_jsxs(_components.p, { children: ["In a Capacitor application, the ", _jsx(_components.a, { href: "https://capacitorjs.com/docs/apis/browser", children: "Capacitor’s Browser plugin" }), " performs a redirect to the Auth0 ", _jsx(_components.a, { href: "https://auth0.com/universal-login", children: "Universal Login Page" }), ". Set the ", _jsx(_components.code, { children: "openUrl" }), "\nparameter on the ", _jsx(_components.code, { children: "loginWithRedirect" }), " function to use ", _jsx(_components.code, { children: "Browser.open" }), " so that the URL is\nopened using the device’s system browser component (", _jsx(_components.a, { href: "https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller", children: "SFSafariViewController" }), " on iOS, and ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/android/custom-tabs", children: "Chrome\nCustom Tabs" }), " on Android)."] }), _jsx(Info, { children: _jsxs(_components.p, { children: ["By default, the SDK’s ", _jsx(_components.code, { children: "loginWithRedirect" }), " method uses ", _jsx(_components.code, { children: "window.location.href" }), " to\nnavigate to the login page in the default browser application on the user’s device rather than the\nsystem browser component appropriate for the platform. The user would leave your application to\nauthenticate and could make for a suboptimal user experience."] }) }), _jsxs(Note, { children: [_jsx(_components.h5, { children: "Checkpoint" }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "loginWithRedirect" }), " function tells the SDK to initiate the login flow, using the\n", _jsx(_components.code, { children: "Browser.open" }), " function to open the login URL with the platform’s system browser component by\nsetting the ", _jsx(_components.code, { children: "openUrl" }), " parameter. This provides a way for your user to log in to your\napplication. Users redirect to the login page at Auth0 and do not receive any errors."] })] })] }), _jsxs(Section, { id: sections[5].id, title: sections[5].title, stepNumber: "6", children: [_jsxs(_components.p, { children: ["Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL\nscheme. The ", _jsx(_components.code, { children: "appUrlOpen" }), " event must be handled within your app. You can call the\n", _jsx(_components.code, { children: "handleRedirectCallback" }), " method from the Auth0 SDK to initialize the authentication state."] }), _jsxs(_components.p, { children: ["You can only use this method on a redirect from Auth0. To verify success, check for the presence of the\n", _jsx(_components.code, { children: "code" }), " and ", _jsx(_components.code, { children: "state" }), " parameters in the URL."] }), _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "Browser.close()" }), " method should close the browser when this event is raised."] }), _jsx(Info, { children: _jsxs(_components.p, { children: ["This article assumes you will be using Custom URL Schemes to handle the callback within your\napplication. To do this, register your ", _jsx(_components.code, { children: "YOUR_PACKAGE_ID" }), " as a URL scheme for your chosen\nplatform. To learn more, read ", _jsx(_components.a, { href: "https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app", children: "Defining a Custom URL Scheme" }), " for iOS, or ", _jsx(_components.a, { href: "https://developer.android.com/training/app-links/deep-linking", children: "Create Deep Links to App Content" }), " for Android."] }) }), _jsxs(Note, { children: [_jsx(_components.h5, { children: "Checkpoint" }), _jsxs(_components.p, { children: ["Add the ", _jsx(_components.code, { children: "appUrlOpen" }), " to your application’s ", _jsx(_components.code, { children: "App" }), " component and log in. The browser\nwindow should close once the user authenticates and logs in to your app."] })] })] }), _jsxs(Section, { id: sections[6].id, title: sections[6].title, stepNumber: "7", children: [_jsxs(_components.p, { children: ["Now that users can log in, you need to configure ", _jsx(_components.a, { href: "https://auth0.com/docs/logout/guides/logout-auth0", children: "a way to log out" }), ". Users must redirect to the Auth0 logout endpoint in the browser to clear\ntheir browser session. Again, Capacitor’s Browser plugin should perform this redirect so that the user does not\nleave your app and receive a suboptimal experience."] }), _jsx(_components.p, { children: "To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:" }), _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your\nregistered custom scheme and Auth0 domain. Add it to your **Allowed Logout URLs **configuration in the\nAuth0 Dashboard" }), "\n", _jsxs(_components.li, { children: ["Logout from the SDK by calling ", _jsx(_components.code, { children: "logout" }), ", and pass your redirect URL back as the\n", _jsx(_components.code, { children: "logoutParams.returnTo" }), " parameter."] }), "\n", _jsxs(_components.li, { children: ["Set the ", _jsx(_components.code, { children: "openUrl" }), " parameter to a callback that uses the Capacitor browser plugin to open the URL\nusing ", _jsx(_components.code, { children: "Browser.open" }), "."] }), "\n"] }), _jsx(Info, { children: _jsxs(_components.p, { children: ["Similar to the login step, if you do not set ", _jsx(_components.code, { children: "openUrl" }), " when calling ", _jsx(_components.code, { children: "logout" }), ", the\nSDK redirects the user to the logout URL using the default browser application on the device, which\nprovides a suboptimal user experience."] }) }), _jsxs(Note, { children: [_jsx(_components.h5, { children: "Checkpoint" }), _jsxs(_components.p, { children: ["Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then\nto the address you specified in the ", _jsx(_components.code, { children: "returnTo" }), " parameter. Check that you are no longer logged\nin to your application."] })] })] }), _jsxs(Section, { id: sections[7].id, title: sections[7].title, stepNumber: "8", children: [_jsxs(_components.p, { children: ["The Auth0 React SDK retrieves the user’s profile\nassociated with logged-in users in whatever component you need, such as their name or profile picture, to\npersonalize the user interface. The profile information is available through the ", _jsx(_components.code, { children: "user" }), " property\nexposed by the ", _jsx(_components.code, { children: "useAuth0()" }), " hook."] }), _jsxs(_components.p, { children: ["Initializing the SDK is asynchronous, and you should guard the user profile by checking the\n", _jsx(_components.code, { children: "isLoading" }), " and ", _jsx(_components.code, { children: "user" }), " properties. Once ", _jsx(_components.code, { children: "isLoading" }), " is ", _jsx(_components.code, { children: "false" }), " and\n", _jsx(_components.code, { children: "user" }), " has a value, the user profile can be used."] }), _jsxs(Note, { children: [_jsx(_components.h5, { children: "Checkpoint" }), _jsx(_components.p, { children: "Provide a way for your users to see their user profile details within the app and verify you are able to\nretrieve and see your profile information on screen once you have logged in." })] })] }), _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: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "index.tsx", lines: "true", numberOfLines: "20", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "20", 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": "#9CDCFE" }, children: " React" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react-dom/client'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Auth0Provider" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " './App'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " root" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "document" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'root'" }), _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: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "root" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "render" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Auth0Provider" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " domain" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"dev-gja8kxz4ndtex3rq.us.auth0.com\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " clientId" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"mz9iNEIo2PHu7oeh8QRt19ndTyyCIgai\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokens" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "true" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokensFallback" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "false" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " authorizationParams" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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": "#9CDCFE" }, children: " redirect_uri:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsx(_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": "#4EC9B0" }, children: "App" }), _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(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "login-button.tsx", lines: "true", numberOfLines: "23", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "23", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "loginWithRedirect" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loginWithRedirect" }), _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": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log in" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "logout-button.tsx", lines: "true", numberOfLines: "30", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "30", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "// This should reflect the URL added earlier to your \"Allowed Logout URLs\" setting" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// in the Auth0 dashboard." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " logoutUri" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "logout" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, 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": "#9CDCFE" }, children: " logoutParams:" }), _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": "#9CDCFE" }, children: " returnTo:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " logoutUri" })] }), "\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: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log out" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "app.tsx", lines: "true", numberOfLines: "51", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "51", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "user-profile.tsx", lines: "true", numberOfLines: "18", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "18", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "isLoading" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " // If the SDK is not ready, or a user is not authenticated, exit." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "isLoading" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " ||" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " !" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "return" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " null" }), _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": "#C586C0" }, children: " return" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _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: "img" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " src" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "picture" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " alt" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "h2" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "email" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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(_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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[4].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "login-button.tsx", lines: "true", numberOfLines: "23", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "23", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "loginWithRedirect" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loginWithRedirect" }), _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": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log in" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "index.tsx", lines: "true", numberOfLines: "20", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "20", 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": "#9CDCFE" }, children: " React" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react-dom/client'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Auth0Provider" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " './App'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " root" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "document" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'root'" }), _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: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "root" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "render" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Auth0Provider" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " domain" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"dev-gja8kxz4ndtex3rq.us.auth0.com\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " clientId" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"mz9iNEIo2PHu7oeh8QRt19ndTyyCIgai\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokens" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "true" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokensFallback" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "false" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " authorizationParams" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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": "#9CDCFE" }, children: " redirect_uri:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsx(_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": "#4EC9B0" }, children: "App" }), _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(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "logout-button.tsx", lines: "true", numberOfLines: "30", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "30", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "// This should reflect the URL added earlier to your \"Allowed Logout URLs\" setting" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// in the Auth0 dashboard." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " logoutUri" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "logout" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, 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": "#9CDCFE" }, children: " logoutParams:" }), _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": "#9CDCFE" }, children: " returnTo:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " logoutUri" })] }), "\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: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log out" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "app.tsx", lines: "true", numberOfLines: "51", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "51", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "user-profile.tsx", lines: "true", numberOfLines: "18", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "18", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "isLoading" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " // If the SDK is not ready, or a user is not authenticated, exit." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "isLoading" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " ||" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " !" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "return" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " null" }), _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": "#C586C0" }, children: " return" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _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: "img" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " src" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "picture" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " alt" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "h2" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "email" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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(_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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[5].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "app.tsx", lines: "true", numberOfLines: "51", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "51", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "index.tsx", lines: "true", numberOfLines: "20", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "20", 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": "#9CDCFE" }, children: " React" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react-dom/client'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Auth0Provider" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " './App'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " root" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "document" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'root'" }), _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: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "root" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "render" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Auth0Provider" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " domain" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"dev-gja8kxz4ndtex3rq.us.auth0.com\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " clientId" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"mz9iNEIo2PHu7oeh8QRt19ndTyyCIgai\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokens" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "true" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokensFallback" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "false" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " authorizationParams" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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": "#9CDCFE" }, children: " redirect_uri:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsx(_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": "#4EC9B0" }, children: "App" }), _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(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "login-button.tsx", lines: "true", numberOfLines: "23", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "23", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "loginWithRedirect" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loginWithRedirect" }), _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": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log in" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "logout-button.tsx", lines: "true", numberOfLines: "30", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "30", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "// This should reflect the URL added earlier to your \"Allowed Logout URLs\" setting" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// in the Auth0 dashboard." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " logoutUri" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "logout" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, 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": "#9CDCFE" }, children: " logoutParams:" }), _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": "#9CDCFE" }, children: " returnTo:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " logoutUri" })] }), "\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: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log out" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "user-profile.tsx", lines: "true", numberOfLines: "18", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "18", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "isLoading" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " // If the SDK is not ready, or a user is not authenticated, exit." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "isLoading" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " ||" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " !" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "return" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " null" }), _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": "#C586C0" }, children: " return" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _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: "img" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " src" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "picture" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " alt" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "h2" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "email" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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(_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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[6].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "logout-button.tsx", lines: "true", numberOfLines: "30", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "30", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "// This should reflect the URL added earlier to your \"Allowed Logout URLs\" setting" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// in the Auth0 dashboard." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " logoutUri" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "logout" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, 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": "#9CDCFE" }, children: " logoutParams:" }), _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": "#9CDCFE" }, children: " returnTo:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " logoutUri" })] }), "\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: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log out" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "index.tsx", lines: "true", numberOfLines: "20", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "20", 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": "#9CDCFE" }, children: " React" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react-dom/client'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Auth0Provider" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " './App'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " root" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "document" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'root'" }), _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: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "root" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "render" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Auth0Provider" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " domain" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"dev-gja8kxz4ndtex3rq.us.auth0.com\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " clientId" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"mz9iNEIo2PHu7oeh8QRt19ndTyyCIgai\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokens" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "true" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokensFallback" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "false" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " authorizationParams" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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": "#9CDCFE" }, children: " redirect_uri:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsx(_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": "#4EC9B0" }, children: "App" }), _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(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "login-button.tsx", lines: "true", numberOfLines: "23", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "23", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "loginWithRedirect" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loginWithRedirect" }), _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": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log in" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "app.tsx", lines: "true", numberOfLines: "51", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "51", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "user-profile.tsx", lines: "true", numberOfLines: "18", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "18", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "isLoading" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " // If the SDK is not ready, or a user is not authenticated, exit." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "isLoading" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " ||" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " !" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "return" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " null" }), _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": "#C586C0" }, children: " return" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _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: "img" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " src" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "picture" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " alt" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "h2" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "email" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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(_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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) })] }) }), _jsx(SideMenuSectionItem, { id: sections[7].id, children: _jsxs(CodeGroup, { children: [_jsx(CodeBlock, { filename: "user-profile.tsx", lines: "true", numberOfLines: "18", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "18", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "isLoading" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " // If the SDK is not ready, or a user is not authenticated, exit." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "isLoading" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " ||" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " !" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ") " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "return" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " null" }), _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": "#C586C0" }, children: " return" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "div" }), _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: "img" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " src" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "picture" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " alt" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "h2" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "name" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: "p" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "user" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "email" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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(_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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Profile" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "index.tsx", lines: "true", numberOfLines: "20", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "20", 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": "#9CDCFE" }, children: " React" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react-dom/client'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Auth0Provider" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " './App'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " root" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " createRoot" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "document" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'root'" }), _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: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "root" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "render" }), _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": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "Auth0Provider" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " domain" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"dev-gja8kxz4ndtex3rq.us.auth0.com\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " clientId" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"mz9iNEIo2PHu7oeh8QRt19ndTyyCIgai\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokens" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "true" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " useRefreshTokensFallback" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: "false" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " authorizationParams" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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": "#9CDCFE" }, children: " redirect_uri:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback\"" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsx(_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": "#4EC9B0" }, children: "App" }), _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(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" }) }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "login-button.tsx", lines: "true", numberOfLines: "23", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "23", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "loginWithRedirect" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loginWithRedirect" }), _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": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "login" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log in" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LoginButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "logout-button.tsx", lines: "true", numberOfLines: "30", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "30", 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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@ionic/react'" }), _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: "// This should reflect the URL added earlier to your \"Allowed Logout URLs\" setting" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// in the Auth0 dashboard." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " logoutUri" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback'" }), _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: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "logout" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: " const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, 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": "#9CDCFE" }, children: " logoutParams:" }), _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": "#9CDCFE" }, children: " returnTo:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " logoutUri" })] }), "\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: "#CF222E", "--shiki-dark": "#569CD6" }, children: " async" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " openUrl" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // Redirect using Capacitor's Browser plugin" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "open" }), _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": "#9CDCFE" }, children: " url" }), _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": "#9CDCFE" }, children: " windowName:" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " \"_self\"" })] }), "\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", 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": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "IonButton" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "doLogout" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "Log out" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, 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": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " LogoutButton" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n"] }) }) }), _jsx(CodeBlock, { filename: "app.tsx", lines: "true", numberOfLines: "51", language: "tsx", 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: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "51", children: [_jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`," })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// as well as the bits needed for Auth0 and React" }) }), "\n", _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: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " as" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/app'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@capacitor/browser'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " 'react'" }), _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: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useAuth0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " } " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@auth0/auth0-react'" }), _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: "// ..." }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: ":" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: " React" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#4EC9B0" }, children: "FC" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Get the callback handler from the Auth0 React hook" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "handleRedirectCallback" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useAuth0" }), _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: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useEffect" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, 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: " // Handle the 'appUrlOpen' event and call `handleRedirectCallback`" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " CapApp" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "addListener" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'appUrlOpen'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " ({ " }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }) " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _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: " if" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'state'" }), _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: " (" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'code'" }), _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": "#9CDCFE" }, children: " url" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "includes" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "'error'" }), _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: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " handleRedirectCallback" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "url" }), _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: " // No-op on Android" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " Browser" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "close" }), _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: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }, [" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "handleRedirectCallback" }), _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: " // .." }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "};" }) }), "\n"] }) }) })] }) })] })] }); } 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."); }