CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><title>Single-Click App OAuth Flow | BigCommerce Dev Center</title><meta name="robots" content="index,follow"/><meta name="description" content="Build amazing commerce solutions powered by the BigCommerce platform"/><meta property="og:title" content="Single-Click App OAuth Flow | BigCommerce Dev Center"/><meta property="og:description" content="Build amazing commerce solutions powered by the BigCommerce platform"/><meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)"/><meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/><style> :root { --nextra-primary-hue: 212deg; --nextra-primary-saturation: 100%; --nextra-navbar-height: 4rem; --nextra-menu-height: 3.75rem; --nextra-banner-height: 2.5rem; } .dark { --nextra-primary-hue: 204deg; --nextra-primary-saturation: 100%; } </style><meta property="og:url" content="https://developer.bigcommerce.com/docs/integrations/apps/guide/auth"/><meta name="next-head-count" content="10"/><script>!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){if(window.analytics.initialized)return window.analytics[e].apply(window.analytics,arguments);var i=Array.prototype.slice.call(arguments);i.unshift(e);analytics.push(i);return analytics}};for(var i=0;i<analytics.methods.length;i++){var key=analytics.methods[i];analytics[key]=analytics.factory(key)}analytics.load=function(key,i){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=i};analytics._writeKey="pcIxZ9NO06csZFSFyDQ0akcPcQadO4M5";;analytics.SNIPPET_VERSION="4.16.1"; analytics.load("pcIxZ9NO06csZFSFyDQ0akcPcQadO4M5"); analytics.page(); }}();</script><script>function mobileMenuChanges() { if (window.innerWidth < 768) { const elements = document.querySelectorAll(".nextra-sidebar-container a"); for (let i = 0; i < elements.length; i++) { const element = elements[i]; const list = [ "Powered By", "Automated Partner Billing", "Users API", "GraphQL Admin API", "App Extensions", ]; list.forEach((item) => { // @ts-ignore if (element.textContent.indexOf(item) !== -1) { element.classList.add("hidden"); } }); } } } window.addEventListener('resize', mobileMenuChanges); window.addEventListener('onLoad', mobileMenuChanges);</script><script id="makeswift-preview-mode" type="module"> const isPreview = false const appOrigin = 'https://app.makeswift.com' const searchParamName = 'x-makeswift-preview-mode' const headerName = 'X-Makeswift-Preview-Mode' const originalUrl = new URL(window.location.href) if (window.parent !== window) { window.addEventListener('message', event => { if (event.origin === appOrigin && event.data.type === 'makeswift_preview_mode') { const { secret } = event.data if (!isPreview && !originalUrl.searchParams.has(searchParamName)) { const url = new URL(originalUrl) url.searchParams.set(searchParamName, secret) window.location.replace(url) } else { const originalFetch = window.fetch window.fetch = function patchedFetch(resource, options) { const request = new Request(resource, options) if (new URL(request.url).origin !== window.location.origin) { return originalFetch.call(this, resource, options) } return originalFetch.call( this, new Request(request, { headers: { [headerName]: secret } }), ) } } } }) window.parent.postMessage({ type: 'makeswift_preview_mode' }, appOrigin) } if (originalUrl.searchParams.has(searchParamName)) { const url = new URL(originalUrl) url.searchParams.delete(searchParamName) window.history.replaceState(null, '', url) } </script><script id="makeswift-connection-check" type="module"> const appOrigin = 'https://app.makeswift.com' if (window.parent !== window) { window.addEventListener('message', event => { if ( event.origin === appOrigin && event.data.type === 'MAKESWIFT_CONNECTION_INIT' ) { setInterval(() => { window.parent.postMessage({ type: 'MAKESWIFT_CONNECTION_CHECK', payload: { currentUrl: window.location.href } }, appOrigin) }, 20) } }) window.parent.postMessage({ type: 'MAKESWIFT_CONNECTION_INIT' }, appOrigin) } </script><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><link rel="preconnect" href="https://fonts.googleapis.com"/><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="use-credentials"/><link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Kode+Mono:wght@400..700&display=swap"/><link data-next-font="" rel="preconnect" href="/" crossorigin="anonymous"/><link rel="preload" href="/_next/static/css/28726514a44d563d.css" as="style"/><link rel="stylesheet" href="/_next/static/css/28726514a44d563d.css" data-n-g=""/><link rel="preload" href="/_next/static/css/718a2f17d41d944b.css" as="style"/><link rel="stylesheet" href="/_next/static/css/718a2f17d41d944b.css" data-n-p=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-3d5bca568ae780ee.js" defer=""></script><script src="/_next/static/chunks/framework-61c213e4782b3a33.js" defer=""></script><script src="/_next/static/chunks/main-806f49948a9cd6df.js" defer=""></script><script src="/_next/static/chunks/pages/_app-d1a208351aeac89a.js" defer=""></script><script src="/_next/static/chunks/35554-9edd0ad235314945.js" defer=""></script><script src="/_next/static/chunks/79455-ddd9a4d1a8ae8394.js" defer=""></script><script src="/_next/static/chunks/pages/docs/integrations/apps/guide/auth-82da785396de6241.js" defer=""></script><script src="/_next/static/9F3PeAtnast_V8NbjPRN2/_buildManifest.js" defer=""></script><script src="/_next/static/9F3PeAtnast_V8NbjPRN2/_ssgManifest.js" defer=""></script><style data-emotion="css "></style><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700;900&family=Kode+Mono:wght@400..700&display=swap"/></head><body class="font-sans"><div id="__next"><div class="feedback-widget" style="--color-primary:#03eada;--color-text:#000"><button type="button" aria-label="Feedback" class="feedback-widget-trigger-button"><svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" color="#000" fill="currentColor" viewBox="0 0 256 256"><path d="M132,216H47.7a7.6,7.6,0,0,1-7.7-7.7V124a92,92,0,0,1,92-92h0a92,92,0,0,1,92,92h0A92,92,0,0,1,132,216Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="14"></path><circle cx="132" cy="128" r="12"></circle><circle cx="84" cy="128" r="12"></circle><circle cx="180" cy="128" r="12"></circle></svg></button></div><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><div dir="ltr"><script>document.documentElement.setAttribute('dir','ltr')</script><div class="navbar_observer navbar_observer-inactive light:hidden fixed top-0 h-[64px] w-full transition-colors"></div><div class="light:hidden absolute top-[100px] md:top-[770px]"></div><div class="nextra-nav-container nx-sticky nx-top-0 nx-z-20 nx-w-full nx-bg-transparent print:nx-hidden"><div class="nextra-nav-container-blur bc-navbar"></div><nav class="nx-mx-auto nx-flex nx-h-[var(--nextra-navbar-height)] nx-max-w-[90rem] nx-items-center nx-justify-end nx-gap-2 nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]"><a class="nx-flex nx-items-center hover:nx-opacity-75 ltr:nx-mr-auto rtl:nx-ml-auto" href="/"><svg width="35" height="35" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-5"><path d="M.03 44.601a.393.393 0 0 1 .088-.43L44.162.098a.335.335 0 0 1 .434-.035l.057-.057c.956 1.12 3.14 3.176 3.14 3.176l.022.025c.082.093.185.21.185.368v44.13a.308.308 0 0 1-.294.294H3.663c-.208 0-.328-.126-.409-.211l-.029-.03c-.008-.008-.05-.05-.12-.116-.47-.454-2.165-2.09-2.812-2.813A.392.392 0 0 1 .03 44.6Z" fill="currentColor" style="fill:var(--logo-even-color)"></path><path d="M43.807 1.65v42.147H1.687L43.807 1.65Z" fill="currentColor" style="fill:var(--logo-odd-color)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M18.694 26.082v12.612a.323.323 0 0 0 .335.323h11.798c4.29 0 6.513-2.635 6.513-5.984a5.466 5.466 0 0 0-3.299-5.115.322.322 0 0 1 0-.588 5.283 5.283 0 0 0 3.201-4.737c0-2.928-2.572-5.605-6.765-5.605h-2.726l-9.057 9.095Zm5.175 8.391h5.756c.819 0 1.409-.216 1.79-.561.374-.34.597-.851.597-1.55a2.13 2.13 0 0 0-.707-1.573c-.429-.385-.971-.528-1.68-.528h-5.756v4.212Zm5.47-9.182h-5.482v-3.765h5.482c.675 0 1.192.128 1.6.472.425.358.67.869.673 1.405 0 .626-.212 1.082-.569 1.386-.362.309-.924.502-1.704.502Z" fill="currentColor" style="fill:var(--logo-even-color)"></path></svg></a><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative z-10 hidden w-full sm:flex"><div style="position:relative"><ul data-orientation="horizontal" class="flex items-center gap-8" dir="ltr"><li><button id="radix-:Rbl5m:-trigger-radix-:Rbbl5m:" data-state="closed" aria-expanded="false" aria-controls="radix-:Rbl5m:-content-radix-:Rbbl5m:" class="transition-color group inline-flex items-center gap-x-1 text-sm leading-6 text-gray-700 hover:text-gray-900 group-data-[state=open]:text-gray-900 dark:text-gray-300 hover:dark:text-gray-100 group-data-[state=open]:dark:text-gray-100" data-radix-collection-item=""><span class="after:pointer-events-none after:invisible after:block after:h-0 after:select-none after:overflow-hidden after:font-bold after:content-[attr(data-label)] font-bold" data-label="Documentation">Documentation</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5 transition-transform group-data-[state=open]:-rotate-180 group-data-[state=open]:font-bold"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></li><li><button id="radix-:Rbl5m:-trigger-radix-:Rjbl5m:" data-state="closed" aria-expanded="false" aria-controls="radix-:Rbl5m:-content-radix-:Rjbl5m:" class="transition-color group inline-flex items-center gap-x-1 text-sm leading-6 text-gray-700 hover:text-gray-900 group-data-[state=open]:text-gray-900 dark:text-gray-300 hover:dark:text-gray-100 group-data-[state=open]:dark:text-gray-100" data-radix-collection-item=""><span class="after:pointer-events-none after:invisible after:block after:h-0 after:select-none after:overflow-hidden after:font-bold after:content-[attr(data-label)]" data-label="API reference">API reference</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5 transition-transform group-data-[state=open]:-rotate-180 group-data-[state=open]:font-bold"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></li><li><button id="radix-:Rbl5m:-trigger-radix-:Rrbl5m:" data-state="closed" aria-expanded="false" aria-controls="radix-:Rbl5m:-content-radix-:Rrbl5m:" class="transition-color group inline-flex items-center gap-x-1 text-sm leading-6 text-gray-700 hover:text-gray-900 group-data-[state=open]:text-gray-900 dark:text-gray-300 hover:dark:text-gray-100 group-data-[state=open]:dark:text-gray-100" data-radix-collection-item=""><span class="after:pointer-events-none after:invisible after:block after:h-0 after:select-none after:overflow-hidden after:font-bold after:content-[attr(data-label)]" data-label="Community">Community</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5 transition-transform group-data-[state=open]:-rotate-180 group-data-[state=open]:font-bold"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></li></ul></div><div class="perspective-[2000px] absolute left-0 top-[calc(var(--nextra-navbar-height,4rem)-20px)] flex w-full"></div></nav><div class="flex-grow"></div><div class="flex items-center justify-between gap-4"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search documentation..."><span class="DocSearch-Button-Container overflow-clip"><span class="h-6 w-6"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="dark:fill-gray-50 dark:stroke-gray-50 dark:stroke-0"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.965 14.255h.79l4.99 5-1.49 1.49-5-4.99v-.79l-.27-.28a6.471 6.471 0 0 1-4.23 1.57 6.5 6.5 0 1 1 6.5-6.5c0 1.61-.59 3.09-1.57 4.23l.28.27Zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5Z" fill="currentColor"></path></svg></span><span class="DocSearch-Button-Placeholder">Search documentation...</span></span><span class="DocSearch-Button-Keys items-center justify-center gap-0.5 rounded px-1"></span></button><div class="hidden w-8 sm:block"><div class="relative mr-3 flex items-center sm:mx-2"><div class="NoticeableWidget Noticeable_widget__mA3EL"><svg viewBox="0 0 20 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="h-auto w-4"><path d="M0 .667h12l.533 2.666H20v13.334h-9.333L10.133 14H2.667v9.333H0V.667ZM10.347 6l-.534-2.667H2.667v8h9.653L12.853 14h4.48V6h-6.986Z"></path></svg></div></div></div><div class="hidden w-8 sm:block"><div class="relative hidden h-6 w-6 cursor-pointer overflow-clip sm:block" title="Switch to dark mode"><div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-auto w-full"><path d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162z"></path></svg></div></div></div></div><div class="pl-5"><a class="transition-colors cursor-pointer rounded-md text-sm font-medium bg-blue-50 dark:bg-gray-700 text-blue-600 dark:text-blue-300 hover:bg-[#DBEAFE] dark:hover:bg-gray-800 px-3 py-[0.46875rem]" target="_blank" rel="noreferrer noopener" href="https://devtools.bigcommerce.com/my/apps">DevPortal</a></div><button type="button" aria-label="Menu" class="nextra-hamburger -nx-mr-2 nx-rounded nx-p-2 active:nx-bg-gray-400/20 md:nx-hidden"><svg fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" class=""><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16"></path></g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16"></path><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18h16"></path></g></svg></button></nav></div><div class="nx-mx-auto nx-flex nx-max-w-[90rem]"><div class="motion-reduce:nx-transition-none [transition:background-color_1.5s_ease] nx-bg-transparent"></div><aside class="nextra-sidebar-container nx-flex nx-flex-col md:nx-top-16 md:nx-shrink-0 motion-reduce:nx-transform-none nx-transform-gpu nx-transition-all nx-ease-in-out pr-8 print:nx-hidden md:nx-w-64 md:nx-sticky md:nx-self-start max-md:[transform:translate3d(0,-100%,0)]"><div class="nx-px-4 nx-pt-4 md:nx-hidden"><nav aria-label="Main" data-orientation="horizontal" dir="ltr" class="relative z-10 hidden w-full sm:flex"><div style="position:relative"><ul data-orientation="horizontal" class="flex items-center gap-8" dir="ltr"><li><button id="radix-:Rbjdm:-trigger-radix-:Rbbjdm:" data-state="closed" aria-expanded="false" aria-controls="radix-:Rbjdm:-content-radix-:Rbbjdm:" class="transition-color group inline-flex items-center gap-x-1 text-sm leading-6 text-gray-700 hover:text-gray-900 group-data-[state=open]:text-gray-900 dark:text-gray-300 hover:dark:text-gray-100 group-data-[state=open]:dark:text-gray-100" data-radix-collection-item=""><span class="after:pointer-events-none after:invisible after:block after:h-0 after:select-none after:overflow-hidden after:font-bold after:content-[attr(data-label)] font-bold" data-label="Documentation">Documentation</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5 transition-transform group-data-[state=open]:-rotate-180 group-data-[state=open]:font-bold"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></li><li><button id="radix-:Rbjdm:-trigger-radix-:Rjbjdm:" data-state="closed" aria-expanded="false" aria-controls="radix-:Rbjdm:-content-radix-:Rjbjdm:" class="transition-color group inline-flex items-center gap-x-1 text-sm leading-6 text-gray-700 hover:text-gray-900 group-data-[state=open]:text-gray-900 dark:text-gray-300 hover:dark:text-gray-100 group-data-[state=open]:dark:text-gray-100" data-radix-collection-item=""><span class="after:pointer-events-none after:invisible after:block after:h-0 after:select-none after:overflow-hidden after:font-bold after:content-[attr(data-label)]" data-label="API reference">API reference</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5 transition-transform group-data-[state=open]:-rotate-180 group-data-[state=open]:font-bold"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></li><li><button id="radix-:Rbjdm:-trigger-radix-:Rrbjdm:" data-state="closed" aria-expanded="false" aria-controls="radix-:Rbjdm:-content-radix-:Rrbjdm:" class="transition-color group inline-flex items-center gap-x-1 text-sm leading-6 text-gray-700 hover:text-gray-900 group-data-[state=open]:text-gray-900 dark:text-gray-300 hover:dark:text-gray-100 group-data-[state=open]:dark:text-gray-100" data-radix-collection-item=""><span class="after:pointer-events-none after:invisible after:block after:h-0 after:select-none after:overflow-hidden after:font-bold after:content-[attr(data-label)]" data-label="Community">Community</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="h-5 w-5 transition-transform group-data-[state=open]:-rotate-180 group-data-[state=open]:font-bold"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path></svg></button></li></ul></div><div class="perspective-[2000px] absolute left-0 top-[calc(var(--nextra-navbar-height,4rem)-20px)] flex w-full"></div></nav><div class="flex-grow"></div><div class="flex items-center justify-between gap-4"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search documentation..."><span class="DocSearch-Button-Container overflow-clip"><span class="h-6 w-6"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg" class="dark:fill-gray-50 dark:stroke-gray-50 dark:stroke-0"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.965 14.255h.79l4.99 5-1.49 1.49-5-4.99v-.79l-.27-.28a6.471 6.471 0 0 1-4.23 1.57 6.5 6.5 0 1 1 6.5-6.5c0 1.61-.59 3.09-1.57 4.23l.28.27Zm-9.71-4.5c0 2.49 2.01 4.5 4.5 4.5s4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5-4.5 2.01-4.5 4.5Z" fill="currentColor"></path></svg></span><span class="DocSearch-Button-Placeholder">Search documentation...</span></span><span class="DocSearch-Button-Keys items-center justify-center gap-0.5 rounded px-1"></span></button><div class="hidden w-8 sm:block"><div class="relative mr-3 flex items-center sm:mx-2"><div class="NoticeableWidget Noticeable_widget__mA3EL"><svg viewBox="0 0 20 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="h-auto w-4"><path d="M0 .667h12l.533 2.666H20v13.334h-9.333L10.133 14H2.667v9.333H0V.667ZM10.347 6l-.534-2.667H2.667v8h9.653L12.853 14h4.48V6h-6.986Z"></path></svg></div></div></div><div class="hidden w-8 sm:block"><div class="relative hidden h-6 w-6 cursor-pointer overflow-clip sm:block" title="Switch to dark mode"><div><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-auto w-full"><path d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162z"></path></svg></div></div></div></div></div><div class="nx-overflow-y-auto nx-overflow-x-hidden nx-p-4 nx-grow md:nx-h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] nextra-scrollbar"><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-100"><ul class="nx-flex nx-flex-col nx-gap-1 nextra-menu-desktop max-md:nx-hidden"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/build"><div class="inline-flex items-center"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="aspect-square mr-[0.625rem] inline h-auto w-3.5 shrink-0 stroke-2 ltr:rotate-180"><path d="m9 5 7 7-7 7"></path></svg><span class="text-sm">Home</span></div></a></li><li class="[word-break:break-word] nx-mt-6 nx-px-2 nx-py-1.5 nx-text-sm nx-font-semibold nx-text-gray-900 first:nx-mt-0 dark:nx-text-gray-100"><div class="inline-flex items-center"><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="aspect-square mr-[0.625rem] inline h-auto w-5"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.167 1.667a.836.836 0 0 0-.834-.834.836.836 0 0 0-.833.834V5H.833v8.333c0 1.084.7 2 1.667 2.35v3.484h1.667v-3.484a2.509 2.509 0 0 0 1.666-2.35V5H4.167V1.667Zm-.834 12.5a.836.836 0 0 1-.833-.834v-1.666h1.667v1.666a.836.836 0 0 1-.834.834Zm-.833-7.5V10h1.667V6.667H2.5Zm8.333-5A.836.836 0 0 0 10 .833a.836.836 0 0 0-.833.834V5H7.5v8.333c0 1.084.7 2 1.667 2.35v3.484h1.666v-3.484a2.509 2.509 0 0 0 1.667-2.35V5h-1.667V1.667ZM9.167 13.333c0 .459.375.834.833.834a.836.836 0 0 0 .833-.834v-1.666H9.167v1.666Zm0-3.333V6.667h1.666V10H9.167ZM17.5 1.667V5h1.667v8.333c0 1.084-.7 2-1.667 2.35v3.484h-1.667v-3.484a2.509 2.509 0 0 1-1.666-2.35V5h1.666V1.667c0-.459.375-.834.834-.834.458 0 .833.375.833.834Zm-.833 12.5a.836.836 0 0 1-.834-.834v-1.666H17.5v1.666a.836.836 0 0 1-.833.834Zm-.834-7.5V10H17.5V6.667h-1.667Z" fill="currentColor"></path></svg><span class="whitespace-nowrap text-gray-950 dark:text-white text-sm">Apps and integrations</span></div></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations"><div class="inline-flex items-center"><span class="">Overview</span></div></a></li><li class="[word-break:break-word] nx-my-3"><hr class="nx-mx-2 nx-border-t nx-border-gray-200 dark:nx-border-primary-100/10"/></li><li class="[word-break:break-word] nx-mt-6 nx-px-2 nx-py-1.5 nx-text-sm nx-font-semibold nx-text-gray-900 first:nx-mt-0 dark:nx-text-gray-100"><div class="inline-flex items-center"><span class="whitespace-nowrap text-xs text-gray-950 dark:text-white uppercase">Extensions</span></div></li><li class="open"><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Apps</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180 ltr:nx-rotate-90 rtl:nx-rotate-[-270deg]"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-100 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps"><div class="inline-flex items-center"><span class="">Introduction</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/quick-start"><div class="inline-flex items-center"><span class="">Quick start</span></div></a></li><li class="open"><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Guide</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180 ltr:nx-rotate-90 rtl:nx-rotate-[-270deg]"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-100 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/types"><div class="inline-flex items-center"><span class="">Types of apps</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide"><div class="inline-flex items-center"><span class="">Beginning development</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/developer-portal"><div class="inline-flex items-center"><span class="">Managing apps in Dev Portal</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/id"><div class="inline-flex items-center"><span class="">Locating app IDs</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1 active"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-bg-primary-100 nx-font-semibold nx-text-primary-800 dark:nx-bg-primary-400/10 dark:nx-text-primary-600 contrast-more:nx-border-primary-500 contrast-more:dark:nx-border-primary-500" href="/docs/integrations/apps/guide/auth"><div class="inline-flex items-center"><span class="">Implementing OAuth</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/callbacks"><div class="inline-flex items-center"><span class="">Handling callbacks</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/users"><div class="inline-flex items-center"><span class="">Supporting multiple users</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/events"><div class="inline-flex items-center"><span class="">Listening for events</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/ui"><div class="inline-flex items-center"><span class="">Designing the UI</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/buttons"><div class="inline-flex items-center"><span class="">Creating install buttons</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/best-practices"><div class="inline-flex items-center"><span class="">Following best practices</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/requirements"><div class="inline-flex items-center"><span class="">Approval requirements</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/guide/publishing"><div class="inline-flex items-center"><span class="">Publishing apps</span></div></a></li></ul></div></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">App extensions</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/app-extensions"><div class="inline-flex items-center"><span class="">Overview</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/app-extensions/guide"><div class="inline-flex items-center"><span class="">Guide</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/app-extensions/glossary"><div class="inline-flex items-center"><span class="">Glossary</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/app-extensions/postman"><div class="inline-flex items-center"><span class="">Postman collection</span></div></a></li></ul></div></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Tutorial: Next.js starter app</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/tutorial"><div class="inline-flex items-center"><span class="">Introduction</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/tutorial/nextjs-quick-start"><div class="inline-flex items-center"><span class="">Quick start: Deploy to Heroku install flow</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/tutorial/nextjs-setup"><div class="inline-flex items-center"><span class="">Step 1: Set up your local environment</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/tutorial/nextjs-connect"><div class="inline-flex items-center"><span class="">Step 2: Connect your app to BigCommerce</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/tutorial/nextjs-integrate"><div class="inline-flex items-center"><span class="">Step 3: Integrate BigCommerce APIs and add a database</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/tutorial/nextjs-enhance"><div class="inline-flex items-center"><span class="">Step 4: Enhance the user experience with BigDesign</span></div></a></li></ul></div></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Unified billing</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/unified-billing"><div class="inline-flex items-center"><span class="">Overview</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/unified-billing/example-queries"><div class="inline-flex items-center"><span class="">Example queries and mutations</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/unified-billing/postman-collection"><div class="inline-flex items-center"><span class="">Postman collection</span></div></a></li></ul></div></div></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/apps/multi-storefront"><div class="inline-flex items-center"><span class="">Optimizing multi-storefront apps</span></div></a></li></ul></div></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Channels</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/channels"><div class="inline-flex items-center"><span class="">Introduction</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/channels/quick-start"><div class="inline-flex items-center"><span class="">Quick start</span></div></a></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Guide</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/channels/guide"><div class="inline-flex items-center"><span class="">Building channel apps</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/channels/guide/extending-existing-apps"><div class="inline-flex items-center"><span class="">Extending existing apps</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/channels/guide/storefronts"><div class="inline-flex items-center"><span class="">Building storefront channels</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/channels/guide/best-practices"><div class="inline-flex items-center"><span class="">Best practices</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/channels/guide/requirements"><div class="inline-flex items-center"><span class="">Approval requirements</span></div></a></li></ul></div></div></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/channels/toolkit-reference"><div class="inline-flex items-center"><span class="">Channels toolkit reference</span></div></a></li></ul></div></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Webhooks</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/webhooks"><div class="inline-flex items-center"><span class="">Overview</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/webhooks/tutorial"><div class="inline-flex items-center"><span class="">Tutorial</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/webhooks/http"><div class="inline-flex items-center"><span class="">HTTPS</span></div></a></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Event reference</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/webhooks/events"><div class="inline-flex items-center"><span class="">Events</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/webhooks/events/channels"><div class="inline-flex items-center"><span class="">Channel events</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/webhooks/events/inventory-location"><div class="inline-flex items-center"><span class="">Inventory and location events</span></div></a></li></ul></div></div></li></ul></div></div></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/metafields"><div class="inline-flex items-center"><span class="">Metafields</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/scripts"><div class="inline-flex items-center"><span class="">Scripts</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/shipping"><div class="inline-flex items-center"><span class="">Shipping providers</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/tax"><div class="inline-flex items-center"><span class="">Tax providers</span></div></a></li><li class="[word-break:break-word] nx-mt-6 nx-px-2 nx-py-1.5 nx-text-sm nx-font-semibold nx-text-gray-900 first:nx-mt-0 dark:nx-text-gray-100"><div class="inline-flex items-center"><span class="whitespace-nowrap text-xs text-gray-950 dark:text-white uppercase">Platform Solutions</span></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Buy online, pick up in store</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store"><div class="inline-flex items-center"><span class="">Overview</span></div></a></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">End-to-end guide</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/end-to-end-guide/overview"><div class="inline-flex items-center"><span class="">Overview</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/end-to-end-guide/configuration"><div class="inline-flex items-center"><span class="">Merchant configuration</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/end-to-end-guide/shopping"><div class="inline-flex items-center"><span class="">Browse and discover as a shopper</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/end-to-end-guide/checkout"><div class="inline-flex items-center"><span class="">Manage checkout as a shopper</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/end-to-end-guide/orders"><div class="inline-flex items-center"><span class="">Manage order as a merchant</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/end-to-end-guide/fulfillment"><div class="inline-flex items-center"><span class="">Fulfill order as a merchant</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/end-to-end-guide/retirement"><div class="inline-flex items-center"><span class="">Retire merchant configuration</span></div></a></li></ul></div></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Integration guide</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/guide/storefront"><div class="inline-flex items-center"><span class="">Storefront</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/guide/add-to-cart"><div class="inline-flex items-center"><span class="">Add to cart</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/guide/checkout"><div class="inline-flex items-center"><span class="">Checkout</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/guide/orders"><div class="inline-flex items-center"><span class="">Orders</span></div></a></li></ul></div></div></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/frequently-asked-questions"><div class="inline-flex items-center"><span class="">Frequently asked questions</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/buy-online-pick-up-in-store/glossary"><div class="inline-flex items-center"><span class="">Glossary</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/store-operations/catalog/inventory-adjustments" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Inventory adjustments</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/store-operations/catalog/inventory-locations" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Locations</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/integrations/webhooks/events/inventory-location" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Webhooks</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">GraphQL Storefront guides</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/storefront/graphql/inventory/settings" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Inventory settings</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/storefront/graphql/locations/settings" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Locations settings</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/storefront/graphql/inventory/queries" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Inventory queries</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/storefront/graphql/locations/queries" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Locations queries</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li></ul></div></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">REST Storefront</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-storefront/pickup-options" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Pickup options</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-storefront/checkouts/checkout-consignments" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Checkout consignments</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li></ul></div></div></li><li class=""><button class="nx-items-center nx-justify-between nx-gap-2 nx-text-left nx-w-full nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">REST Management</span></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-h-[18px] nx-min-w-[18px] nx-rounded-sm nx-p-0.5 hover:nx-bg-gray-800/5 dark:hover:nx-bg-gray-100/5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" class="nx-origin-center nx-transition-transform rtl:-nx-rotate-180"></path></svg></button><div class="nx-transform-gpu nx-overflow-hidden nx-transition-all nx-ease-in-out motion-reduce:nx-transition-none" style="height:0"><div class="nx-transition-opacity nx-duration-500 nx-ease-in-out motion-reduce:nx-transition-none nx-opacity-0 ltr:nx-pr-0 rtl:nx-pl-0 nx-pt-1"><ul class="nx-flex nx-flex-col nx-gap-1 nx-relative before:nx-absolute before:nx-inset-y-1 before:nx-w-px before:nx-bg-gray-200 before:nx-content-[""] dark:before:nx-bg-neutral-800 ltr:nx-pl-3 ltr:before:nx-left-0 rtl:nx-pr-3 rtl:before:nx-right-0 ltr:nx-ml-3 rtl:nx-mr-3"><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-management/inventory" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Inventory</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-management/locations" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Locations</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-management/pickup" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Pickup</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-management/pickup-options" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Pickup options</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-management/pickup-methods" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Pickup methods</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-management/checkouts/checkout-consignments" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Checkout consignments</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a href="/docs/rest-management/orders/order-consignments" target="_blank" rel="noreferrer" class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50"><div class="inline-flex items-center"><span class="">Order consignments</span></div><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li></ul></div></div></li></ul></div></div></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/hosted-analytics"><div class="inline-flex items-center"><span class="">Analytics with BODL</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/staging-pro"><div class="inline-flex items-center"><span class="">Staging with Staging Pro</span></div></a></li><li class="[word-break:break-word] nx-mt-6 nx-px-2 nx-py-1.5 nx-text-sm nx-font-semibold nx-text-gray-900 first:nx-mt-0 dark:nx-text-gray-100"><div class="inline-flex items-center"><span class="whitespace-nowrap text-xs text-gray-950 dark:text-white uppercase">Integrations</span></div></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/subscriptions"><div class="inline-flex items-center"><span class="">Subscription channels</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/point-of-sale"><div class="inline-flex items-center"><span class="">Point of sale systems</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/order-management-systems"><div class="inline-flex items-center"><span class="">Order management systems</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/enterprise-resource-planning"><div class="inline-flex items-center"><span class="">Enterprise resource planning</span></div></a></li><li class="nx-flex nx-flex-col nx-gap-1"><a class="nx-flex nx-rounded nx-px-2 nx-py-1.5 nx-text-sm nx-transition-colors [word-break:break-word] nx-cursor-pointer [-webkit-tap-highlight-color:transparent] [-webkit-touch-callout:none] contrast-more:nx-border nx-text-gray-700 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:nx-text-gray-300 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50 contrast-more:nx-text-gray-900 contrast-more:dark:nx-text-gray-50 contrast-more:nx-border-transparent contrast-more:hover:nx-border-gray-900 contrast-more:dark:hover:nx-border-gray-50" href="/docs/integrations/product-information-management"><div class="inline-flex items-center"><span class="">Product information management</span></div></a></li></ul></div></div></div><div class="nx-sticky nx-bottom-0 nx-bg-white dark:nx-bg-dark nx-mx-4 nx-py-4 nx-shadow-[0_-12px_16px_#fff] nx-flex nx-items-center nx-gap-2 dark:nx-border-neutral-800 dark:nx-shadow-[0_-12px_16px_#111] contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-shadow-none nx-border-t" data-toggle-animation="off"><div class="nx-grow nx-flex nx-flex-col"></div><button title="Hide sidebar" class="max-md:nx-hidden nx-h-7 nx-rounded-md nx-transition-colors nx-text-gray-600 dark:nx-text-gray-400 nx-px-2 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50"><svg height="12" width="12" viewBox="0 0 16 16" fill="currentColor"><path fill-rule="evenodd" d="M4.177 7.823l2.396-2.396A.25.25 0 017 5.604v4.792a.25.25 0 01-.427.177L4.177 8.177a.25.25 0 010-.354z" class=""></path><path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25H9.5v-13H1.75zm12.5 13H11v-13h3.25a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25z"></path></svg></button></div></aside><nav class="nextra-toc nx-order-last nx-hidden nx-w-64 nx-shrink-0 xl:nx-block print:nx-hidden nx-px-4" aria-label="table of contents"><div class="nextra-scrollbar nx-sticky nx-top-16 nx-overflow-y-auto nx-pr-4 nx-pt-6 nx-text-sm [hyphens:auto] nx-max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] ltr:-nx-mr-4 rtl:-nx-ml-4"><p class="nx-mb-4 nx-font-semibold nx-tracking-tight">On This Page</p><ul><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#store-owner-access_token-constraint" class="ltr:nx-pl-8 rtl:nx-pr-8 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Store owner access_token constraint</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#overview" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Overview</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#receiving-the-auth-callback" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Receiving the auth callback</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#auth-callback-url-requirement" class="ltr:nx-pl-8 rtl:nx-pr-8 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Auth callback URL requirement</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#query-parameters-in-auth-callback" class="ltr:nx-pl-4 rtl:nx-pr-4 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Query parameters in auth callback</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#requesting-the-access_token" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Requesting the access_token</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#request-body-properties-in-the-access_token-request" class="ltr:nx-pl-4 rtl:nx-pr-4 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Request body properties in the access_token request</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#receiving-the-access_token-response" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Receiving the access_token response</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#response-body-properties-for-the-access_token-request" class="ltr:nx-pl-4 rtl:nx-pr-4 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Response body properties for the access_token request</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#responding-to-the-auth-callback" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Responding to the auth callback</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#security-considerations" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Security considerations</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#helpful-tools" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Helpful tools</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#next-step" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Next step</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#resources" class="nx-font-semibold nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Resources</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#related-articles" class="ltr:nx-pl-4 rtl:nx-pr-4 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Related articles</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#sample-apps" class="ltr:nx-pl-4 rtl:nx-pr-4 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Sample apps</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#tools" class="ltr:nx-pl-4 rtl:nx-pr-4 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Tools</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#blog-posts" class="ltr:nx-pl-4 rtl:nx-pr-4 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Blog posts</a></li><li class="nx-my-2 nx-scroll-my-6 nx-scroll-py-6"><a href="#additional-resources" class="ltr:nx-pl-4 rtl:nx-pr-4 nx-inline-block nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-300 contrast-more:nx-text-gray-900 contrast-more:nx-underline contrast-more:dark:nx-text-gray-50 nx-w-full nx-break-words">Additional resources</a></li></ul><div class="nx-mt-8 nx-border-t nx-bg-white nx-pt-8 nx-shadow-[0_-12px_16px_white] dark:nx-bg-dark dark:nx-shadow-[0_-12px_16px_#111] nx-sticky nx-bottom-0 nx-flex nx-flex-col nx-items-start nx-gap-2 nx-pb-8 dark:nx-border-neutral-800 contrast-more:nx-border-t contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-border-neutral-400"><a href="https://github.com/bigcommerce/docs/issues/new?title=Feedback%20for%20%E2%80%9CSingle-Click%20App%20OAuth%20Flow%E2%80%9D&labels=feedback" target="_blank" rel="noreferrer" class="nx-text-xs nx-font-medium nx-text-gray-500 hover:nx-text-gray-900 dark:nx-text-gray-400 dark:hover:nx-text-gray-100 contrast-more:nx-text-gray-800 contrast-more:dark:nx-text-gray-50">Question? Give us feedback →<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></div></div></nav><div id="reach-skip-nav"></div><article class="nx-w-full nx-break-words nextra-content nx-flex nx-min-h-[calc(100vh-var(--nextra-navbar-height))] nx-min-w-0 nx-justify-center nx-pb-8 nx-pr-[calc(env(safe-area-inset-right)-1.5rem)]"><main class="nx-w-full nx-min-w-0 nx-max-w-6xl nx-px-6 nx-pt-4 md:nx-px-12"><div class="nextra-breadcrumb nx-mt-1.5 nx-flex nx-items-center nx-gap-1 nx-overflow-hidden nx-text-sm nx-text-gray-500 dark:nx-text-gray-400 contrast-more:nx-text-current"><div class="nx-whitespace-nowrap nx-transition-colors nx-min-w-[24px] nx-overflow-hidden nx-text-ellipsis hover:nx-text-gray-900 dark:hover:nx-text-gray-100" title="Docs"><a href="/docs">Docs</a></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-w-3.5 nx-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg><div class="nx-whitespace-nowrap nx-transition-colors nx-min-w-[24px] nx-overflow-hidden nx-text-ellipsis hover:nx-text-gray-900 dark:hover:nx-text-gray-100" title="Integrations"><a href="/docs/integrations">Integrations</a></div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-w-3.5 nx-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg><div class="nx-whitespace-nowrap nx-transition-colors nx-min-w-[24px] nx-overflow-hidden nx-text-ellipsis" title="Apps">Apps</div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-w-3.5 nx-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg><div class="nx-whitespace-nowrap nx-transition-colors nx-min-w-[24px] nx-overflow-hidden nx-text-ellipsis" title="Guide">Guide</div><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-w-3.5 nx-shrink-0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg><div class="nx-whitespace-nowrap nx-transition-colors nx-font-medium nx-text-gray-700 contrast-more:nx-font-bold contrast-more:nx-text-current dark:nx-text-gray-100 contrast-more:dark:nx-text-current" title="Implementing OAuth">Implementing OAuth</div></div><div class="flex h-full flex-col"><h1 class="nx-mt-2 nx-text-4xl nx-font-bold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100">Single-Click App OAuth Flow</h1> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">After you <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide">install your draft app</a> and <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/developer-portal">create an app profile</a>, you're ready to write the code grant authorization flow that generates a unique <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> for each store that installs your app. This article covers the sequence and contents of API requests and responses in the code grant authorization flow for a BigCommerce app.</p> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">It may be more appropriate for your application to use an API client to handle this logic; see <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/auth#helpful-tools">the list of BigCommerce API clients</a> that expose OAuth-related helper methods.</p> <div class="nextra-callout nx-overflow-x-auto nx-mt-6 nx-flex nx-rounded-lg nx-border nx-py-2 ltr:nx-pr-4 rtl:nx-pl-4 contrast-more:nx-border-current contrast-more:dark:nx-border-current nx-border-blue-200 nx-bg-blue-100 nx-text-blue-900 dark:nx-border-blue-200/30 dark:nx-bg-blue-900/30 dark:nx-text-blue-200"><div class="nx-select-none nx-text-xl ltr:nx-pl-3 ltr:nx-pr-2 rtl:nx-pr-3 rtl:nx-pl-2" style="font-family:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20" class="nx-mt-1"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"></path></svg></div><div class="nx-w-full nx-min-w-0 nx-leading-7"><h4 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-xl">Store owner access_token constraint<a href="#store-owner-access_token-constraint" id="store-owner-access_token-constraint" class="subheading-anchor" aria-label="Permalink for this section"></a></h4><p class="nx-mt-6 nx-leading-7 first:nx-mt-0">Typically, only <a href="https://support.bigcommerce.com/s/article/Store-API-Accounts#creating" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">store owners<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a> and authorized users can create API accounts and <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code>s for a store. However, when an app is approved to be publicly available for additional stores to install, it can generate <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code>s <em>on behalf</em> of store owners and authorized users.</p></div></div> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Overview<a href="#overview" id="overview" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">Your app must expose a callback endpoint, <span data-rehype-pretty-code-fragment=""><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr" data-language="http" data-theme="default"><span class="line"><span style="color:var(--shiki-token-keyword)">GET</span><span style="color:var(--shiki-color-text)"> /auth</span></span></code></span>, that the merchant's store control panel can hit to initiate the code grant authorization flow. For a list of all the callback endpoints your app can expose, both required and optional, see <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/callbacks">Single-Click App Callback Handlers</a>.</p> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">BigCommerce uses a modified version of the <a href="https://tools.ietf.org/html/rfc6749#section-4.1" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">OAuth2 authorization code grant (tools.ietf.org)<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a>. The sequence is as follows:</p> <ol class="nx-mt-6 nx-list-decimal first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2">The merchant initiates installing your app by signing in to their store control panel and doing one of the following:</li> </ol> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2">clicking <strong>Install</strong> in the <a href="https://www.bigcommerce.com/apps/" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">App Marketplace<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a>, or</li> <li class="nx-my-2">following a direct installation link.</li> </ul> <ol class="nx-mt-6 nx-list-decimal first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6" start="2"> <li class="nx-my-2">The merchant accepts the app's OAuth scope permissions. The OAuth consent view presented to the merchant requires them to approve all the scopes to install the app; at this time, merchants cannot pick and choose scopes.</li> <li class="nx-my-2">The merchant's <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/auth#receiving-the-auth-callback">browser sends a GET request to the app</a> server's <span data-rehype-pretty-code-fragment=""><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr" data-language="http" data-theme="default"><span class="line"><span style="color:var(--shiki-token-keyword)">GET</span><span style="color:var(--shiki-color-text)"> /auth</span></span></code></span> endpoint that contains some of the information necessary to request a unique <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> for the store.</li> <li class="nx-my-2">The <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/auth#requesting-the-access_token">app sends POST request to BigCommerce</a> to request a unique <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> for the store.</li> <li class="nx-my-2">BigCommerce responds with either an error or an <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> unique to the merchant's store; see <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/auth#receiving-the-access_token-response">receiving the access_token response</a>.</li> <li class="nx-my-2">The app saves the store's unique <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> and handles any internal logic.</li> <li class="nx-my-2">The app sends a <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/auth#responding-to-the-auth-callback">response to the browser's GET request</a> in step 3 that contains markup to render the app's landing view in the iFrame the store control panel provides.</li> </ol> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">After your app has an <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> for the store, the following events can mark the <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> for invalidation the next time the merchant opens the app:</p> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2">You change the app's OAuth scopes.</li> <li class="nx-my-2">The merchant's email address changes.</li> </ul> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">The next time the merchant opens the app in the store control panel, the browser will prompt them to accept the changes. Once they accept, their previous <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> will be invalid, and your app will receive a fresh auth callback for their store.</p> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Receiving the auth callback<a href="#receiving-the-auth-callback" id="receiving-the-auth-callback" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <div class="nextra-callout nx-overflow-x-auto nx-mt-6 nx-flex nx-rounded-lg nx-border nx-py-2 ltr:nx-pr-4 rtl:nx-pl-4 contrast-more:nx-border-current contrast-more:dark:nx-border-current nx-border-blue-200 nx-bg-blue-100 nx-text-blue-900 dark:nx-border-blue-200/30 dark:nx-bg-blue-900/30 dark:nx-text-blue-200"><div class="nx-select-none nx-text-xl ltr:nx-pl-3 ltr:nx-pr-2 rtl:nx-pr-3 rtl:nx-pl-2" style="font-family:"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" width="20" height="20" class="nx-mt-1"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"></path></svg></div><div class="nx-w-full nx-min-w-0 nx-leading-7"><h4 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-xl">Auth callback URL requirement<a href="#auth-callback-url-requirement" id="auth-callback-url-requirement" class="subheading-anchor" aria-label="Permalink for this section"></a></h4><p class="nx-mt-6 nx-leading-7 first:nx-mt-0">In production, all app callback URLs must be publicly available, fully qualified, and served over TLS/SSL.</p></div></div> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">The request to your app's <span data-rehype-pretty-code-fragment=""><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr" data-language="http" data-theme="default"><span class="line"><span style="color:var(--shiki-token-keyword)">GET</span><span style="color:var(--shiki-color-text)"> /auth</span></span></code></span> endpoint contains query parameters required to request an <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code>.</p> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">It's a best practice to request and receive an <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> <strong>before</strong> responding to the auth callback.</p> <button type="button" aria-hidden="true" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></button><div class="nextra-scrollbar nx-overflow-x-auto nx-overflow-y-hidden nx-overscroll-x-contain"><div class="nx-mt-4 nx-flex nx-w-max nx-min-w-full nx-border-b nx-border-gray-200 nx-pb-px dark:nx-border-neutral-800" role="tablist" aria-orientation="horizontal"><button class="nx-mr-2 nx-rounded-t nx-p-2 nx-font-medium nx-leading-5 nx-transition-colors -nx-mb-0.5 nx-select-none nx-border-b-2 nx-border-primary-500 nx-text-primary-600" id="headlessui-tabs-tab-:R1chj9dm:" role="tab" type="button" aria-selected="true" tabindex="0" data-headlessui-state="selected">Example request</button><button class="nx-mr-2 nx-rounded-t nx-p-2 nx-font-medium nx-leading-5 nx-transition-colors -nx-mb-0.5 nx-select-none nx-border-b-2 nx-border-transparent nx-text-gray-600 hover:nx-border-gray-200 hover:nx-text-black dark:nx-text-gray-200 dark:hover:nx-border-neutral-800 dark:hover:nx-text-white" id="headlessui-tabs-tab-:R2chj9dm:" role="tab" type="button" aria-selected="false" tabindex="-1" data-headlessui-state="">URL-decoded query parameters</button></div></div><div><div class="nx-rounded nx-pt-6" id="headlessui-tabs-panel-:R1khj9dm:" role="tabpanel" tabindex="0" data-headlessui-state="selected"><div class="nextra-code-block nx-relative nx-mt-6 first:nx-mt-0"><div class="nx-absolute nx-top-0 nx-z-[1] nx-w-full nx-truncate nx-rounded-t-xl nx-bg-primary-700/5 nx-py-2 nx-px-4 nx-text-xs nx-text-gray-700 dark:nx-bg-primary-300/10 dark:nx-text-gray-200">Example request: auth callback</div><pre class="nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em] contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40 nx-pt-12 nx-pb-4" data-language="http" data-theme="default"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 [counter-reset:line]" dir="ltr" data-line-numbers="" data-language="http" data-theme="default" data-line-numbers-max-digits="1"><span class="line"><span style="color:var(--shiki-token-keyword)">GET</span><span style="color:var(--shiki-color-text)"> https://your_app.example.com/auth?account_uuid=12345678-90ab-cdef-1234-567890abcdef&code=qr6h3thvbvag2ffq&context=stores%2Fg5cd38&scope=store_v2_orders+store_channel_listings_read_only</span></span> <span class="line"><span style="color:var(--shiki-token-string-expression)">Accept</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9</span></span> <span class="line"><span style="color:var(--shiki-token-string-expression)">Referer</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">https://login.bigcommerce.com/</span></span></code></pre><div class="nx-opacity-0 nx-transition [div:hover>&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-8"><button class="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50 md:nx-hidden" title="Toggle word wrap"><svg viewBox="0 0 24 24" width="24" height="24" class="nx-pointer-events-none nx-h-4 nx-w-4"><path fill="currentColor" d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50" title="Copy code" tabindex="0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="nextra-copy-icon nx-pointer-events-none nx-h-4 nx-w-4"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div></div><span aria-hidden="true" id="headlessui-tabs-panel-:R2khj9dm:" role="tabpanel" tabindex="-1" style="position:fixed;top:1px;left:1px;width:1px;height:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0"></span></div> <h3 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">Query parameters in auth callback<a href="#query-parameters-in-auth-callback" id="query-parameters-in-auth-callback" class="subheading-anchor" aria-label="Permalink for this section"></a></h3> <table class="nx-block nx-overflow-x-scroll nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0"><thead><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600" align="left">Parameter</th><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600" align="left">Description</th></tr></thead><tbody><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">code</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The proverbial code in the code grant authorization flow; exchange for a semi-permanent <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">scope</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">A space-separated list of the OAuth scopes associated with this app's <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/start/authentication/api-accounts#app-level-api-accounts">API account</a>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">context</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The path that identifies the store in API requests to <span data-rehype-pretty-code-fragment=""><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr" data-language="http" data-theme="default"><span class="line"><span style="color:var(--shiki-color-text)">https://api.bigcommerce.com</span></span></code></span>; a string of the form <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">stores/{STORE_HASH}</code>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">account_uuid</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The ID of the Developer Portal account that registered the app profile.</td></tr></tbody></table> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">Before proceeding with the grant code authorization flow, it's a best practice to validate the list of scopes to ensure that it matches the scopes currently configured in your app profile.</p> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Requesting the access_token<a href="#requesting-the-access_token" id="requesting-the-access_token" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">To generate an access_token for the merchant's store, send a <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">POST</code> request to <span data-rehype-pretty-code-fragment=""><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr" data-language="http" data-theme="default"><span class="line"><span style="color:var(--shiki-color-text)">https://login.bigcommerce.com/oauth2/token</span></span></code></span>. The request body contains a combination of query arguments from the auth callback and credentials from your app profile.</p> <div class="nextra-code-block nx-relative nx-mt-6 first:nx-mt-0"><div class="nx-absolute nx-top-0 nx-z-[1] nx-w-full nx-truncate nx-rounded-t-xl nx-bg-primary-700/5 nx-py-2 nx-px-4 nx-text-xs nx-text-gray-700 dark:nx-bg-primary-300/10 dark:nx-text-gray-200">Example request: Create an access_token</div><pre class="nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em] contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40 nx-pt-12 nx-pb-4" data-language="http" data-theme="default"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 [counter-reset:line]" dir="ltr" data-line-numbers="" data-language="http" data-theme="default" data-line-numbers-max-digits="2"><span class="line"><span style="color:var(--shiki-token-keyword)">POST</span><span style="color:var(--shiki-color-text)"> https://login.bigcommerce.com/oauth2/token</span></span> <span class="line"><span style="color:var(--shiki-token-string-expression)">Accept</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">application/json</span></span> <span class="line"><span style="color:var(--shiki-token-string-expression)">Content-Type</span><span style="color:var(--shiki-token-keyword)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string)">application/json</span></span> <span class="line"> </span> <span class="line"><span style="color:var(--shiki-color-text)">{</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"client_id"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> {CLIENT_ID}</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"client_secret"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> {CLIENT_SECRET}</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"code"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"qr6h3thvbvag2ffq"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"context"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"stores/g5cd38"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"scope"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"store_v2_orders store_channel_listings_read_only"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"grant_type"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"authorization_code"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"redirect_uri"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"https://your_app.example.com/auth"</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span> <span class="line"> </span></code></pre><div class="nx-opacity-0 nx-transition [div:hover>&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-8"><button class="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50 md:nx-hidden" title="Toggle word wrap"><svg viewBox="0 0 24 24" width="24" height="24" class="nx-pointer-events-none nx-h-4 nx-w-4"><path fill="currentColor" d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50" title="Copy code" tabindex="0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="nextra-copy-icon nx-pointer-events-none nx-h-4 nx-w-4"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div> <h3 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">Request body properties in the access_token request<a href="#request-body-properties-in-the-access_token-request" id="request-body-properties-in-the-access_token-request" class="subheading-anchor" aria-label="Permalink for this section"></a></h3> <table class="nx-block nx-overflow-x-scroll nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0"><thead><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600" align="left">Property</th><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600" align="left">Description</th></tr></thead><tbody><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">client_id</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">Your app's client ID.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">client_secret</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">Your app's client secret.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">code</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">code</code> from the auth callback; see the <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/auth#query-parameters-in-auth-callback">list of auth callback query parameters</a>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">scope</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">scope</code> list from the auth callback; see the <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/auth#query-parameters-in-auth-callback">list of auth callback query parameters</a>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">context</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The store <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">context</code> from the auth callback; see the <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/auth#query-parameters-in-auth-callback">list of auth callback query parameters</a>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">grant_type</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The value is always <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">authorization_code</code>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">redirect_uri</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">Identical to the auth callback registered in the app profile.</td></tr></tbody></table> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Receiving the access_token response<a href="#receiving-the-access_token-response" id="receiving-the-access_token-response" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">BigCommerce responds to the access_token request with JSON that contains a permanent <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code>, among other information. Use this <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> to authenticate API requests the app makes on behalf of the store; see <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/start/authentication">Authentication and Example Requests</a>. To provide the most responsive app architecture and re-authentication checks, save all the response values.</p> <div class="nextra-code-block nx-relative nx-mt-6 first:nx-mt-0"><div class="nx-absolute nx-top-0 nx-z-[1] nx-w-full nx-truncate nx-rounded-t-xl nx-bg-primary-700/5 nx-py-2 nx-px-4 nx-text-xs nx-text-gray-700 dark:nx-bg-primary-300/10 dark:nx-text-gray-200">Example response: Create an access_token</div><pre class="nx-bg-primary-700/5 nx-mb-4 nx-overflow-x-auto nx-rounded-xl nx-subpixel-antialiased dark:nx-bg-primary-300/10 nx-text-[.9em] contrast-more:nx-border contrast-more:nx-border-primary-900/20 contrast-more:nx-contrast-150 contrast-more:dark:nx-border-primary-100/40 nx-pt-12 nx-pb-4" data-language="json" data-theme="default"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10 [counter-reset:line]" dir="ltr" data-line-numbers="" data-language="json" data-theme="default" data-line-numbers-max-digits="2"><span class="line"><span style="color:var(--shiki-color-text)">{</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"access_token"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"xxxxalphanumstringxxxx"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"scope"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"store_v2_orders store_channel_listings_read_only"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"user"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"id"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">24654</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"username"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"merchant@example.com"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"email"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"merchant@example.com"</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"owner"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> {</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"id"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-constant)">12345</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"username"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"owner@example.com"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"email"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"owner@example.com"</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> }</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"context"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"stores/g5cd38"</span><span style="color:var(--shiki-token-punctuation)">,</span></span> <span class="line"><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-keyword)">"account_uuid"</span><span style="color:var(--shiki-token-punctuation)">:</span><span style="color:var(--shiki-color-text)"> </span><span style="color:var(--shiki-token-string-expression)">"12345678-90ab-cdef-1234-567890abcdef"</span></span> <span class="line"><span style="color:var(--shiki-color-text)">}</span></span></code></pre><div class="nx-opacity-0 nx-transition [div:hover>&]:nx-opacity-100 focus-within:nx-opacity-100 nx-flex nx-gap-1 nx-absolute nx-m-[11px] nx-right-0 nx-top-8"><button class="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50 md:nx-hidden" title="Toggle word wrap"><svg viewBox="0 0 24 24" width="24" height="24" class="nx-pointer-events-none nx-h-4 nx-w-4"><path fill="currentColor" d="M4 19h6v-2H4v2zM20 5H4v2h16V5zm-3 6H4v2h13.25c1.1 0 2 .9 2 2s-.9 2-2 2H15v-2l-3 3l3 3v-2h2c2.21 0 4-1.79 4-4s-1.79-4-4-4z"></path></svg></button><button class="nextra-button nx-transition-all active:nx-opacity-50 nx-bg-primary-700/5 nx-border nx-border-black/5 nx-text-gray-600 hover:nx-text-gray-900 nx-rounded-md nx-p-1.5 dark:nx-bg-primary-300/10 dark:nx-border-white/10 dark:nx-text-gray-400 dark:hover:nx-text-gray-50" title="Copy code" tabindex="0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="nextra-copy-icon nx-pointer-events-none nx-h-4 nx-w-4"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></rect><path d="M5 15H4C2.89543 15 2 14.1046 2 13V4C2 2.89543 2.89543 2 4 2H13C14.1046 2 15 2.89543 15 4V5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></button></div></div> <h3 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">Response body properties for the access_token request<a href="#response-body-properties-for-the-access_token-request" id="response-body-properties-for-the-access_token-request" class="subheading-anchor" aria-label="Permalink for this section"></a></h3> <table class="nx-block nx-overflow-x-scroll nextra-scrollbar nx-mt-6 nx-p-0 first:nx-mt-0"><thead><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600" align="left">Property</th><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600" align="left">Type</th><th class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 nx-font-semibold dark:nx-border-gray-600" align="left">Description</th></tr></thead><tbody><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">string</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The semi-permanent security token that your app can use to make requests on behalf of the store. Save this value securely for future requests.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">scope</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">string</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">A space-separated list of the OAuth scopes this <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> authorizes access to.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">user.id</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">integer</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">BigCommerce’s unique identifier for the authorized user. Save this value to identify the user in future requests.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">user.username</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">string</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The username that the authorized user has on file with BigCommerce.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">user.email</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">string</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The email address that the authorized user has on file with BigCommerce. Save this value for future requests.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">owner.id</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">integer</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">BigCommerce’s unique identifier for the store owner. Save this value to identify the user in future requests.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">owner.username</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">string</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The username that the store owner has on file with BigCommerce.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">owner.email</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">string</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The email address that the store owner has on file with BigCommerce. Save this value for future requests.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">context</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">string</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The path that identifies the store in API requests to <span data-rehype-pretty-code-fragment=""><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr" data-language="http" data-theme="default"><span class="line"><span style="color:var(--shiki-color-text)">https://api.bigcommerce.com</span></span></code></span>; a string of the form <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">stores/{STORE_HASH}</code>.</td></tr><tr class="nx-m-0 nx-border-t nx-border-gray-300 nx-p-0 dark:nx-border-gray-600 even:nx-bg-gray-100 even:dark:nx-bg-gray-600/20"><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left"><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">account_uuid</code></td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">string, UUID</td><td class="nx-m-0 nx-border nx-border-gray-300 nx-px-4 nx-py-2 dark:nx-border-gray-600" align="left">The ID of the Developer Portal account that registered the app profile.</td></tr></tbody></table> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Responding to the auth callback<a href="#responding-to-the-auth-callback" id="responding-to-the-auth-callback" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">After you save the <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code> response body information, respond to the <span data-rehype-pretty-code-fragment=""><code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr" data-language="http" data-theme="default"><span class="line"><span style="color:var(--shiki-token-keyword)">GET</span><span style="color:var(--shiki-color-text)"> /auth</span></span></code></span> callback with markup and assets to render in the store control panel. BigCommerce renders the response view inside an <strong>iFrame</strong>, so ensure that any JavaScript you send is scoped to avoid conflicts with the store control panel's JavaScript.</p> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">If you do not respond, the merchant will be left looking at a blank screen and will not be able to interact with your app.</p> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Security considerations<a href="#security-considerations" id="security-considerations" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0"><a href="https://tools.ietf.org/html/rfc6749" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">RFC 6749 (tools.ietf.org)<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a> discusses security considerations, recommendations, and requirements. The following are some requirements and recommendations applicable to apps:</p> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2">Request access tokens with the minimal scope necessary.</li> <li class="nx-my-2">Keep access tokens and client secrets confidential in transit and storage.</li> <li class="nx-my-2">Educate end-users about the risks phishing attacks pose.</li> <li class="nx-my-2">Implement CSRF protection on redirect URIs.</li> </ul> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">For additional details, see <a href="https://tools.ietf.org/html/rfc6749#section-10" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Security Considerations in RFC 6749 (tools.ietf.org)<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a>. For a list of the top web application security risks and best practices for avoiding them, see <a href="https://owasp.org/www-project-top-ten/" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">OWASP Top Ten (owasp.org)<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a>.</p> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Helpful tools<a href="#helpful-tools" id="helpful-tools" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <p class="nx-mt-6 nx-leading-7 first:nx-mt-0">The following BigCommerce API clients expose helper methods for BigCommerce's code grant authorization flow:</p> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2"><a href="https://github.com/bigcommerce/bigcommerce-api-python" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Python API Client<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2">Fetches <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code></li> <li class="nx-my-2">Verifies <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">signed_payload_jwt</code></li> </ul> </li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/node-bigcommerce/" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Node API Client<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2">Fetches <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code></li> <li class="nx-my-2">Verifies <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">signed_payload_jwt</code></li> </ul> </li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/bigcommerce-api-php" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">PHP API Client<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2">Fetches <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code></li> </ul> </li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/omniauth-bigcommerce" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Ruby OmniAuth Gem<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2">Fetches <code class="nx-border-black nx-border-opacity-[0.04] nx-bg-opacity-[0.03] nx-bg-black nx-break-words nx-rounded-md nx-border nx-py-0.5 nx-px-[.25em] nx-text-[.9em] dark:nx-border-white/10 dark:nx-bg-white/10" dir="ltr">access_token</code></li> </ul> </li> </ul> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Next step<a href="#next-step" id="next-step" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2"><a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/guide/callbacks">Handle load, uninstall, and remove_user callbacks</a></li> </ul> <h2 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">Resources<a href="#resources" id="resources" class="subheading-anchor" aria-label="Permalink for this section"></a></h2> <h3 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">Related articles<a href="#related-articles" id="related-articles" class="subheading-anchor" aria-label="Permalink for this section"></a></h3> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2"><a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/start/about">About Our APIs</a></li> <li class="nx-my-2"><a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/start/authentication">Authentication</a></li> </ul> <h3 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">Sample apps<a href="#sample-apps" id="sample-apps" class="subheading-anchor" aria-label="Permalink for this section"></a></h3> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2"><a href="https://github.com/bigcommerce/sample-app-nodejs" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Node / React / Next.js<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a> with <a class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]" href="/docs/integrations/apps/quick-start">quick start tutorial</a></li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/hello-world-app-python-flask" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Python / Flask<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/hello-world-app-php-silex" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">PHP / Silex<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/hello-world-app-ruby-sinatra" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Ruby / Sinatra<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/laravel-react-sample-app" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Laravel / React<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> </ul> <h3 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">Tools<a href="#tools" id="tools" class="subheading-anchor" aria-label="Permalink for this section"></a></h3> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2"><a href="https://github.com/bigcommerce/node-bigcommerce/" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Node API Client<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/bigcommerce-api-python" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Python API Client<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/bigcommerce-api-php" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">PHP API Client<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/bigcommerce-api-ruby" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Ruby API Client<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://github.com/bigcommerce/omniauth-bigcommerce" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Ruby OmniAuth Gem<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://developer.bigcommerce.com/big-design" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">BigDesign Developer Playground<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://figma.com/file/jTVuUkiZ1j3rux8WHG4IKK/BigDesign-UI-Kit?node-id=0%3A1/duplicate" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Figma UI Kit<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> </ul> <h3 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">Blog posts<a href="#blog-posts" id="blog-posts" class="subheading-anchor" aria-label="Permalink for this section"></a></h3> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2"><a href="https://medium.com/bigcommerce-developer-blog/how-to-test-app-authentication-locally-with-ngrok-149150bfe4cf" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">How to Test App Authentication Locally with ngrok<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://medium.com/bigcommerce-developer-blog/building-a-bigcommerce-app-using-laravel-and-react-711ceceb5006" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">Building a BigCommerce App Using Laravel and React<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://medium.com/bigcommerce-developer-blog/bigdesign-build-native-looking-uis-with-the-bigcommerce-design-system-fb06a01a24f2" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">BigDesign Tutorial<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> </ul> <h3 class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-8 nx-text-2xl">Additional resources<a href="#additional-resources" id="additional-resources" class="subheading-anchor" aria-label="Permalink for this section"></a></h3> <ul class="nx-mt-6 nx-list-disc first:nx-mt-0 ltr:nx-ml-6 rtl:nx-mr-6"> <li class="nx-my-2"><a href="https://oauth.net/getting-started/" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">OAuth 2.0 Simplified (oauth.net)<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://tools.ietf.org/html/rfc6749" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">RFC 6749 (tools.ietf.org)<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> <li class="nx-my-2"><a href="https://owasp.org/www-project-top-ten/" target="_blank" rel="noreferrer" class="nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font]">OWASP Top Ten (owasp.org)<span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a></li> </ul><div class="nx-mt-16"></div><div class="mb-8 inline-flex items-center gap-2 text-sm"><span class="font-semibold">Did you find what you were looking for?</span><button class="transition-colors cursor-pointer rounded-md text-sm font-medium bg-blue-600 dark:bg-blue-300 text-white dark:text-gray-900 hover:bg-blue-700 dark:hover:bg-blue-400 p-2" aria-label="[object Object]"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path fill-rule="evenodd" clip-rule="evenodd" d="M9 22h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 2 7.58 8.59C7.22 8.95 7 9.45 7 10v10c0 1.1.9 2 2 2Zm0-12 4.34-4.34L12 11h9v2l-3 7H9V10Zm-4 0H1v12h4V10Z" fill="currentColor"></path></svg></button><button class="transition-colors cursor-pointer rounded-md text-sm font-medium bg-blue-600 dark:bg-blue-300 text-white dark:text-gray-900 hover:bg-blue-700 dark:hover:bg-blue-400 p-2" aria-label="[object Object]"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H6c-.83 0-1.54.5-1.84 1.22l-3.02 7.05c-.09.23-.14.47-.14.73v2c0 1.1.9 2 2 2h6.31l-.95 4.57-.03.32c0 .41.17.79.44 1.06L9.83 22l6.59-6.59c.36-.36.58-.86.58-1.41V4c0-1.1-.9-2-2-2Zm0 12-4.34 4.34L12 13H3v-2l3-7h9v10Zm8-12h-4v12h4V2Z" fill="currentColor"></path></svg></button></div><div class="nx-mb-8 nx-flex nx-items-center nx-border-t nx-pt-8 dark:nx-border-neutral-800 contrast-more:nx-border-neutral-400 dark:contrast-more:nx-border-neutral-400 print:nx-hidden"><a title="Locating app IDs" class="nx-flex nx-max-w-[50%] nx-items-center nx-gap-1 nx-py-4 nx-text-base nx-font-medium nx-text-gray-600 nx-transition-colors [word-break:break-word] hover:nx-text-primary-600 dark:nx-text-gray-300 md:nx-text-lg ltr:nx-pr-4 rtl:nx-pl-4" href="/docs/integrations/apps/guide/id"><svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-inline nx-h-5 nx-shrink-0 ltr:nx-rotate-180"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>Locating app IDs</a><a title="Handling callbacks" class="nx-flex nx-max-w-[50%] nx-items-center nx-gap-1 nx-py-4 nx-text-base nx-font-medium nx-text-gray-600 nx-transition-colors [word-break:break-word] hover:nx-text-primary-600 dark:nx-text-gray-300 md:nx-text-lg ltr:nx-ml-auto ltr:nx-pl-4 ltr:nx-text-right rtl:nx-mr-auto rtl:nx-pr-4 rtl:nx-text-left" href="/docs/integrations/apps/guide/callbacks">Handling callbacks<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="nx-inline nx-h-5 nx-shrink-0 rtl:nx-rotate-180"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></a></div></div></main></article></div><footer class="py-[3.75rem]"><div class="container mx-auto max-w-[90rem] pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]"><div class="space-y-3 py-8"><p>Join our community of thousands of developers</p><form class="flex flex-col gap-4 sm:flex-row sm:gap-2"><div class="flex w-full shrink flex-col gap-1 sm:w-1/3"><label for="mini-slack-form-email" class="sr-only">Email</label><input id="mini-slack-form-email" class="rounded-md bg-white px-5 py-3 ring-1 ring-gray-200 placeholder:text-gray-400 dark:bg-gray-800 dark:ring-gray-700 dark:placeholder:text-gray-500" type="email" name="email" placeholder="Enter your email" required=""/></div><button class="transition-colors cursor-pointer rounded-md text-sm font-medium bg-blue-600 dark:bg-blue-300 text-white dark:text-gray-900 hover:bg-blue-700 dark:hover:bg-blue-400 px-3 py-1.5 whitespace-nowrap" aria-label="Join #BigCommerceDevs Slack,false" type="submit">Join #BigCommerceDevs Slack</button></form><p class="max-w-[700px] text-gray-500 dark:text-gray-300">Join thousands of other #BigCommerceDevs that are building on BigCommerce. We will also keep you updated with our monthly BigCommerce Developers newsletter. You may opt out at any time.</p></div></div><hr class="border-t-gray-200 dark:border-t-gray-700" style="margin:0rem 0rem"/><div class="container mx-auto max-w-[90rem] pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]"><div class="flex flex-col justify-between gap-8 py-12 sm:flex-row"><ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300"><li><svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 inline-block h-5 w-5"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.626 7.412c-1.04 0-1.891-.85-1.891-1.891 0-1.04.85-1.89 1.89-1.89 1.042 0 1.892.85 1.892 1.89v1.89H9.626ZM4.89 16.895c1.04 0 1.89-.85 1.89-1.89v-1.892h-1.89c-1.041 0-1.891.85-1.891 1.891s.85 1.891 1.89 1.891Zm4.735-3.781c-1.04 0-1.891.85-1.891 1.89v4.735c0 1.04.85 1.89 1.89 1.89 1.042 0 1.892-.85 1.892-1.89v-4.735c0-1.04-.85-1.89-1.891-1.89Zm1.89-2.859c0-1.04-.85-1.89-1.89-1.89H4.89C3.85 8.364 3 9.214 3 10.254s.85 1.89 1.89 1.89h4.735c1.041 0 1.891-.85 1.891-1.89Zm5.702 0c0-1.04.85-1.89 1.891-1.89S21 9.214 21 10.254s-.85 1.89-1.89 1.89h-1.892v-1.89Zm-2.844 1.891c1.04 0 1.891-.85 1.891-1.89V5.52c0-1.04-.85-1.89-1.89-1.89-1.042 0-1.892.85-1.892 1.89v4.734c0 1.041.85 1.891 1.891 1.891Zm0 5.703c1.04 0 1.891.85 1.891 1.89 0 1.041-.85 1.891-1.89 1.891-1.042 0-1.892-.85-1.892-1.89v-1.891h1.891Zm-1.89-2.845c0 1.041.85 1.891 1.89 1.891h4.735c1.04 0 1.89-.85 1.89-1.89 0-1.041-.85-1.892-1.89-1.892h-4.735c-1.04 0-1.89.85-1.89 1.891Z" fill="currentColor"></path></svg>Need help? <a class="text-blue-600 dark:text-blue-300" href="/slack">Join our BigCommerceDevs Slack</a></li><li><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 inline-block h-5 w-5"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3h10c1.1 0 2 .9 2 2v16l-7-3-7 3V5c0-1.1.9-2 2-2Zm5 12.82L17 18V5H7v13l5-2.18Z" fill="currentColor"></path></svg>Find endpoints quickly in the <a class="text-blue-600 dark:text-blue-300" href="/docs/api">API reference</a></li><li><svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 inline-block h-5 w-5"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.204 3.333c.888 0 1.815.114 2.659.38.57.19 1.064.418 1.52.76v11.093c0 .19-.19.38-.38.38-.076 0-.114 0-.19-.038-1.064-.57-2.356-.798-3.61-.798-1.291 0-3.153.494-4.178 1.14-1.102-.836-2.698-1.14-4.18-1.14-1.101 0-2.583.342-3.608.836-.038 0-.067.01-.095.02-.029.009-.057.018-.095.018-.19 0-.38-.19-.38-.38V4.474c1.101-.837 2.697-1.14 4.179-1.14 1.481 0 3.077.303 4.179 1.14 1.101-.837 2.697-1.14 4.178-1.14Zm0 10.258c.911 0 1.823.114 2.659.38V5.233c-.836-.266-1.748-.38-2.66-.38-1.291 0-3.153.494-4.178 1.14v8.737c1.025-.645 2.887-1.14 4.178-1.14Z" fill="currentColor"></path></svg>Stay up to date with <a class="text-blue-600 dark:text-blue-300" href="/release-notes">Release notes</a></li><li><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 inline-block h-5 w-5"><path d="M.03 44.601a.393.393 0 0 1 .088-.43L44.162.098a.335.335 0 0 1 .434-.035l.057-.057c.956 1.12 3.14 3.176 3.14 3.176l.022.025c.082.093.185.21.185.368v44.13a.308.308 0 0 1-.294.294H3.663c-.208 0-.328-.126-.409-.211l-.029-.03c-.008-.008-.05-.05-.12-.116-.47-.454-2.165-2.09-2.812-2.813A.392.392 0 0 1 .03 44.6Z" fill="currentColor" style="fill:var(--logo-even-color)"></path><path d="M43.807 1.65v42.147H1.687L43.807 1.65Z" fill="currentColor" style="fill:var(--logo-odd-color)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M18.694 26.082v12.612a.323.323 0 0 0 .335.323h11.798c4.29 0 6.513-2.635 6.513-5.984a5.466 5.466 0 0 0-3.299-5.115.322.322 0 0 1 0-.588 5.283 5.283 0 0 0 3.201-4.737c0-2.928-2.572-5.605-6.765-5.605h-2.726l-9.057 9.095Zm5.175 8.391h5.756c.819 0 1.409-.216 1.79-.561.374-.34.597-.851.597-1.55a2.13 2.13 0 0 0-.707-1.573c-.429-.385-.971-.528-1.68-.528h-5.756v4.212Zm5.47-9.182h-5.482v-3.765h5.482c.675 0 1.192.128 1.6.472.425.358.67.869.673 1.405 0 .626-.212 1.082-.569 1.386-.362.309-.924.502-1.704.502Z" fill="currentColor" style="fill:var(--logo-even-color)"></path></svg>Visit <a class="text-blue-600 dark:text-blue-300" target="_blank" rel="noopener noreferrer" href="https://www.bigcommerce.com">BigCommerce home</a></li></ul><div class="basis-1/4 space-y-6"><div class="space-y-8 text-gray-500 dark:text-gray-400"><svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-10 w-10"><path d="M.03 44.601a.393.393 0 0 1 .088-.43L44.162.098a.335.335 0 0 1 .434-.035l.057-.057c.956 1.12 3.14 3.176 3.14 3.176l.022.025c.082.093.185.21.185.368v44.13a.308.308 0 0 1-.294.294H3.663c-.208 0-.328-.126-.409-.211l-.029-.03c-.008-.008-.05-.05-.12-.116-.47-.454-2.165-2.09-2.812-2.813A.392.392 0 0 1 .03 44.6Z" fill="currentColor" style="fill:var(--logo-even-color)"></path><path d="M43.807 1.65v42.147H1.687L43.807 1.65Z" fill="currentColor" style="fill:var(--logo-odd-color)"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M18.694 26.082v12.612a.323.323 0 0 0 .335.323h11.798c4.29 0 6.513-2.635 6.513-5.984a5.466 5.466 0 0 0-3.299-5.115.322.322 0 0 1 0-.588 5.283 5.283 0 0 0 3.201-4.737c0-2.928-2.572-5.605-6.765-5.605h-2.726l-9.057 9.095Zm5.175 8.391h5.756c.819 0 1.409-.216 1.79-.561.374-.34.597-.851.597-1.55a2.13 2.13 0 0 0-.707-1.573c-.429-.385-.971-.528-1.68-.528h-5.756v4.212Zm5.47-9.182h-5.482v-3.765h5.482c.675 0 1.192.128 1.6.472.425.358.67.869.673 1.405 0 .626-.212 1.082-.569 1.386-.362.309-.924.502-1.704.502Z" fill="currentColor" style="fill:var(--logo-even-color)"></path></svg><p class="dark:text-gray-300">Everything you need for growth, all from one modern platform.</p></div><div class="inline-flex gap-6 text-gray-500 dark:text-gray-400"><a href="/slack"><svg viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.626 7.412c-1.04 0-1.891-.85-1.891-1.891 0-1.04.85-1.89 1.89-1.89 1.042 0 1.892.85 1.892 1.89v1.89H9.626ZM4.89 16.895c1.04 0 1.89-.85 1.89-1.89v-1.892h-1.89c-1.041 0-1.891.85-1.891 1.891s.85 1.891 1.89 1.891Zm4.735-3.781c-1.04 0-1.891.85-1.891 1.89v4.735c0 1.04.85 1.89 1.89 1.89 1.042 0 1.892-.85 1.892-1.89v-4.735c0-1.04-.85-1.89-1.891-1.89Zm1.89-2.859c0-1.04-.85-1.89-1.89-1.89H4.89C3.85 8.364 3 9.214 3 10.254s.85 1.89 1.89 1.89h4.735c1.041 0 1.891-.85 1.891-1.89Zm5.702 0c0-1.04.85-1.89 1.891-1.89S21 9.214 21 10.254s-.85 1.89-1.89 1.89h-1.892v-1.89Zm-2.844 1.891c1.04 0 1.891-.85 1.891-1.89V5.52c0-1.04-.85-1.89-1.89-1.89-1.042 0-1.892.85-1.892 1.89v4.734c0 1.041.85 1.891 1.891 1.891Zm0 5.703c1.04 0 1.891.85 1.891 1.89 0 1.041-.85 1.891-1.89 1.891-1.042 0-1.892-.85-1.892-1.89v-1.891h1.891Zm-1.89-2.845c0 1.041.85 1.891 1.89 1.891h4.735c1.04 0 1.89-.85 1.89-1.89 0-1.041-.85-1.892-1.89-1.892h-4.735c-1.04 0-1.89.85-1.89 1.891Z" fill="currentColor"></path></svg></a><a href="https://github.com/bigcommerce" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 36 35" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.015 0C8.053 0 0 8.02 0 17.944c0 7.931 5.16 14.646 12.318 17.022.895.179 1.223-.386 1.223-.861 0-.416-.03-1.842-.03-3.328-5.01 1.07-6.055-2.139-6.055-2.139-.805-2.08-1.998-2.614-1.998-2.614-1.64-1.099.12-1.099.12-1.099 1.819.119 2.773 1.842 2.773 1.842 1.61 2.733 4.206 1.96 5.25 1.485.149-1.159.626-1.96 1.133-2.406-3.997-.416-8.202-1.96-8.202-8.853 0-1.96.715-3.565 1.849-4.813-.179-.445-.805-2.287.18-4.753 0 0 1.52-.476 4.95 1.842a17.507 17.507 0 0 1 4.504-.595c1.521 0 3.072.209 4.503.595 3.43-2.318 4.952-1.842 4.952-1.842.984 2.466.357 4.308.178 4.753 1.164 1.248 1.85 2.852 1.85 4.813 0 6.892-4.206 8.407-8.232 8.853.656.564 1.223 1.634 1.223 3.327 0 2.406-.03 4.338-.03 4.931 0 .476.328 1.04 1.223.862C30.84 32.59 36 25.876 36 17.944 36.03 8.02 27.947 0 18.015 0Z"></path></svg></a><a href="https://discord.gg/qzGDFDXc4w" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 26 23" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"><path d="M19.942 4.927a16.288 16.288 0 0 0-4.126-1.297c-.178.322-.386.754-.529 1.098a15.15 15.15 0 0 0-4.573 0 11.725 11.725 0 0 0-.534-1.098c-1.45.25-2.835.693-4.13 1.3-2.611 3.946-3.319 7.794-2.965 11.587a16.497 16.497 0 0 0 5.06 2.593c.408-.56.771-1.156 1.084-1.784a10.658 10.658 0 0 1-1.706-.831c.143-.106.283-.217.418-.331 3.29 1.54 6.866 1.54 10.118 0 .137.114.277.225.418.33a10.63 10.63 0 0 1-1.71.833c.314.627.675 1.224 1.084 1.785a16.465 16.465 0 0 0 5.064-2.595c.415-4.397-.71-8.21-2.973-11.59ZM9.678 14.185c-.988 0-1.798-.923-1.798-2.046 0-1.123.792-2.047 1.798-2.047 1.005 0 1.815.922 1.798 2.047.001 1.123-.793 2.046-1.798 2.046Zm6.644 0c-.988 0-1.798-.923-1.798-2.046 0-1.123.793-2.047 1.798-2.047 1.006 0 1.816.922 1.798 2.047 0 1.123-.793 2.046-1.798 2.046Z" fill="currentColor"></path></svg></a><a href="https://twitter.com/BigCommerceDevs" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"><path d="m11.927 9.982 5.584-6.352h-1.323l-4.849 5.515L7.467 3.63H3l5.856 8.34L3 18.63h1.323l5.12-5.824 4.09 5.824H18l-6.073-8.648Zm-1.812 2.061-.594-.83-4.72-6.608h2.032l3.81 5.333.593.83 4.953 6.932h-2.033l-4.041-5.656Z" fill="currentColor"></path></svg></a><a href="https://www.youtube.com/channel/UCVeEYWDqZzjRD2CGMrZ2auQ" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 51 35" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6"><g clip-path="url(#youtube_svg__a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M44.97 1.177a6.246 6.246 0 0 1 4.426 4.391c1.527 6.11 1.428 17.66.032 23.864a6.246 6.246 0 0 1-4.426 4.39c-6.094 1.496-33.39 1.312-39.132 0a6.246 6.246 0 0 1-4.426-4.39C.004 23.609.103 11.296 1.41 5.6a6.246 6.246 0 0 1 4.427-4.39C13.985-.478 42.07.066 44.97 1.176Zm-24.377 8.878L33.68 17.5l-13.087 7.445v-14.89Z"></path></g><defs><clipPath id="youtube_svg__a"><path d="M0 0h51v35H0z"></path></clipPath></defs></svg></a></div></div></div><div class="space-y-4 text-sm text-gray-500 dark:text-gray-300"><span>© Copyright 2003 - 2024 BigCommerce Pty. Ltd.</span><span class="mx-4">––</span><ul class="inline-flex flex-row gap-4"><li><a href="https://support.bigcommerce.com/s/contact" target="_blank" rel="noopener noreferrer">Contact Us</a></li><li><a href="https://careers.bigcommerce.com" target="_blank" rel="noopener noreferrer">Careers</a></li><li><a href="https://www.bigcommerce.com/terms/api-terms" target="_blank" rel="noopener noreferrer">Terms of Service</a></li><li><a href="https://www.bigcommerce.com/privacy/" target="_blank" rel="noopener noreferrer">Privacy Policy</a></li></ul></div></div></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"__nextra_dynamic_mdx":"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n h1: \"h1\",\n p: \"p\",\n a: \"a\",\n code: \"code\",\n h4: \"h4\",\n em: \"em\",\n h2: \"h2\",\n span: \"span\",\n ol: \"ol\",\n li: \"li\",\n ul: \"ul\",\n strong: \"strong\",\n pre: \"pre\",\n h3: \"h3\",\n table: \"table\",\n thead: \"thead\",\n tr: \"tr\",\n th: \"th\",\n tbody: \"tbody\",\n td: \"td\"\n }, _provideComponents(), props.components), {Callout, Tabs, Tab} = _components;\n if (!Callout) _missingMdxReference(\"Callout\", true);\n if (!Tab) _missingMdxReference(\"Tab\", true);\n if (!Tabs) _missingMdxReference(\"Tabs\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.h1, {\n children: \"Single-Click App OAuth Flow\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"After you \", _jsx(_components.a, {\n href: \"/docs/integrations/apps/guide\",\n children: \"install your draft app\"\n }), \" and \", _jsx(_components.a, {\n href: \"/docs/integrations/apps/guide/developer-portal\",\n children: \"create an app profile\"\n }), \", you're ready to write the code grant authorization flow that generates a unique \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" for each store that installs your app. This article covers the sequence and contents of API requests and responses in the code grant authorization flow for a BigCommerce app.\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"It may be more appropriate for your application to use an API client to handle this logic; see \", _jsx(_components.a, {\n href: \"#helpful-tools\",\n children: \"the list of BigCommerce API clients\"\n }), \" that expose OAuth-related helper methods.\"]\n }), \"\\n\", _jsxs(Callout, {\n type: \"info\",\n children: [_jsx(_components.h4, {\n id: \"store-owner-access_token-constraint\",\n children: \"Store owner access_token constraint\"\n }), _jsxs(_components.p, {\n children: [\"Typically, only \", _jsx(_components.a, {\n href: \"https://support.bigcommerce.com/s/article/Store-API-Accounts#creating\",\n children: \"store owners\"\n }), \" and authorized users can create API accounts and \", _jsx(_components.code, {\n children: \"access_token\"\n }), \"s for a store. However, when an app is approved to be publicly available for additional stores to install, it can generate \", _jsx(_components.code, {\n children: \"access_token\"\n }), \"s \", _jsx(_components.em, {\n children: \"on behalf\"\n }), \" of store owners and authorized users.\"]\n })]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"overview\",\n children: \"Overview\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Your app must expose a callback endpoint, \", _jsx(_components.span, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.code, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"GET\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" /auth\"\n })]\n })\n })\n }), \", that the merchant's store control panel can hit to initiate the code grant authorization flow. For a list of all the callback endpoints your app can expose, both required and optional, see \", _jsx(_components.a, {\n href: \"/docs/integrations/apps/guide/callbacks\",\n children: \"Single-Click App Callback Handlers\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"BigCommerce uses a modified version of the \", _jsx(_components.a, {\n href: \"https://tools.ietf.org/html/rfc6749#section-4.1\",\n children: \"OAuth2 authorization code grant (tools.ietf.org)\"\n }), \". The sequence is as follows:\"]\n }), \"\\n\", _jsxs(_components.ol, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"The merchant initiates installing your app by signing in to their store control panel and doing one of the following:\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"clicking \", _jsx(_components.strong, {\n children: \"Install\"\n }), \" in the \", _jsx(_components.a, {\n href: \"https://www.bigcommerce.com/apps/\",\n children: \"App Marketplace\"\n }), \", or\"]\n }), \"\\n\", _jsx(_components.li, {\n children: \"following a direct installation link.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.ol, {\n start: \"2\",\n children: [\"\\n\", _jsx(_components.li, {\n children: \"The merchant accepts the app's OAuth scope permissions. The OAuth consent view presented to the merchant requires them to approve all the scopes to install the app; at this time, merchants cannot pick and choose scopes.\"\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"The merchant's \", _jsx(_components.a, {\n href: \"#receiving-the-auth-callback\",\n children: \"browser sends a GET request to the app\"\n }), \" server's \", _jsx(_components.span, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.code, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"GET\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" /auth\"\n })]\n })\n })\n }), \" endpoint that contains some of the information necessary to request a unique \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" for the store.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"The \", _jsx(_components.a, {\n href: \"#requesting-the-access_token\",\n children: \"app sends POST request to BigCommerce\"\n }), \" to request a unique \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" for the store.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"BigCommerce responds with either an error or an \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" unique to the merchant's store; see \", _jsx(_components.a, {\n href: \"#receiving-the-access_token-response\",\n children: \"receiving the access_token response\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"The app saves the store's unique \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" and handles any internal logic.\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"The app sends a \", _jsx(_components.a, {\n href: \"#responding-to-the-auth-callback\",\n children: \"response to the browser's GET request\"\n }), \" in step 3 that contains markup to render the app's landing view in the iFrame the store control panel provides.\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"After your app has an \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" for the store, the following events can mark the \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" for invalidation the next time the merchant opens the app:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"You change the app's OAuth scopes.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"The merchant's email address changes.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The next time the merchant opens the app in the store control panel, the browser will prompt them to accept the changes. Once they accept, their previous \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" will be invalid, and your app will receive a fresh auth callback for their store.\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"receiving-the-auth-callback\",\n children: \"Receiving the auth callback\"\n }), \"\\n\", _jsxs(Callout, {\n type: \"info\",\n children: [_jsx(_components.h4, {\n id: \"auth-callback-url-requirement\",\n children: \"Auth callback URL requirement\"\n }), _jsx(_components.p, {\n children: \"In production, all app callback URLs must be publicly available, fully qualified, and served over TLS/SSL.\"\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"The request to your app's \", _jsx(_components.span, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.code, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"GET\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" /auth\"\n })]\n })\n })\n }), \" endpoint contains query parameters required to request an \", _jsx(_components.code, {\n children: \"access_token\"\n }), \".\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"It's a best practice to request and receive an \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" \", _jsx(_components.strong, {\n children: \"before\"\n }), \" responding to the auth callback.\"]\n }), \"\\n\", _jsxs(Tabs, {\n items: ['Example request', 'URL-decoded query parameters'],\n children: [_jsx(Tab, {\n children: _jsx(_components.pre, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n filename: \"Example request: auth callback\",\n hasCopyCode: true,\n children: _jsxs(_components.code, {\n \"data-line-numbers\": \"\",\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n \"data-line-numbers-max-digits\": \"1\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"GET\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" https://your_app.example.com/auth?account_uuid=12345678-90ab-cdef-1234-567890abcdef\u0026code=qr6h3thvbvag2ffq\u0026context=stores%2Fg5cd38\u0026scope=store_v2_orders+store_channel_listings_read_only\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"Accept\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string)\"\n },\n children: \"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"Referer\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string)\"\n },\n children: \"https://login.bigcommerce.com/\"\n })]\n })]\n })\n })\n }), _jsx(Tab, {\n children: _jsx(_components.pre, {\n \"data-language\": \"json\",\n \"data-theme\": \"default\",\n filename: \"Example query parameters: auth callback\",\n hasCopyCode: true,\n children: _jsxs(_components.code, {\n \"data-line-numbers\": \"\",\n \"data-language\": \"json\",\n \"data-theme\": \"default\",\n \"data-line-numbers-max-digits\": \"1\",\n children: [_jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"{\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"account_uuid\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"12345678-90ab-cdef-1234-567890abcdef\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"code\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"qr6h3thvbvag2ffq\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"context\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"stores/g5cd38\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"scope\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"store_v2_orders store_channel_listings_read_only\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"}\"\n })\n })]\n })\n })\n })]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"query-parameters-in-auth-callback\",\n children: \"Query parameters in auth callback\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n align: \"left\",\n children: \"Parameter\"\n }), _jsx(_components.th, {\n align: \"left\",\n children: \"Description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"code\"\n })\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"The proverbial code in the code grant authorization flow; exchange for a semi-permanent \", _jsx(_components.code, {\n children: \"access_token\"\n }), \".\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"scope\"\n })\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"A space-separated list of the OAuth scopes associated with this app's \", _jsx(_components.a, {\n href: \"/docs/start/authentication/api-accounts#app-level-api-accounts\",\n children: \"API account\"\n }), \".\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"context\"\n })\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"The path that identifies the store in API requests to \", _jsx(_components.span, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.code, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n children: _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"https://api.bigcommerce.com\"\n })\n })\n })\n }), \"; a string of the form \", _jsx(_components.code, {\n children: \"stores/{STORE_HASH}\"\n }), \".\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"account_uuid\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"The ID of the Developer Portal account that registered the app profile.\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"Before proceeding with the grant code authorization flow, it's a best practice to validate the list of scopes to ensure that it matches the scopes currently configured in your app profile.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"requesting-the-access_token\",\n children: \"Requesting the access_token\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"To generate an access_token for the merchant's store, send a \", _jsx(_components.code, {\n children: \"POST\"\n }), \" request to \", _jsx(_components.span, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.code, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n children: _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"https://login.bigcommerce.com/oauth2/token\"\n })\n })\n })\n }), \". The request body contains a combination of query arguments from the auth callback and credentials from your app profile.\"]\n }), \"\\n\", _jsx(_components.pre, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n filename: \"Example request: Create an access_token\",\n hasCopyCode: true,\n children: _jsxs(_components.code, {\n \"data-line-numbers\": \"\",\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n \"data-line-numbers-max-digits\": \"2\",\n children: [_jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"POST\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" https://login.bigcommerce.com/oauth2/token\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"Accept\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string)\"\n },\n children: \"application/json\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"Content-Type\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string)\"\n },\n children: \"application/json\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"{\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"client_id\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" {CLIENT_ID}\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"client_secret\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" {CLIENT_SECRET}\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"code\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"qr6h3thvbvag2ffq\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"context\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"stores/g5cd38\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"scope\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"store_v2_orders store_channel_listings_read_only\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"grant_type\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"authorization_code\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"redirect_uri\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"https://your_app.example.com/auth\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"}\"\n })\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: \" \"\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"request-body-properties-in-the-access_token-request\",\n children: \"Request body properties in the access_token request\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n align: \"left\",\n children: \"Property\"\n }), _jsx(_components.th, {\n align: \"left\",\n children: \"Description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"client_id\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"Your app's client ID.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"client_secret\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"Your app's client secret.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"code\"\n })\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"The \", _jsx(_components.code, {\n children: \"code\"\n }), \" from the auth callback; see the \", _jsx(_components.a, {\n href: \"#query-parameters-in-auth-callback\",\n children: \"list of auth callback query parameters\"\n }), \".\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"scope\"\n })\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"The \", _jsx(_components.code, {\n children: \"scope\"\n }), \" list from the auth callback; see the \", _jsx(_components.a, {\n href: \"#query-parameters-in-auth-callback\",\n children: \"list of auth callback query parameters\"\n }), \".\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"context\"\n })\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"The store \", _jsx(_components.code, {\n children: \"context\"\n }), \" from the auth callback; see the \", _jsx(_components.a, {\n href: \"#query-parameters-in-auth-callback\",\n children: \"list of auth callback query parameters\"\n }), \".\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"grant_type\"\n })\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"The value is always \", _jsx(_components.code, {\n children: \"authorization_code\"\n }), \".\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"redirect_uri\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"Identical to the auth callback registered in the app profile.\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"receiving-the-access_token-response\",\n children: \"Receiving the access_token response\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"BigCommerce responds to the access_token request with JSON that contains a permanent \", _jsx(_components.code, {\n children: \"access_token\"\n }), \", among other information. Use this \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" to authenticate API requests the app makes on behalf of the store; see \", _jsx(_components.a, {\n href: \"/docs/start/authentication\",\n children: \"Authentication and Example Requests\"\n }), \". To provide the most responsive app architecture and re-authentication checks, save all the response values.\"]\n }), \"\\n\", _jsx(_components.pre, {\n \"data-language\": \"json\",\n \"data-theme\": \"default\",\n filename: \"Example response: Create an access_token\",\n hasCopyCode: true,\n children: _jsxs(_components.code, {\n \"data-line-numbers\": \"\",\n \"data-language\": \"json\",\n \"data-theme\": \"default\",\n \"data-line-numbers-max-digits\": \"2\",\n children: [_jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"{\"\n })\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"access_token\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"xxxxalphanumstringxxxx\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"scope\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"store_v2_orders store_channel_listings_read_only\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"user\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"id\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-constant)\"\n },\n children: \"24654\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"username\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"merchant@example.com\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"email\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"merchant@example.com\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"owner\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" {\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"id\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-constant)\"\n },\n children: \"12345\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"username\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"owner@example.com\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"email\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"owner@example.com\\\"\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" }\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"context\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"stores/g5cd38\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \",\"\n })]\n }), \"\\n\", _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"\\\"account_uuid\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-punctuation)\"\n },\n children: \":\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" \"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-string-expression)\"\n },\n children: \"\\\"12345678-90ab-cdef-1234-567890abcdef\\\"\"\n })]\n }), \"\\n\", _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"}\"\n })\n })]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"response-body-properties-for-the-access_token-request\",\n children: \"Response body properties for the access_token request\"\n }), \"\\n\", _jsxs(_components.table, {\n children: [_jsx(_components.thead, {\n children: _jsxs(_components.tr, {\n children: [_jsx(_components.th, {\n align: \"left\",\n children: \"Property\"\n }), _jsx(_components.th, {\n align: \"left\",\n children: \"Type\"\n }), _jsx(_components.th, {\n align: \"left\",\n children: \"Description\"\n })]\n })\n }), _jsxs(_components.tbody, {\n children: [_jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"access_token\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"string\"\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"The semi-permanent security token that your app can use to make requests on behalf of the store. Save this value securely for future requests.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"scope\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"string\"\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"A space-separated list of the OAuth scopes this \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" authorizes access to.\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"user.id\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"integer\"\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"BigCommerce’s unique identifier for the authorized user. Save this value to identify the user in future requests.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"user.username\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"string\"\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"The username that the authorized user has on file with BigCommerce.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"user.email\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"string\"\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"The email address that the authorized user has on file with BigCommerce. Save this value for future requests.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"owner.id\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"integer\"\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"BigCommerce’s unique identifier for the store owner. Save this value to identify the user in future requests.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"owner.username\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"string\"\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"The username that the store owner has on file with BigCommerce.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"owner.email\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"string\"\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"The email address that the store owner has on file with BigCommerce. Save this value for future requests.\"\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"context\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"string\"\n }), _jsxs(_components.td, {\n align: \"left\",\n children: [\"The path that identifies the store in API requests to \", _jsx(_components.span, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.code, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n children: _jsx(_components.span, {\n className: \"line\",\n children: _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \"https://api.bigcommerce.com\"\n })\n })\n })\n }), \"; a string of the form \", _jsx(_components.code, {\n children: \"stores/{STORE_HASH}\"\n }), \".\"]\n })]\n }), _jsxs(_components.tr, {\n children: [_jsx(_components.td, {\n align: \"left\",\n children: _jsx(_components.code, {\n children: \"account_uuid\"\n })\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"string, UUID\"\n }), _jsx(_components.td, {\n align: \"left\",\n children: \"The ID of the Developer Portal account that registered the app profile.\"\n })]\n })]\n })]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"responding-to-the-auth-callback\",\n children: \"Responding to the auth callback\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"After you save the \", _jsx(_components.code, {\n children: \"access_token\"\n }), \" response body information, respond to the \", _jsx(_components.span, {\n \"data-rehype-pretty-code-fragment\": \"\",\n children: _jsx(_components.code, {\n \"data-language\": \"http\",\n \"data-theme\": \"default\",\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"var(--shiki-token-keyword)\"\n },\n children: \"GET\"\n }), _jsx(_components.span, {\n style: {\n color: \"var(--shiki-color-text)\"\n },\n children: \" /auth\"\n })]\n })\n })\n }), \" callback with markup and assets to render in the store control panel. BigCommerce renders the response view inside an \", _jsx(_components.strong, {\n children: \"iFrame\"\n }), \", so ensure that any JavaScript you send is scoped to avoid conflicts with the store control panel's JavaScript.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"If you do not respond, the merchant will be left looking at a blank screen and will not be able to interact with your app.\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"security-considerations\",\n children: \"Security considerations\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [_jsx(_components.a, {\n href: \"https://tools.ietf.org/html/rfc6749\",\n children: \"RFC 6749 (tools.ietf.org)\"\n }), \" discusses security considerations, recommendations, and requirements. The following are some requirements and recommendations applicable to apps:\"]\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: \"Request access tokens with the minimal scope necessary.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Keep access tokens and client secrets confidential in transit and storage.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Educate end-users about the risks phishing attacks pose.\"\n }), \"\\n\", _jsx(_components.li, {\n children: \"Implement CSRF protection on redirect URIs.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"For additional details, see \", _jsx(_components.a, {\n href: \"https://tools.ietf.org/html/rfc6749#section-10\",\n children: \"Security Considerations in RFC 6749 (tools.ietf.org)\"\n }), \". For a list of the top web application security risks and best practices for avoiding them, see \", _jsx(_components.a, {\n href: \"https://owasp.org/www-project-top-ten/\",\n children: \"OWASP Top Ten (owasp.org)\"\n }), \".\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"helpful-tools\",\n children: \"Helpful tools\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"The following BigCommerce API clients expose helper methods for BigCommerce's code grant authorization flow:\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"https://github.com/bigcommerce/bigcommerce-api-python\",\n children: \"Python API Client\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Fetches \", _jsx(_components.code, {\n children: \"access_token\"\n })]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Verifies \", _jsx(_components.code, {\n children: \"signed_payload_jwt\"\n })]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"https://github.com/bigcommerce/node-bigcommerce/\",\n children: \"Node API Client\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Fetches \", _jsx(_components.code, {\n children: \"access_token\"\n })]\n }), \"\\n\", _jsxs(_components.li, {\n children: [\"Verifies \", _jsx(_components.code, {\n children: \"signed_payload_jwt\"\n })]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"https://github.com/bigcommerce/bigcommerce-api-php\",\n children: \"PHP API Client\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Fetches \", _jsx(_components.code, {\n children: \"access_token\"\n })]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"https://github.com/bigcommerce/omniauth-bigcommerce\",\n children: \"Ruby OmniAuth Gem\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [\"Fetches \", _jsx(_components.code, {\n children: \"access_token\"\n })]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"next-step\",\n children: \"Next step\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"/docs/integrations/apps/guide/callbacks\",\n children: \"Handle load, uninstall, and remove_user callbacks\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"resources\",\n children: \"Resources\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"related-articles\",\n children: \"Related articles\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"/docs/start/about\",\n children: \"About Our APIs\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"/docs/start/authentication\",\n children: \"Authentication\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"sample-apps\",\n children: \"Sample apps\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsxs(_components.li, {\n children: [_jsx(_components.a, {\n href: \"https://github.com/bigcommerce/sample-app-nodejs\",\n children: \"Node / React / Next.js\"\n }), \" with \", _jsx(_components.a, {\n href: \"/docs/integrations/apps/quick-start\",\n children: \"quick start tutorial\"\n })]\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/hello-world-app-python-flask\",\n children: \"Python / Flask\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/hello-world-app-php-silex\",\n children: \"PHP / Silex\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/hello-world-app-ruby-sinatra\",\n children: \"Ruby / Sinatra\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/laravel-react-sample-app\",\n children: \"Laravel / React\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"tools\",\n children: \"Tools\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/node-bigcommerce/\",\n children: \"Node API Client\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/bigcommerce-api-python\",\n children: \"Python API Client\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/bigcommerce-api-php\",\n children: \"PHP API Client\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/bigcommerce-api-ruby\",\n children: \"Ruby API Client\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://github.com/bigcommerce/omniauth-bigcommerce\",\n children: \"Ruby OmniAuth Gem\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://developer.bigcommerce.com/big-design\",\n children: \"BigDesign Developer Playground\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://figma.com/file/jTVuUkiZ1j3rux8WHG4IKK/BigDesign-UI-Kit?node-id=0%3A1/duplicate\",\n children: \"Figma UI Kit\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"blog-posts\",\n children: \"Blog posts\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://medium.com/bigcommerce-developer-blog/how-to-test-app-authentication-locally-with-ngrok-149150bfe4cf\",\n children: \"How to Test App Authentication Locally with ngrok\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://medium.com/bigcommerce-developer-blog/building-a-bigcommerce-app-using-laravel-and-react-711ceceb5006\",\n children: \"Building a BigCommerce App Using Laravel and React\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://medium.com/bigcommerce-developer-blog/bigdesign-build-native-looking-uis-with-the-bigcommerce-design-system-fb06a01a24f2\",\n children: \"BigDesign Tutorial\"\n })\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"additional-resources\",\n children: \"Additional resources\"\n }), \"\\n\", _jsxs(_components.ul, {\n children: [\"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://oauth.net/getting-started/\",\n children: \"OAuth 2.0 Simplified (oauth.net)\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://tools.ietf.org/html/rfc6749\",\n children: \"RFC 6749 (tools.ietf.org)\"\n })\n }), \"\\n\", _jsx(_components.li, {\n children: _jsx(_components.a, {\n href: \"https://owasp.org/www-project-top-ten/\",\n children: \"OWASP Top Ten (owasp.org)\"\n })\n }), \"\\n\"]\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components);\n return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {\n children: _jsx(_createMdxContent, props)\n })) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","__nextra_dynamic_opts":"{\"headings\":[{\"depth\":4,\"value\":\"Store owner access_token constraint\",\"id\":\"store-owner-access_token-constraint\"},{\"depth\":2,\"value\":\"Overview\",\"id\":\"overview\"},{\"depth\":2,\"value\":\"Receiving the auth callback\",\"id\":\"receiving-the-auth-callback\"},{\"depth\":4,\"value\":\"Auth callback URL requirement\",\"id\":\"auth-callback-url-requirement\"},{\"depth\":3,\"value\":\"Query parameters in auth callback\",\"id\":\"query-parameters-in-auth-callback\"},{\"depth\":2,\"value\":\"Requesting the access_token\",\"id\":\"requesting-the-access_token\"},{\"depth\":3,\"value\":\"Request body properties in the access_token request\",\"id\":\"request-body-properties-in-the-access_token-request\"},{\"depth\":2,\"value\":\"Receiving the access_token response\",\"id\":\"receiving-the-access_token-response\"},{\"depth\":3,\"value\":\"Response body properties for the access_token request\",\"id\":\"response-body-properties-for-the-access_token-request\"},{\"depth\":2,\"value\":\"Responding to the auth callback\",\"id\":\"responding-to-the-auth-callback\"},{\"depth\":2,\"value\":\"Security considerations\",\"id\":\"security-considerations\"},{\"depth\":2,\"value\":\"Helpful tools\",\"id\":\"helpful-tools\"},{\"depth\":2,\"value\":\"Next step\",\"id\":\"next-step\"},{\"depth\":2,\"value\":\"Resources\",\"id\":\"resources\"},{\"depth\":3,\"value\":\"Related articles\",\"id\":\"related-articles\"},{\"depth\":3,\"value\":\"Sample apps\",\"id\":\"sample-apps\"},{\"depth\":3,\"value\":\"Tools\",\"id\":\"tools\"},{\"depth\":3,\"value\":\"Blog posts\",\"id\":\"blog-posts\"},{\"depth\":3,\"value\":\"Additional resources\",\"id\":\"additional-resources\"}],\"frontMatter\":{},\"title\":\"Single-Click App OAuth Flow\"}"},"__N_SSG":true},"page":"/docs/integrations/apps/guide/auth","query":{},"buildId":"9F3PeAtnast_V8NbjPRN2","isFallback":false,"isExperimentalCompile":false,"gsp":true,"scriptLoader":[]}</script></body></html>