> ## Documentation Index
> Fetch the complete documentation index at: https://docs-staging-quickstart-revamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstarts

export const SectionCard = ({item}) => {
  const getLink = (item, label) => item.links?.find(l => l.label?.toLowerCase() === label.toLowerCase());
  const github = getLink(item, "github");
  const sample = getLink(item, "sample app");
  const quickstart = getLink(item, "quickstart");
  const docs = getLink(item, "Get started");
  const title = item?.name ?? "";
  const subtext = item?.subtext ?? "";
  const badge = item?.badge ?? "";
  const date = item?.date ?? "";
  const isHttpsLogo = typeof item?.logo === "string" && (/^https:\/\//i).test(item.logo);
  const src = isHttpsLogo ? item.logo : `/images/icons/light/${item?.logo}`;
  const srcDark = isHttpsLogo ? item.logo : `/images/icons/dark/${item?.logo}`;
  const imgClass = "!my-0 w-8 h-8 object-contain shrink-0 " + (isHttpsLogo ? "mint-filter mint-grayscale" : "");
  const tertiary = quickstart || docs;
  const tertiaryLabel = quickstart ? "Quickstart" : docs ? "Get started" : "";
  return <article className="
      libraries_card mb-[16px]
      rounded-xl border bg-white shadow-sm hover:shadow-md transition-shadow
      border-gray-200 dark:border-gray-800 dark:bg-black
    ">
      <div className="px-4 md:px-5 pt-4 md:pt-5 pb-3">
        <div className="flex items-start justify-between gap-3">
          <div className="flex gap-3 min-w-0">
            {item?.logo && <>
                <img noZoom src={src} alt={title} className={`${imgClass} mint-block dark:mint-hidden`} />
                <img noZoom src={srcDark} alt={title} className={`${imgClass} mint-hidden dark:mint-block`} />
              </>}

            <div className="min-w-0">
              <h4 className="text-base md:text-lg font-semibold text-gray-900 dark:text-white truncate !m-0 leading-snug">
                {title}
              </h4>
              {!!subtext && <p className="text-xs text-gray-500 dark:text-gray-400 truncate !m-0 leading-tight">{subtext}</p>}
            </div>
          </div>

          <div className="flex flex-col items-end gap-0.5 shrink-0">
            {!!badge && <span className="
                  inline-flex items-center rounded-full px-1.5 py-[0.5px] text-[10px] font-medium
                  border border-emerald-700 text-emerald-700 bg-emerald-200
                  dark:border-emerald-400 dark:text-emerald-300 dark:bg-emerald-900/30
                ">
                {badge}
              </span>}
            {!!date && <span className="mr-[5px] text-[10px] text-gray-500 dark:text-gray-400">
                on {date.replace(/^on\s+/i, "")}
              </span>}
          </div>
        </div>
      </div>

      <div className="h-px mx-3 bg-gray-200 dark:bg-gray-800" />

      <div className="px-4 md:px-5 py-3">
        <div className="libraries_cards flex items-center justify-between w-full gap-3">
          {github && <a href={github.url} target="_blank" rel="noopener noreferrer" className="
                no_external_icon inline-flex items-center gap-1.5 text-xs font-medium
                !text-black dark:!text-white
                !no-underline !border-0
                transition-colors duration-200
                hover:!text-neutral-700 dark:hover:!text-neutral-200
              " style={{
    borderBottom: "none !important"
  }}>
              <Icon icon="github" className="w-3 h-3 shrink-0" />
              <span className="leading-none">Github</span>
            </a>}

          {sample && <a href={sample.url} target="_blank" rel="noopener noreferrer" className="
                no_external_icon inline-flex items-center gap-1.5 text-xs font-medium
                !text-black dark:!text-white
                !no-underline !border-0
                transition-colors duration-200
                hover:!text-neutral-700 dark:hover:!text-neutral-200
              " style={{
    borderBottom: "none !important"
  }}>
              <Icon icon="download" className="w-3 h-3 shrink-0" />
              <span className="leading-none">Sample App</span>
            </a>}

          {tertiary && <a href={tertiary.url} className="
                no_external_icon inline-flex items-center gap-1.5 text-xs font-medium
                !text-black dark:!text-white
                !no-underline !border-0
                transition-colors duration-200
                hover:!text-neutral-700 dark:hover:!text-neutral-200
              " style={{
    borderBottom: "none !important"
  }}>
              {tertiaryLabel === "Quickstart" ? <Icon icon="play" className="w-3 h-3 shrink-0" /> : <Icon icon="file-lines" className="w-3 h-3 shrink-0" />}
              <span className="leading-none">{tertiaryLabel}</span>
            </a>}
        </div>
      </div>
    </article>;
};

export const BgImage = () => {
  return <>
      <span className="fixed inset-0 -z-10 pointer-events-none dark:hidden" style={{
    backgroundImage: "url('/images/bg_light.svg')",
    backgroundRepeat: "no-repeat",
    backgroundSize: "cover",
    backgroundPosition: "left -400px",
    backgroundAttachment: "fixed"
  }} />
      <span className="fixed inset-0 -z-10 pointer-events-none hidden dark:block" style={{
    backgroundImage: "url('/images/dark_bg.svg')",
    backgroundRepeat: "no-repeat",
    backgroundSize: "",
    backgroundPosition: "center 0",
    backgroundAttachment: "fixed"
  }} />
    </>;
};

export const QuickstartBanner = () => {
  return <div className="w-full flex justify-center px-4 mt-10">
      <div className="quickstart_banner_container w-full max-w-[1400px] flex flex-col md:flex-row items-center justify-between rounded-2xl p-10 text-white shadow-lg relative overflow-hidden">
        <div className="relative z-10 max-w-xl">
          <h1 className="text-4xl font-semibold mb-4">Quickstarts</h1>
          <p className="text-lg leading-relaxed">
            Step-by-step guides to quickly integrate Auth0 into your application.
          </p>
        </div>

        <div className="relative z-10 mt-8 md:mt-0 md:ml-10 flex justify-center">
          <img noZoom src="/images/library/header_img.svg" alt="library header" className="max-w-full min-w-[50%] mr-10" />
        </div>
      </div>
    </div>;
};

export const QuickstartPage = ({sections}) => {
  const [query, setQuery] = useState("");
  const SECTIONS = [{
    id: 'webapp',
    icon: '/docs/img/quickstarts/webapp-quantum.svg',
    title: 'Regular Web App',
    description: 'Traditional web app that runs on the server',
    cards: [{
      title: 'Apache',
      href: '/docs/quickstart/webapp/apache/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/apache.svg'
    }, {
      title: 'ASP.NET (OWIN)',
      href: '/docs/quickstart/webapp/aspnet-owin/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/dotnet.svg'
    }, {
      title: 'ASP.NET Core Blazor Server',
      href: '/docs/quickstart/webapp/aspnet-core-blazor-server/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/dotnet-platform.svg'
    }, {
      title: 'ASP.NET Core MVC',
      href: '/docs/quickstart/webapp/aspnet-core/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/dotnet-platform.svg'
    }, {
      title: 'Django',
      href: '/docs/quickstart/webapp/django/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/python.svg'
    }, {
      title: 'Express',
      href: '/docs/quickstart/webapp/express/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/javascript.svg'
    }, {
      title: 'Go',
      href: '/docs/quickstart/webapp/golang/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/golang.svg'
    }, {
      title: 'Java',
      href: '/docs/quickstart/webapp/java/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/java.svg'
    }, {
      title: 'Java EE',
      href: '/docs/quickstart/webapp/java-ee/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/java.svg'
    }, {
      title: 'Java Spring Boot',
      href: '/docs/quickstart/webapp/java-spring-boot/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/spring.svg'
    }, {
      title: 'Laravel',
      href: '/docs/quickstart/webapp/laravel/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/laravel.svg'
    }, {
      title: 'Next.js',
      href: '/docs/quickstart/webapp/nextjs/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/nextjs.svg'
    }, {
      title: 'NGINX Plus',
      href: '/docs/quickstart/webapp/nginx-plus/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/nginx.svg'
    }, {
      title: 'PHP',
      href: '/docs/quickstart/webapp/php/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/php.svg'
    }, {
      title: 'Python',
      href: '/docs/quickstart/webapp/python/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/python.svg'
    }, {
      title: 'Ruby On Rails',
      href: '/docs/quickstart/webapp/rails/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/rails.svg'
    }]
  }, {
    id: 'spa',
    icon: '/docs/img/quickstarts/spa-quantum.svg',
    title: 'Single Page App',
    description: 'JavaScript web app that runs in the browser',
    cards: [{
      title: 'Angular',
      href: '/docs/quickstart/spa/angular/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/angular.svg'
    }, {
      title: 'Flutter (Web)',
      href: '/docs/quickstart/spa/flutter/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/flutter.svg'
    }, {
      title: 'JavaScript',
      href: '/docs/quickstart/spa/vanillajs/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/javascript.svg'
    }, {
      title: 'React',
      href: '/docs/quickstart/spa/react/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/react.svg'
    }, {
      title: 'Vue',
      href: '/docs/quickstart/spa/vuejs/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/vuejs.svg'
    }]
  }, {
    id: 'native',
    icon: '/docs/img/quickstarts/native-quantum.svg',
    title: 'Native/Mobile App',
    description: 'Mobile or Desktop app that runs natively on a device',
    cards: [{
      title: '.NET Android and iOS',
      href: '/docs/quickstart/native/net-android-ios/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/dotnet.svg'
    }, {
      title: 'Android',
      href: '/docs/quickstart/native/android/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/android.svg'
    }, {
      title: 'Android - Facebook Login',
      href: '/docs/quickstart/native/android-facebook-login/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/android.svg'
    }, {
      title: 'Device Authorization Flow',
      href: '/docs/quickstart/native/device/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/auth0.svg'
    }, {
      title: 'Expo',
      href: '/docs/quickstart/native/react-native-expo/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/expo.svg'
    }, {
      title: 'Flutter',
      href: '/docs/quickstart/native/flutter/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/flutter.svg'
    }, {
      title: 'Ionic & Capacitor (Angular)',
      href: '/docs/quickstart/native/ionic-angular/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/ionic.svg'
    }, {
      title: 'Ionic & Capacitor (React)',
      href: '/docs/quickstart/native/ionic-react/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/ionic.svg'
    }, {
      title: 'Ionic & Capacitor (Vue)',
      href: '/docs/quickstart/native/ionic-vue/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/ionic.svg'
    }, {
      title: 'iOS / macOS',
      href: '/docs/quickstart/native/ios-swift/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/apple.svg'
    }, {
      title: 'MAUI',
      href: '/docs/quickstart/native/maui/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/dotnet-platform.svg'
    }, {
      title: 'React Native',
      href: '/docs/quickstart/native/react-native/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/react.svg'
    }, {
      title: 'UWP',
      href: '/docs/quickstart/native/windows-uwp-csharp/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/windows.svg'
    }, {
      title: 'WPF / Winforms',
      href: '/docs/quickstart/native/wpf-winforms/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/dotnet-platform.svg'
    }, {
      title: 'Xamarin',
      href: '/docs/quickstart/native/xamarin/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/xamarin.svg'
    }]
  }, {
    id: 'backend',
    icon: '/docs/img/quickstarts/backend-quantum.svg',
    title: 'Backend/API',
    description: 'An API or service protected by Auth0',
    cards: [{
      title: 'ASP.NET Core Web API',
      href: '/docs/quickstart/backend/aspnet-core-webapi/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/dotnet-platform.svg'
    }, {
      title: 'ASP.NET Web API (OWIN)',
      href: '/docs/quickstart/backend/webapi-owin/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/dotnet.svg'
    }, {
      title: 'Django API',
      href: '/docs/quickstart/backend/django/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/django.svg'
    }, {
      title: 'Go API',
      href: '/docs/quickstart/backend/golang/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/golang.svg'
    }, {
      title: 'Laravel API',
      href: '/docs/quickstart/backend/laravel/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/laravel.svg'
    }, {
      title: 'Node (Express) API',
      href: '/docs/quickstart/backend/nodejs/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/nodejs.svg'
    }, {
      title: 'PHP API',
      href: '/docs/quickstart/backend/php/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/php.svg'
    }, {
      title: 'Python API',
      href: '/docs/quickstart/backend/python/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/python.svg'
    }, {
      title: 'Ruby On Rails API',
      href: '/docs/quickstart/backend/rails/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/rails.svg'
    }, {
      title: 'Spring Boot API',
      href: '/docs/quickstart/backend/java-spring-security5/interactive',
      img: 'https://cdn2.auth0.com/docs/1.14494.0/img/platforms/spring.svg'
    }]
  }];
  const filtered = sections.map(section => ({
    ...section,
    cards: section.cards.filter(card => card.title.toLowerCase().includes(query.toLowerCase()))
  })).filter(section => section.cards.length > 0);
  return <div id="maincontent" role="main" className="mx-auto max-w-[1400px] py-12 text-slate-800 dark:text-slate-200">
      <form role="search" autoComplete="on" className="mb-10">
          <div className="w-full">
            <div className={`
                relative flex items-center
                border bg-white text-gray-900
                hover:border-gray-400
                focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500
                dark:bg-black dark:text-gray-100
                dark:border-gray-700 dark:hover:border-gray-600
                transition-colors
              `} aria-label="Search for your technology">
              <div className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="text-gray-500 dark:text-gray-400" aria-hidden="true">
                  <circle cx="11" cy="11" r="8"></circle>
                  <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
              </div>

              <input id="search-input-control" type="text" placeholder="Search for your technology..." value={query} onChange={e => setQuery(e.target.value)} className={`
                  w-full border-0
                  bg-transparent
                  pl-10 pr-10 py-2.5
                  placeholder:text-gray-400
                  focus:outline-none
                  text-sm
                  dark:placeholder:text-gray-500
                `} />

              {query && <button type="button" onClick={() => setQuery("")} className={`
                    absolute right-2 top-1/2 -translate-y-1/2
                    inline-flex items-center rounded-md px-2 py-1 text-xs
                    text-gray-600 hover:text-gray-900 bg-gray-100 hover:bg-gray-200
                    dark:text-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700
                    transition-colors
                  `} aria-label="Clear search">
                  Clear
                </button>}
            </div>
          </div>
        </form>

      {filtered.map(section => <section key={section.id} className="mb-12">
          <div id={section.id} className="mb-4 flex items-center gap-4">
            <img src={section.icon} alt="" className="h-8 w-8 shrink-0 rounded-xl bg-indigo-50 p-2 dark:bg-slate-800" />
            <div>
              <h2 className="m-0 text-xl leading-tight">{section.title}</h2>
              <p className="mt-1 text-base leading-snug text-slate-600 dark:text-slate-400">
                {section.description}
              </p>
            </div>
          </div>

          <div className="grid gap-4 [grid-template-columns:repeat(auto-fill,minmax(320px,1fr))] max-[480px]:grid-cols-2">
            {section.cards.map(card => <a key={card.title} href={card.href} role="button" className="flex items-center gap-3 border border-slate-200 bg-white p-4 text-inherit no-underline transition
                           hover:shadow-md active:translate-y-px focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-500 focus-visible:outline-offset-2
                           dark:border-slate-700 dark:bg-black">
                <img src={card.img} alt={`${card.title} logo`} className="h-6 w-6 shrink-0" />
                <span className="truncate text-[0.98rem] leading-tight">
                  {card.title}
                </span>
              </a>)}
          </div>
        </section>)}
    </div>;
};

<BgImage />

Step-by-step guides to quickly integrate Auth0 into your application

## Single Page App

JavaScript web app that runs in the browser

<Columns cols={2}>
  <SectionCard
    item={{
name: "React",
subtext: "",
logo: "react.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/react/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Angular",
subtext: "",
logo: "angular.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/angular/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "JavaScript",
subtext: "",
logo: "javascript.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/vanillajs/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Cap'n Web",
subtext: "",
logo: "javascript.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/vanillajs/capn-web" },
],
}}
  />

  <SectionCard
    item={{
name: "Vue",
subtext: "",
logo: "vuejs.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/vuejs/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Flutter (Web)",
subtext: "",
logo: "flutter.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/spa/flutter/interactive" },
],
}}
  />
</Columns>

## Regular Web App

Traditional web app that runs on the server

<Columns cols={2}>
  <SectionCard
    item={{
name: "Next.js",
subtext: "",
logo: "nextjs.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/nextjs/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Express",
subtext: "",
logo: "javascript.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/express/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Python",
subtext: "",
logo: "python.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/python/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Django",
subtext: "",
logo: "python.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/django/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Go",
subtext: "",
logo: "golang.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/golang/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Java",
subtext: "",
logo: "java.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/java/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Java EE",
subtext: "",
logo: "java.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/java-ee/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Java Spring Boot",
subtext: "",
logo: "spring.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/java-spring-boot/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET (OWIN)",
subtext: "",
logo: "dotnet.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/aspnet-owin/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET Core Blazor Server",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/aspnet-core-blazor-server/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET Core MVC",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/aspnet-core/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Laravel",
subtext: "",
logo: "laravel.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/laravel/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "PHP",
subtext: "",
logo: "php.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/php/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "NGINX Plus",
subtext: "",
logo: "nginx.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/nginx-plus/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Apache",
subtext: "",
logo: "apache.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/apache/interactive" }
],
}}
  />

  <SectionCard
    item={{
name: "Ruby On Rails",
subtext: "",
logo: "rails.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/webapp/rails/interactive" }
],
}}
  />
</Columns>

## Native/Mobile App

Mobile or Desktop app that runs natively on a device

<Columns cols={2}>
  <SectionCard
    item={{
name: "iOS / macOS",
subtext: "",
logo: "apple.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/ios-swift/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Android",
subtext: "",
logo: "android.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/android/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Android - Facebook Login",
subtext: "",
logo: "android.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/android-facebook-login/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "React Native",
subtext: "",
logo: "react.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/react-native/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Expo",
subtext: "",
logo: "expo.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/react-native-expo/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Flutter",
subtext: "",
logo: "flutter.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/flutter/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: ".NET Android and iOS",
subtext: "",
logo: "dotnet.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/net-android-ios/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "MAUI",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/maui/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Ionic & Capacitor (Angular)",
subtext: "",
logo: "ionic.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/ionic-angular/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Ionic & Capacitor (React)",
subtext: "",
logo: "ionic.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/ionic-react/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Ionic & Capacitor (Vue)",
subtext: "",
logo: "ionic.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/ionic-vue/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "UWP",
subtext: "",
logo: "windows.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/windows-uwp-csharp/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "WPF / Winforms",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/wpf-winforms/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Device Authorization Flow",
subtext: "",
logo: "auth0.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/device/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Xamarin",
subtext: "",
logo: "xamarin.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/native/xamarin/interactive" },
],
}}
  />
</Columns>

## Backend/API

An API or service protected by Auth0

<Columns cols={2}>
  <SectionCard
    item={{
name: "Node (Express) API",
subtext: "",
logo: "nodejs.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/nodejs/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Django API",
subtext: "",
logo: "django.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/django/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Python API",
subtext: "",
logo: "python.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/python/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Spring Boot API",
subtext: "",
logo: "spring.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/java-spring-security5/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Go API",
subtext: "",
logo: "golang.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/golang/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET Core Web API",
subtext: "",
logo: "dotnet-platform.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/aspnet-core-webapi/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "ASP.NET Web API (OWIN)",
subtext: "",
logo: "dotnet.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/webapi-owin/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Laravel API",
subtext: "",
logo: "laravel.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/laravel/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "PHP API",
subtext: "",
logo: "php.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/php/interactive" },
],
}}
  />

  <SectionCard
    item={{
name: "Ruby On Rails API",
subtext: "",
logo: "rails.svg",
date: "",
badge: "",
links: [
  { label: "Quickstart", url: "/docs/quickstart/backend/rails/interactive" },
],
}}
  />
</Columns>